{% extends 'inventory/base.html' %}
{% block title %}Übersicht{% endblock %}
{% block content %}
<section class="page-head overview-head" data-live-refresh>
  <div><h1>Übersicht</h1><p>Bestand, Eingänge und Datenqualität auf einen Blick</p></div>
  <nav class="period-tabs" aria-label="Zeitraum auswählen">
    <a href="?months=3" class="{% if period_months == 3 %}active{% endif %}">3 Monate</a>
    <a href="?months=6" class="{% if period_months == 6 %}active{% endif %}">6 Monate</a>
    <a href="?months=12" class="{% if period_months == 12 %}active{% endif %}">12 Monate</a>
  </nav>
</section>

<section class="metric-grid" aria-label="Wichtige Kennzahlen">
  <article class="metric-card"><span>Aktive Geräte</span><strong>{{ active_count }}</strong><small>derzeit im Bestand</small></article>
  <article class="metric-card accent"><span>Neueingänge</span><strong>{{ period_count }}</strong><small>{{ period_start|date:'d.m.Y' }} bis {{ today|date:'d.m.Y' }}</small><em class="{% if difference > 0 %}up{% elif difference < 0 %}down{% endif %}">{% if difference > 0 %}+{% endif %}{{ difference }} zum vorherigen Zeitraum</em></article>
  <article class="metric-card"><span>Davon Laptops</span><strong>{{ period_laptops }}</strong><small>in den letzten {{ period_months }} Monaten</small></article>
  <article class="metric-card"><span>Davon fertig</span><strong>{{ period_finished }}</strong><small>aktuell mit Status „Fertig“</small></article>
  <article class="metric-card"><span>Im Archiv</span><strong>{{ archived_count }}</strong><small>historisch abgelegte Geräte</small></article>
</section>

<section class="dashboard-grid">
  <article class="chart-panel monthly-panel">
    <header><div><h2>Geräteeingänge</h2><p>Erfasste Geräte pro Monat · letzte 12 Monate</p></div><strong class="chart-total">{{ maximum_month }}<small>Höchstwert</small></strong></header>
    <div class="line-chart-wrap">
      <svg class="line-chart" viewBox="0 0 900 230" role="img" aria-labelledby="arrivals-title">
        <title id="arrivals-title">Geräteeingänge der letzten zwölf Monate</title>
        <line x1="40" y1="35" x2="860" y2="35" class="chart-grid-line"/><line x1="40" y1="120" x2="860" y2="120" class="chart-grid-line"/><line x1="40" y1="205" x2="860" y2="205" class="chart-grid-line"/>
        <text x="31" y="39" text-anchor="end">{{ maximum_month }}</text><text x="31" y="124" text-anchor="end">{{ half_month }}</text><text x="31" y="209" text-anchor="end">0</text>
        <polygon points="{{ area_points }}" class="chart-area"/><polyline points="{{ line_points }}" class="chart-line"/>
        {% for item in month_series %}<circle cx="{{ item.x }}" cy="{{ item.y }}" r="4" class="chart-point"><title>{{ item.label }}: {{ item.count }} Geräte</title></circle>{% endfor %}
      </svg>
      <div class="month-labels">{% for item in month_series %}<span>{{ item.label }}</span>{% endfor %}</div>
    </div>
  </article>

  <article class="chart-panel">
    <header><div><h2>Gerätearten</h2><p>Neueingänge im gewählten Zeitraum</p></div></header>
    <div class="bar-chart">{% for item in type_rows %}<div class="bar-row"><div><span>{{ item.label }}</span><strong>{{ item.count }}</strong></div><span class="bar-track"><i style="width:{{ item.percentage }}%"></i></span></div>{% empty %}<p class="chart-empty">In diesem Zeitraum gibt es keine Eingänge.</p>{% endfor %}</div>
  </article>

  <article class="chart-panel">
    <header><div><h2>Statusverteilung</h2><p>Alle aktiven Geräte</p></div></header>
    <div class="donut-layout">
      <div class="donut" style="background:conic-gradient({{ status_gradient }})"><div><strong>{{ status_total }}</strong><span>Geräte</span></div></div>
      <div class="legend">{% for item in status_rows %}<div><i style="background:{{ item.color }}"></i><span>{{ item.label }}</span><strong>{{ item.count }} <small>{{ item.percentage }} %</small></strong></div>{% empty %}<p class="chart-empty">Keine aktiven Geräte vorhanden.</p>{% endfor %}</div>
    </div>
  </article>

  <article class="chart-panel">
    <header><div><h2>Häufigste Empfänger</h2><p>Neueingänge im gewählten Zeitraum</p></div></header>
    <div class="bar-chart recipient-chart">{% for item in recipient_rows %}<div class="bar-row"><div><span>{{ item.label }}</span><strong>{{ item.count }}</strong></div><span class="bar-track"><i style="width:{{ item.percentage }}%"></i></span></div>{% empty %}<p class="chart-empty">Noch keine Empfänger im Zeitraum erfasst.</p>{% endfor %}</div>
  </article>

  <article class="chart-panel">
    <header><div><h2>Datenvollständigkeit</h2><p>Anteil ausgefüllter Angaben bei aktiven Geräten</p></div></header>
    <div class="completion-chart">{% for item in completeness %}<div><span>{{ item.label }}</span><span class="completion-track"><i style="width:{{ item.percentage }}%"></i></span><strong>{{ item.percentage }} %</strong></div>{% endfor %}</div>
  </article>
</section>
{% endblock %}