{% extends "base.html" %}
{% block content %}
<section class="dashboard-hero {% if summary[2] %}critical{% elif summary[1] %}warning{% else %}ok{% endif %}">
  <div>
    <span class="eyebrow">OfficeCom Sentinel Uebersicht</span>
    <h1>{% if summary[2] %}Sicherheitslage<br>braucht Aufmerksamkeit.{% elif summary[1] %}Signale im Bestand<br>gezielt pruefen.{% else %}Sicherheitslage<br>unter Kontrolle.{% endif %}</h1>
    <p>Verdichtete Endpoint-Signale, Upload-Gesundheit und organisationsweite Einordnung an einem Ort.</p>
  </div>
  <div class="dashboard-status"><span class="status-orb"></span><span>Aktueller Zustand</span><strong>{% if summary[2] %}Kritisch{% elif summary[1] %}Pruefen{% else %}Stabil{% endif %}</strong><small>{{ current_alert_count }} aktuelle Auffaelligkeit{{ '' if current_alert_count == 1 else 'en' }}</small></div>
</section>

<section class="quick-metrics">
  <article><span>Geraete</span><strong>{{ summary[0] }}</strong><small>{{ coverage[1] }} melden aktuell</small></article>
  <article><span>Warnungen</span><strong class="warning">{{ summary[1] }}</strong><small>im letzten Status</small></article>
  <article><span>Kritisch</span><strong class="critical">{{ summary[2] }}</strong><small>sofort sichtbar</small></article>
  <article><span>Abdeckung</span><strong class="{% if coverage[2] %}warning{% else %}ok{% endif %}">{{ coverage[1] }}/{{ coverage[0] }}</strong><small>{{ coverage[2] }} stumm &gt; 36 Std.</small></article>
</section>

<section class="panel trend-panel">
  <div class="panel-heading"><span class="eyebrow">Letzte 14 Tage</span><h2>Signalverlauf <small>Verdichtete Scan-Ergebnisse pro Tag</small></h2></div>
  <div class="trend-chart" aria-label="Signalverlauf der letzten 14 Tage">{% for day in trend %}<article class="trend-day"><div class="trend-bar" style="--bar: {{ (day.event_count * 100 / trend_max)|round(0, 'floor') }}%"><span class="trend-critical" style="--critical: {{ (day.critical_count * 100 / trend_max)|round(0, 'floor') }}%"></span><span class="trend-warning" style="--warning: {{ (day.warning_count * 100 / trend_max)|round(0, 'floor') }}%"></span></div><strong>{{ day.event_count }}</strong><small>{{ day.day.strftime('%d.%m.') }}</small></article>{% else %}<p class="empty-state">Noch keine Trenddaten vorhanden.</p>{% endfor %}</div>
  <p class="chart-note"><span class="legend critical"></span>kritisch <span class="legend warning"></span>Warnungen <span class="legend neutral"></span>Ereignisvolumen</p>
</section>

<section class="panel organization-panel">
  <div class="panel-heading"><span class="eyebrow">Mandanten</span><h2>Organisationen <small>Drill-down bis zum einzelnen Geraet</small></h2></div>
  <div class="organization-grid">{% for organization in organizations %}<a class="organization-card" href="{{ url_for('organization', organization_id=organization.id) }}"><span class="eyebrow">{{ organization.id }}</span><strong>{{ organization.name }}</strong><div><span>{{ organization.device_count }} Geraete</span><span class="state critical">{{ organization.critical_count }} kritisch</span><span class="state warning">{{ organization.warning_count }} Warnung</span></div><small>Letzte Meldung: {{ organization.last_received_at or '-' }}</small></a>{% endfor %}</div>
</section>

<section class="panel coverage-panel">
  <div class="panel-heading"><h2>Geraeteabdeckung</h2></div>
  <div class="coverage-metrics"><article><span>Bekannt</span><strong>{{ coverage[0] }}</strong></article><article><span>Meldend &lt; 36 Std.</span><strong class="ok">{{ coverage[1] }}</strong></article><article><span>Stumm &gt; 36 Std.</span><strong class="{% if coverage[2] %}warning{% endif %}">{{ coverage[2] }}</strong></article></div>
</section>

{% if alerts %}
<section class="panel alert-panel">
  <div class="panel-heading"><h2>Auffaellige Geraete <small>{{ current_alert_count }} aktuell, {{ alerts|length - current_alert_count }} historisch</small></h2></div>
  <div class="alert-grid">
  {% for alert in alerts %}
    <a class="alert-card {{ alert.alert_state }}" href="{{ url_for('device', machine_name=alert.machine_name) }}">
      <span>{{ alert.alert_state }} | {{ 'aktuell' if alert.event.is_current else 'historisch' }}</span><strong>{{ alert.machine_name }}</strong><small>{{ alert.total_events }} Ereignisse | {{ alert.unique_ip_count }} Quell-IPs | letztes Ereignis {{ alert.event.label }}</small>
    </a>
  {% endfor %}
  </div>
</section>
{% endif %}

<section class="panel">
  <div class="panel-heading"><h2>Geraetestatus</h2></div>
  <div class="table-wrap"><table><thead><tr><th>Geraet</th><th>Organisation</th><th>Status</th><th>Ereignisse</th><th>Quell-IPs</th><th>Empfangen</th></tr></thead>
  <tbody>{% for row in reports %}<tr><td><a href="{{ url_for('device', machine_name=row.machine_name) }}">{{ row.machine_name }}</a></td><td>{{ row.organization_name or '-' }}</td><td><span class="state {{ row.alert_state }}">{{ row.alert_state }}</span>{% if row.total_events %}<span class="state {{ 'current' if row.event.is_current else 'historic' }}">{{ 'aktuell' if row.event.is_current else 'historisch' }}</span>{% endif %}</td><td>{{ row.total_events }}</td><td>{{ row.unique_ip_count }}</td><td>{{ row.received_at or '-' }}</td></tr>{% else %}<tr><td colspan="6">Keine Geraeteberichte.</td></tr>{% endfor %}</tbody></table></div>
</section>
{% endblock %}