{% extends "base.html" %}
{% from "_macros.html" import avatar %}

{% block title %}Messprotokolle{% endblock %}
{% block heading %}Messprotokolle{% endblock %}
{% block topbar_actions %}
  <a class="btn btn-primary" href="/measurements/templates/new">+ Neue Vorlage</a>
{% endblock %}

{% block content %}

<!-- KPIs -->
<section class="grid grid-cols-2 md:grid-cols-5 gap-4">
  <div class="kpi" style="border-left:4px solid #2563EB;">
    <p class="label" style="color:#1e40af;">Vorlagen</p>
    <p class="value">{{ stats.templates }}</p>
    <p class="sub">Mess-Templates</p>
  </div>
  <div class="kpi" style="border-left:4px solid #10b981;">
    <p class="label" style="color:#047857;">Bestanden</p>
    <p class="value">{{ stats.passed }}</p>
    <p class="sub">i.O. (in Ordnung)</p>
  </div>
  <div class="kpi" style="border-left:4px solid #ef4444;">
    <p class="label" style="color:#b91c1c;">Nicht bestanden</p>
    <p class="value">{{ stats.failed }}</p>
    <p class="sub">n.i.O. (außer Toleranz)</p>
  </div>
  <div class="kpi" style="border-left:4px solid #f59e0b;">
    <p class="label" style="color:#b45309;">Teilweise</p>
    <p class="value">{{ stats.partial }}</p>
    <p class="sub">einzelne Maße offen</p>
  </div>
  <div class="kpi" style="border-left:4px solid #737373;">
    <p class="label">Offen</p>
    <p class="value">{{ stats.open }}</p>
    <p class="sub">noch nicht gemessen</p>
  </div>
</section>

<!-- Templates list -->
<section class="card">
  <div class="card-header"><div>
    <h2>Mess-Vorlagen ({{ templates_|length }})</h2>
    <p class="sub">Vorlagen mit Soll-Werten und Toleranzen — eine Vorlage = ein Bauteil-Typ</p>
  </div></div>
  {% if templates_ %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Vorlage</th>
        <th>Beschreibung</th>
        <th class="num">Maße</th>
        <th class="num">Erfasst</th>
        <th>Quote</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for t in templates_ %}
      {% set total = (t.passed_count or 0) + (t.failed_count or 0) %}
      {% set pass_pct = (t.passed_count * 100 / total) if total else 0 %}
      <tr>
        <td>
          <div class="font-semibold">{{ t.name }}</div>
          {% if t.item_ident %}<div class="text-xs nums text-blue-600">{{ t.item_ident }}</div>{% endif %}
        </td>
        <td class="text-xs text-neutral-600 truncate" style="max-width:300px">{{ t.description or '—' }}</td>
        <td class="num">
          {% set npts = t.points_json | length // 50 %}
          <span class="badge badge-blue">
            {%- set points_count = (t.points_json | from_json | length) if (t.points_json and (t.points_json | from_json) is iterable) else '?' -%}
            {{ points_count }} Maß(e)
          </span>
        </td>
        <td class="num nums">{{ t.record_count or 0 }}</td>
        <td>
          {% if total %}
          <div class="flex items-center gap-2">
            <div class="relative h-2 bg-neutral-100 rounded-full overflow-hidden" style="min-width:120px;">
              <div class="absolute inset-y-0 left-0" style="width:{{ pass_pct|int }}%; background:#10b981;"></div>
            </div>
            <span class="text-[11px] text-neutral-500 nums whitespace-nowrap">
              {{ t.passed_count }} ✓ · {{ t.failed_count }} ✗
            </span>
          </div>
          {% else %}<span class="text-xs text-neutral-400">noch keine Erfassung</span>{% endif %}
        </td>
        <td class="text-right whitespace-nowrap">
          <a class="btn btn-sm btn-primary" href="/measurements/templates/{{ t.id }}/measure">+ Messung</a>
          <a class="btn btn-sm btn-secondary" href="/measurements/templates/{{ t.id }}/edit">Bearbeiten</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-12 text-center text-sm text-neutral-500">
    Noch keine Vorlagen.
    <a href="/measurements/templates/new" class="text-blue-600 hover:underline">Erste Vorlage anlegen →</a>
  </div>
  {% endif %}
</section>

<!-- Recent records -->
<section class="card">
  <div class="card-header"><div>
    <h2>Letzte Messungen</h2>
    <p class="sub">{{ records|length }} Einträge, neueste zuerst</p>
  </div></div>
  {% if records %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Wann</th>
        <th>Vorlage</th>
        <th>Seriennr.</th>
        <th>Status</th>
        <th>Geprüft von</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for r in records %}
      <tr class="cursor-pointer" onclick="location='/measurements/records/{{ r.id }}'">
        <td class="nums text-xs">{{ r.created_at[:16] }}</td>
        <td>{{ r.template_name }}</td>
        <td class="nums text-xs">{{ r.serial_no or '—' }}</td>
        <td>
          {% if r.status == 'passed' %}<span class="badge badge-emerald">i.O. ✓</span>
          {% elif r.status == 'failed' %}<span class="badge badge-red">n.i.O. ✗</span>
          {% elif r.status == 'partial' %}<span class="badge badge-amber">teilweise</span>
          {% else %}<span class="badge badge-neutral">offen</span>{% endif %}
        </td>
        <td class="text-xs">
          {% if r.first_name %}{{ r.first_name }} {{ r.last_name }}{% else %}—{% endif %}
        </td>
        <td class="text-right"><a class="btn btn-sm btn-secondary" href="/measurements/records/{{ r.id }}">Öffnen</a></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-12 text-center text-sm text-neutral-500">Noch keine Messungen erfasst.</div>
  {% endif %}
</section>

{% endblock %}