{% extends "base.html" %}
{% block title %}Spannmittel{% endblock %}
{% block heading %}🗜 Spannmittel{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Operativ / Spannmittel</p>{% endblock %}

{% block content %}
<style>
  .stat-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-bottom:18px; }
  .stat { background:rgba(15,22,48,0.40); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:18px; }
  .stat .v { font-size:32px; font-weight:700; }
  .stat .l { font-size:11px; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-top:4px; }
  table.cl { width:100%; border-collapse:collapse; }
  table.cl th, table.cl td { padding:10px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.06); }
  table.cl th { font-size:11px; text-transform:uppercase; color:rgba(255,255,255,0.55); }
  .badge-overdue { background:rgba(239,68,68,0.30); color:#fca5a5; padding:3px 8px; border-radius:6px; font-size:11px; font-weight:700; }
  .badge-soon    { background:rgba(252,211,77,0.25); color:#fcd34d; padding:3px 8px; border-radius:6px; font-size:11px; font-weight:700; }
  .badge-ok      { background:rgba(16,185,129,0.20); color:#6ee7b7; padding:3px 8px; border-radius:6px; font-size:11px; font-weight:600; }
</style>

<div class="stat-grid">
  <div class="stat"><div class="v">{{ stats.total }}</div><div class="l">Spannmittel gesamt</div></div>
  <div class="stat"><div class="v" style="color:#ef4444;">{{ stats.overdue }}</div><div class="l">Kalibrierung überfällig</div></div>
  <div class="stat"><div class="v" style="color:#fcd34d;">{{ stats.in_use }}</div><div class="l">Aktuell ausgeliehen</div></div>
</div>

<div class="card">
  <div class="card-header"><div><h2>Alle Spannmittel</h2></div></div>
  <table class="cl">
    <thead>
      <tr>
        <th>Bezeichnung</th>
        <th class="num">Bestand</th>
        <th>Lagerort</th>
        <th>Nächste Prüfung</th>
        <th>Status</th>
        <th>Aktion</th>
      </tr>
    </thead>
    <tbody>
      {% for it in items %}
      <tr>
        <td>
          <strong>{{ it.ident or '?' }}</strong>
          {% if it.description %}<div class="text-[11px] text-neutral-500">{{ it.description[:60] }}</div>{% endif %}
        </td>
        <td class="num">{{ it.quantity_total }}{% if it.active_rentals %} <span style="color:#fcd34d;">(−{{ it.active_rentals }})</span>{% endif %}</td>
        <td>{{ it.location or '—' }}</td>
        <td>{{ it.next_inspection_date or '—' }}</td>
        <td>
          {% if it.status == 'overdue' %}<span class="badge-overdue">⚠ ÜBERFÄLLIG</span>
          {% elif it.status == 'soon' %}<span class="badge-soon">⏳ Bald</span>
          {% elif it.status == 'ok' %}<span class="badge-ok">✓ OK</span>
          {% else %}<span style="color:rgba(255,255,255,0.40);font-size:11px;">— kein Datum —</span>
          {% endif %}
        </td>
        <td><a class="btn btn-sm btn-secondary" href="/items/{{ it.id }}">Öffnen</a></td>
      </tr>
      {% else %}
      <tr><td colspan="6" style="text-align:center;padding:30px;color:rgba(255,255,255,0.40);">Keine Spannmittel angelegt.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<p style="margin-top:14px;font-size:12px;color:rgba(255,255,255,0.55);">
  Tipp: Spannmittel werden über <a href="/items/new?item_type=clamping" style="color:#fcd34d;">Artikel neu</a> mit Typ <code>clamping</code> angelegt.
  Kalibrierung läuft synchron zu Messmitteln (DGUV V3).
</p>

{% endblock %}