{% extends "base.html" %}
{% from "_macros.html" import money, empty_state %}

{% block title %}Normalien / Zukaufteile{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Material &amp; Lager / Normalien</p>{% endblock %}
{% block heading %}Normalien &amp; Zukaufteile{% endblock %}

{% block topbar_actions %}
  <a class="btn btn-secondary btn-sm" href="/purchased-parts/reorder"
     title="Sammelbestellung — alle Teile unter Mindest, gruppiert nach Lieferant">
    🛒 Sammelbestellung
  </a>
  <a class="btn btn-primary btn-sm" href="/items/new?item_type=purchased_part">+ Zukaufteil anlegen</a>
{% endblock %}

{% block content %}

{# ---------- Filter-Leiste ---------- #}
<form method="get" action="/purchased-parts" class="card" style="margin-bottom: 12px;">
  <div style="padding: 12px 16px; display: grid;
              grid-template-columns: 2fr 1fr 1fr auto auto; gap: 10px; align-items: end;">
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Suche</label>
      <input class="input mt-1 w-full" type="text" name="search"
             value="{{ filter_search }}"
             placeholder="SKU, Bezeichnung, Norm oder Hersteller-Nr.">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Norm</label>
      <select class="select mt-1 w-full" name="norm">
        <option value="">— alle Normen —</option>
        {% for n in norms %}
        <option value="{{ n }}" {% if filter_norm == n %}selected{% endif %}>{{ n }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Hersteller</label>
      <select class="select mt-1 w-full" name="manufacturer">
        <option value="">— alle Hersteller —</option>
        {% for m in manufacturers %}
        <option value="{{ m }}" {% if filter_manufacturer == m %}selected{% endif %}>{{ m }}</option>
        {% endfor %}
      </select>
    </div>
    <div style="display: flex; align-items: center; gap: 6px; padding: 0 8px;">
      <input type="checkbox" id="low_stock" name="low_stock" value="1"
             {% if filter_low_stock %}checked{% endif %}>
      <label for="low_stock" style="font-size: 12px; cursor: pointer;">Nur unter Mindestbestand</label>
    </div>
    <div style="display: flex; gap: 6px;">
      <button class="btn btn-sm btn-primary" type="submit">Filtern</button>
      <a class="btn btn-sm btn-secondary" href="/purchased-parts">Zurücksetzen</a>
    </div>
  </div>
</form>

{# ---------- Tabelle ---------- #}
{% if parts %}
<div class="card">
  <div class="card-header"><div>
    <h2>{{ parts|length }} Zukaufteile</h2>
    <p class="sub">Normalien, Schrauben, Lager, Dichtungen &middot; alles was du <b>einkaufst</b> statt selbst zu fertigen</p>
  </div></div>
  <table class="data-table">
    <thead>
      <tr>
        <th>SKU</th>
        <th>Norm</th>
        <th>Bezeichnung</th>
        <th>Hersteller</th>
        <th>Hersteller-Nr.</th>
        <th class="num">Bestand</th>
        <th class="num">Min</th>
        <th>Lieferant</th>
        <th class="num">verbaut in</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for p in parts %}
      {% set below = p.quantity_min and p.quantity_total < p.quantity_min %}
      <tr class="cursor-pointer" onclick="location='/items/{{ p.id }}'">
        <td class="nums font-semibold">{{ p.ident }}</td>
        <td class="nums" style="color: var(--brand-blue-light); font-weight: 600;">
          {{ p.norm_reference or '—' }}
        </td>
        <td>
          {{ p.description or '—' }}
          {% if p.description_2 %}
          <div class="text-xs" style="color: var(--card-text-muted);">{{ p.description_2 }}</div>
          {% endif %}
        </td>
        <td>{{ p.manufacturer or '—' }}</td>
        <td class="text-xs nums" style="color: var(--card-text-muted);">{{ p.manufacturer_part_no or '—' }}</td>
        <td class="num nums {% if below %}font-semibold{% endif %}"
            style="{% if below %}color: #f87171;{% endif %}">{{ p.quantity_total }}</td>
        <td class="num nums text-xs" style="color: var(--card-text-muted);">{{ p.quantity_min or '—' }}</td>
        <td class="text-xs">{{ p.default_vendor_name or '—' }}</td>
        <td class="num">
          {% if p.used_in_boms %}
          <span class="badge badge-blue" title="In {{ p.used_in_boms }} Baugruppen verbaut">
            {{ p.used_in_boms }}× BG
          </span>
          {% else %}
          <span class="text-xs" style="color: var(--card-text-muted);">—</span>
          {% endif %}
        </td>
        <td class="text-right" onclick="event.stopPropagation()">
          {% if below %}
          <a class="btn btn-sm btn-primary" href="/purchase-orders/new?item_id={{ p.id }}">+ Bestellen</a>
          {% endif %}
          <a class="btn btn-sm btn-secondary" href="/items/{{ p.id }}">&Ouml;ffnen</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
  {{ empty_state(
      icon='🔩',
      title='Noch keine Zukaufteile angelegt',
      description='Lege Normalien, Schrauben, Lager, Dichtungen etc. an. Diese erscheinen dann in Baugruppen-Stücklisten und werden bei zu niedrigem Bestand automatisch zur Nachbestellung vorgeschlagen.',
      ctas=[
        {'label': '+ Zukaufteil anlegen', 'href': '/items/new?item_type=purchased_part', 'primary': True},
        {'label': 'CSV-Import',           'href': '/import'},
      ],
  ) }}
{% endif %}

{% endblock %}