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

{% block title %}Prüfmittel{% endblock %}
{% block heading %}{% if filter_type == 'measuring_equipment' %}Messmittel{% elif filter_type == 'clamping' %}Spannmittel{% else %}Alle Prüfmittel{% endif %}{% endblock %}
{% block topbar_actions %}
  <div class="tabs">
    <a class="tab {% if not filter_type %}is-active{% endif %}" href="/inspections">Alle</a>
    <a class="tab {% if filter_type=='measuring_equipment' %}is-active{% endif %}" href="/inspections?type=measuring_equipment">Messmittel</a>
    <a class="tab {% if filter_type=='clamping' %}is-active{% endif %}" href="/inspections?type=clamping">Spannmittel</a>
  </div>
  {% if filter_type == 'measuring_equipment' %}
    <a class="btn btn-primary btn-sm" href="/items/new?item_type=measuring_equipment">+ Neues Messmittel</a>
  {% elif filter_type == 'clamping' %}
    <a class="btn btn-primary btn-sm" href="/items/new?item_type=clamping">+ Neues Spannmittel</a>
  {% else %}
    <a class="btn btn-secondary btn-sm" href="/items/new?item_type=measuring_equipment">+ Messmittel</a>
    <a class="btn btn-secondary btn-sm" href="/items/new?item_type=clamping">+ Spannmittel</a>
  {% endif %}
{% endblock %}

{% block content %}

<!-- Status overview -->
<section class="grid grid-cols-1 md:grid-cols-4 gap-4">
  <div class="kpi" style="border-left: 4px solid #ef4444;">
    <p class="label" style="color:#fca5a5;">Überfällig</p>
    <p class="value" style="color:#fecaca;">{{ counts.overdue }}</p>
    <p class="sub">Prüfung bereits fällig</p>
  </div>
  <div class="kpi" style="border-left: 4px solid #f59e0b;">
    <p class="label" style="color:#fcd34d;">Demnächst fällig</p>
    <p class="value" style="color:#fde68a;">{{ counts.warning }}</p>
    <p class="sub">in den nächsten 30 Tagen</p>
  </div>
  <div class="kpi" style="border-left: 4px solid #10b981;">
    <p class="label" style="color:#6ee7b7;">In Ordnung</p>
    <p class="value" style="color:#a7f3d0;">{{ counts.ok }}</p>
    <p class="sub">nächste Prüfung in &gt; 30 Tagen</p>
  </div>
  <div class="kpi" style="border-left: 4px solid #737373;">
    <p class="label">Ohne Prüfintervall</p>
    <p class="value">{{ counts.unset }}</p>
    <p class="sub">noch nicht eingerichtet</p>
  </div>
</section>

<div class="card">
  <div class="card-header">
    <div>
      <h2>{{ items|length }} Prüfmittel</h2>
      <p class="sub">Sortiert nach Dringlichkeit — überfällige zuerst</p>
    </div>
  </div>
  {% if items %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Status</th>
        <th>Artikel</th>
        <th>Typ</th>
        <th>Anschaffung</th>
        <th>Letzte Prüfung</th>
        <th>Intervall</th>
        <th>Nächste Prüfung</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for it in items %}
      <tr class="cursor-pointer" onclick="location='/items/{{ it.id }}'">
        <td>
          {% if it.status == 'overdue' %}
            <span class="badge badge-red">Überfällig · {{ -it.days_to_next }} T</span>
          {% elif it.status == 'warning' %}
            <span class="badge badge-amber">Fällig in {{ it.days_to_next }} T</span>
          {% elif it.status == 'ok' %}
            <span class="badge badge-emerald">OK · {{ it.days_to_next }} T</span>
          {% else %}
            <span class="badge badge-neutral">Nicht gesetzt</span>
          {% endif %}
        </td>
        <td>
          <div class="font-medium nums">{{ it.ident }}</div>
          <div class="text-xs text-neutral-500 truncate" style="max-width:300px">{{ it.description }}</div>
        </td>
        <td>
          {% if it.item_type == 'measuring_equipment' %}
            <span class="badge badge-purple">Messmittel</span>
          {% else %}
            <span class="badge badge-blue">Spannmittel</span>
          {% endif %}
        </td>
        <td class="nums text-neutral-600 text-xs">{{ it.acquired_date or '—' }}</td>
        <td class="nums text-neutral-700 text-xs">{{ it.last_inspection_date or '—' }}</td>
        <td class="nums text-neutral-600 text-xs">{% if it.inspection_interval_months %}{{ it.inspection_interval_months }} Mon.{% else %}—{% endif %}</td>
        <td class="nums font-medium text-xs">{{ it.next_inspection_date or '—' }}</td>
        <td class="text-right">
          <a class="btn btn-sm btn-secondary" href="/items/{{ it.id }}">Prüfen</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-12 text-center text-sm text-neutral-500">Keine Prüfmittel in dieser Auswahl.</div>
  {% endif %}
</div>

{% endblock %}