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

{% block title %}Werkzeug-Filter · Werkstatt{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Werkstatt / Werkzeuge filtern</p>{% endblock %}
{% block heading %}Werkzeug-Filter{% endblock %}

{% block content %}
<style>
  .filter-bar { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; padding:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:10px; margin-bottom:14px; }
  .filter-bar label { font-size:9px; font-weight:700; color:var(--card-text-muted); text-transform:uppercase; letter-spacing:0.06em; display:block; margin-bottom:4px; }
  .filter-bar select { width:100%; padding:7px 9px; border:1px solid rgba(255,255,255,0.20); border-radius:5px; font-size:12px; background:rgba(255,255,255,0.06); color:var(--card-text); }
  .filter-bar select:focus { border-color:var(--brand-orange); outline:none; box-shadow:0 0 0 3px rgba(242,88,27,0.20); }
  .reset-link { font-size:10px; color:var(--brand-orange); text-decoration:none; margin-left:8px; }
  .reset-link:hover { text-decoration:underline; }

  .result-summary { display:flex; align-items:center; gap:12px; margin-bottom:10px; color:var(--card-text); }
  .result-summary .pages-info { color:var(--card-text-muted); font-weight:normal; }

  .item-table { width:100%; border-collapse:collapse; font-size:12px; }
  .item-table th { text-align:left; padding:9px 10px; font-size:10px; font-weight:600; color:var(--card-text-muted); text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); position:sticky; top:0; z-index:1; }
  .item-table td { padding:9px 10px; border-bottom:1px solid rgba(255,255,255,0.06); color:var(--card-text); vertical-align:middle; }
  .item-table tr:hover td { background:rgba(255,255,255,0.05); cursor:pointer; }
  .ident-cell { font-family:ui-monospace,monospace; font-weight:600; color:var(--card-text); font-size:11.5px; }
  .description-cell { color:var(--card-text-muted); }
  .type-badge { display:inline-block; padding:2px 7px; border-radius:3px; font-size:9px; font-weight:600; text-transform:uppercase; }
  .type-tool { background:rgba(245,158,11,0.18); color:#fcd34d; }
  .type-measuring_equipment { background:rgba(53,102,146,0.25); color:#93c5fd; }
  .type-clamping { background:rgba(168,85,247,0.20); color:#d8b4fe; }
  .qty-cell { font-family:ui-monospace,monospace; font-weight:600; text-align:right; }
  .qty-low { color:#fca5a5; font-weight:700; }
  .qty-min { color:var(--card-text-muted); font-family:ui-monospace,monospace; text-align:right; }
  .pager-link { padding:5px 12px; border:1px solid rgba(255,255,255,0.15); border-radius:5px; font-size:11px; text-decoration:none; color:var(--card-text); }
  .pager-link:hover { background:rgba(255,255,255,0.08); border-color:var(--brand-orange); }
  .pager-current { padding:5px 12px; background:var(--brand-orange); color:#fff; border-radius:5px; font-size:11px; }

  /* Light-Mode Override */
  body.theme-light .filter-bar { background:#fafafa; border-color:#e5e5e5; }
  body.theme-light .filter-bar label { color:#737373; }
  body.theme-light .filter-bar select { background:#fff; border-color:#d4d4d4; color:#1a1a1a; }
  body.theme-light .result-summary { color:#1a1a1a; }
  body.theme-light .result-summary .pages-info { color:#737373; }
  body.theme-light .item-table th { color:#737373; border-bottom-color:#e5e5e5; background:#fff; }
  body.theme-light .item-table td { color:#1a1a1a; border-bottom-color:#f0f0f0; }
  body.theme-light .item-table tr:hover td { background:#fafafa; }
  body.theme-light .ident-cell { color:#525252; }
  body.theme-light .description-cell { color:#525252; }
  body.theme-light .type-tool { background:#fef3c7; color:#92400e; }
  body.theme-light .type-measuring_equipment { background:#dbeafe; color:#1e40af; }
  body.theme-light .type-clamping { background:#fce7f3; color:#9d174d; }
  body.theme-light .qty-low { color:#dc2626; }
  body.theme-light .qty-min { color:#737373; }
  body.theme-light .pager-link { border-color:#e5e5e5; color:#1a1a1a; }
</style>

<div class="filter-bar">
  <form method="get" id="filter-form" style="display:contents;">
  {% for axis in axes %}
    <div>
      <label>{{ axis.name }}</label>
      <select name="ax{{ axis.level }}" onchange="document.getElementById('filter-form').submit()">
        <option value="">— alle —</option>
        {% for v in axis['values'] %}
        <option value="{{ v.id }}" {% if selected.get(axis.level) == v.id %}selected{% endif %}>{{ v.value }}</option>
        {% endfor %}
      </select>
    </div>
  {% endfor %}
  </form>
</div>

<div class="result-summary">
  <strong style="font-size:13px;">
    {{ total }} Werkzeug{% if total != 1 %}e{% endif %}
    {% if selected %}gefunden{% else %}gesamt{% endif %}
    {% if total_pages > 1 %}<span class="pages-info"> · Seite {{ page }} / {{ total_pages }}</span>{% endif %}
  </strong>
  {% if selected %}
  <a href="/werkstatt/werkzeuge/filter" class="reset-link">Filter zurücksetzen</a>
  {% endif %}
</div>

<div class="card">
  <div style="max-height:65vh; overflow-y:auto;">
    {% if not items %}
      <div class="p-5 text-sm text-neutral-500 italic" style="text-align:center;">
        Keine Werkzeuge mit dieser Filter-Kombination gefunden.
      </div>
    {% else %}
    <table class="item-table">
      <thead>
        <tr>
          <th style="width:50px;">Quelle</th>
          <th style="width:18%;">Ident</th>
          <th style="width:12%;">Typ</th>
          <th>Beschreibung</th>
          <th style="width:8%;">Bestand</th>
          <th style="width:8%;">Min</th>
        </tr>
      </thead>
      <tbody>
        {% for it in items %}
        <tr onclick="location.href='/items/{{ it.id }}'">
          <td>{{ app_pill(it.source_app) }}</td>
          <td class="ident-cell">{{ it.ident }}</td>
          <td><span class="type-badge type-{{ it.item_type }}">{{ it.item_type }}</span></td>
          <td class="description-cell">{{ (it.description or '')|truncate(80) }}</td>
          <td class="qty-cell {% if (it.quantity_total or 0) < (it.quantity_min or 0) %}qty-low{% endif %}">{{ it.quantity_total or 0 }}</td>
          <td class="qty-min">{{ it.quantity_min or 0 }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}
  </div>
  {% if total_pages > 1 %}
  {% set qstr = [] %}
  {% for level, vid in selected.items() %}{% set _ = qstr.append('ax' ~ level ~ '=' ~ vid) %}{% endfor %}
  {% set qbase = '?' ~ qstr|join('&') ~ ('&' if qstr else '') %}
  <div style="display:flex; gap:6px; justify-content:center; padding:14px;">
    {% if page > 1 %}<a class="pager-link" href="{{ qbase }}page={{ page - 1 }}">‹ Vor</a>{% endif %}
    <span class="pager-current">Seite {{ page }} / {{ total_pages }}</span>
    {% if page < total_pages %}<a class="pager-link" href="{{ qbase }}page={{ page + 1 }}">Nach ›</a>{% endif %}
  </div>
  {% endif %}
</div>
{% endblock %}