{% extends "base.html" %}

{% block title %}Stücklisten{% endblock %}
{% block heading %}Stücklisten / BOM{% endblock %}
{% block topbar_actions %}
  <div class="tabs">
    <a class="tab {% if not only_active %}is-active{% endif %}" href="/bom">Alle</a>
    <a class="tab {% if only_active %}is-active{% endif %}" href="/bom?only_active=1">Nur aktive</a>
  </div>
{% endblock %}

{% block content %}
<div class="card">
  {% if boms %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Artikel</th>
        <th>Beschreibung</th>
        <th>Version</th>
        <th class="num">Linien</th>
        <th>Status</th>
        <th>Letzte Änderung</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for b in boms %}
      <tr class="cursor-pointer" onclick="location='/items/{{ b.item_id }}/bom'">
        <td class="nums font-semibold">{{ b.item_ident or '—' }}</td>
        <td class="text-sm" style="max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
          {{ b.item_desc or '—' }}
        </td>
        <td class="nums text-xs">{{ b.version }}</td>
        <td class="num nums">{{ b.line_count }}</td>
        <td>
          {% if b.is_active %}
            <span class="badge badge-emerald">aktiv</span>
          {% else %}
            <span class="badge badge-neutral">archiviert</span>
          {% endif %}
        </td>
        <td class="text-xs nums" style="color: var(--card-text-muted);">{{ (b.updated_at or b.created_at or '')[:16] }}</td>
        <td class="text-right" onclick="event.stopPropagation()">
          <a class="btn btn-sm btn-secondary" href="/items/{{ b.item_id }}/bom">Öffnen</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-12 text-center">
    <div style="font-size: 48px; line-height: 1; opacity: 0.20; margin-bottom: 12px;">📋</div>
    <p class="text-sm" style="color: var(--card-text-muted);">Noch keine Stücklisten angelegt.</p>
    <p class="text-xs mt-2" style="color: var(--card-text-muted);">
      Stücklisten werden auf der Detail-Seite eines Artikels angelegt
      (<a href="/items" class="hover:underline" style="color:#f2581b;">Artikel öffnen</a> → Tab „Stückliste").
    </p>
  </div>
  {% endif %}
</div>
{% endblock %}