{% extends 'base.html.twig' %}

{% block title %}Alarm-Verlauf{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumbs">
        <a href="{{ path('app_dashboard') }}">Dashboard</a>
        <i class="fas fa-chevron-right"></i>
        <span>Alarm-Verlauf</span>
    </div>
    <div class="delivery-page-header">
        <h1><i class="fas fa-history"></i> Alarm-Verlauf</h1>
    </div>
</div>

<form method="get" action="{{ path('app_alarm_history') }}" class="form-card mb-2">
    <h2 class="mb-1">Filter</h2>
    <div class="form-grid-2">
        <div class="form-section">
            <label for="filter_datalogger_id" class="form-label-block">Datalogger</label>
            <select id="filter_datalogger_id" name="datalogger_id" class="form-input-full">
                <option value="">Alle</option>
                {% for dl in allDataloggers %}
                    <option value="{{ dl.id }}" {{ filter.datalogger_id == dl.id ? 'selected' : '' }}>{{ dl.name }}{% if dl.location %} ({{ dl.location }}){% endif %}</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-section">
            <label for="filter_group_id" class="form-label-block">Sektion/Gruppe</label>
            <select id="filter_group_id" name="group_id" class="form-input-full">
                <option value="">Alle</option>
                {% for g in allGroups %}
                    <option value="{{ g.id }}" {{ filter.group_id == g.id ? 'selected' : '' }}>{{ g.name }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="form-grid-2">
        <div class="form-section">
            <label for="filter_from" class="form-label-block">Von (Datum)</label>
            <input type="date" id="filter_from" name="from" value="{{ filter.from|default('') }}" class="form-input-full">
        </div>
        <div class="form-section">
            <label for="filter_to" class="form-label-block">Bis (Datum)</label>
            <input type="date" id="filter_to" name="to" value="{{ filter.to|default('') }}" class="form-input-full">
        </div>
    </div>
    <div class="form-section form-actions-inline">
        <label for="filter_severity" class="form-label-block">Level</label>
        <select id="filter_severity" name="severity" class="form-input-full">
            <option value="">Alle</option>
            <option value="warning" {{ filter.severity == 'warning' ? 'selected' : '' }}>Warnlevel</option>
            <option value="critical" {{ filter.severity == 'critical' ? 'selected' : '' }}>Alarmlevel</option>
        </select>
        <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filtern</button>
    </div>
</form>

<div class="content-card">
    {% if alarms is empty %}
        <div class="empty-state-card">
            <i class="fas fa-bell-slash empty-state-icon-user"></i>
            <p>Keine Alarme gefunden.</p>
            <p class="text-secondary text-sm mt-half">Passen Sie die Filter an oder es liegen im gewählten Zeitraum keine Einträge vor.</p>
        </div>
    {% else %}
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Zeit</th>
                        <th>Datalogger</th>
                        <th>Sektion</th>
                        <th>Typ</th>
                        <th>Level</th>
                        <th>Wert / Schwelle</th>
                        <th>Nachricht</th>
                        <th>Status</th>
                        <th>Quittiert</th>
                    </tr>
                </thead>
                <tbody>
                    {% for alarm in alarms %}
                    {% set alarmLevel = alarm.metadata.level|default(alarm.severity == 'critical' ? 'alarm' : 'warn') %}
                    <tr class="{{ alarm.resolvedAt is null ? (alarm.severity == 'critical' ? 'alarm-row--critical' : 'alarm-row--active') : '' }}">
                        <td class="font-mono text-sm">{{ alarm.createdAt|date('d.m.Y H:i') }}</td>
                        <td>{{ dataloggerNames[alarm.dataloggerId]|default('–') }}</td>
                        <td>{{ alarm.groupName|default('–') }}</td>
                        <td><span class="badge">{{ alarm.type }}</span></td>
                        <td>
                            <span class="severity-badge severity-badge--{{ alarm.severity }}">{{ alarmLevel|alarm_level_label }}</span>
                        </td>
                        <td class="font-mono text-sm">{{ alarm.value }} / {{ alarm.threshold }}{% if alarm.direction %} ({{ alarm.direction }}){% endif %}</td>
                        <td class="text-sm">{{ alarm.message|slice(0, 80) }}{% if alarm.message|length > 80 %}…{% endif %}</td>
                        <td>
                            {% if alarm.resolvedAt %}
                                <span class="text-secondary text-sm">Aufgelöst {{ alarm.resolvedAt|date('d.m.Y H:i') }}</span>
                            {% else %}
                                <span class="badge badge-filled--{{ alarm.severity }}">Aktiv</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if alarm.acknowledged %}
                                <span class="text-sm">Ja{% if alarm.acknowledgedBy %} ({{ alarm.acknowledgedBy }}){% endif %}</span>
                            {% else %}
                                <span class="text-secondary text-sm">–</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <p class="text-secondary text-sm mt-1">Angezeigt: {{ alarms|length }} Einträge (max. 500).</p>
    {% endif %}
</div>
{% endblock %}