{% extends "base.html" %}

{% block title %}BOM-Import — {{ item.ident }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/items" class="hover:underline">Artikel</a> / <a href="/items/{{ item.id }}" class="hover:underline">{{ item.ident }}</a> / <a href="/items/{{ item.id }}/bom" class="hover:underline">Stückliste</a> / Import</p>{% endblock %}
{% block heading %}Stückliste importieren · {{ item.ident }}{% endblock %}

{% block content %}
<form method="post" action="/items/{{ item.id }}/bom/import"
      enctype="multipart/form-data" class="card max-w-3xl">
  <div class="card-header"><div>
    <h2>CSV / Excel hochladen</h2>
    <p class="sub">
      Aus Solidworks / Inventor / Fusion exportierte Stücklisten als CSV oder XLSX.
      Wenn keine aktive BOM existiert wird sie automatisch angelegt.
    </p>
  </div></div>
  <div class="p-5 space-y-4">
    <div class="rounded-md p-4" style="background:rgba(53,102,146,0.08);border-left:3px solid #356692;">
      <p class="text-sm font-semibold mb-2" style="color: var(--brand-blue-light);">Erwartetes Format</p>
      <p class="text-xs mb-2" style="color: var(--card-text-muted);">
        Erste Zeile = Spaltennamen. Folgende Spaltennamen werden erkannt
        (deutsche und englische Varianten gehen):
      </p>
      <table style="font-size:11px;border-collapse:collapse;">
        <tr>
          <td style="padding:4px 12px 4px 0;color:var(--brand-blue-light);font-weight:700;">Material-Code</td>
          <td style="color:var(--card-text-muted);">code · werkstoff-code · werkstoff · material</td>
        </tr>
        <tr>
          <td style="padding:4px 12px 4px 0;color:var(--brand-blue-light);font-weight:700;">Material-Name</td>
          <td style="color:var(--card-text-muted);">name · material-name · bezeichnung · werkstoff-name</td>
        </tr>
        <tr>
          <td style="padding:4px 12px 4px 0;color:var(--brand-blue-light);font-weight:700;">qty</td>
          <td style="color:var(--card-text-muted);">menge · kg · weight · gewicht · kg pro stück</td>
        </tr>
      </table>
      <p class="text-[10px] mt-2" style="color: var(--card-text-muted);">
        Unbekannte Materialien werden automatisch in der Materialliste angelegt.
      </p>
    </div>

    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Datei *</label>
      <input class="input mt-1 w-full" type="file" name="file" accept=".csv,.xlsx,.xls,.txt" required>
    </div>
  </div>
  <div class="px-5 py-4 border-t flex justify-between items-center" style="border-color: var(--card-border-2);">
    <a class="btn btn-secondary" href="/items/{{ item.id }}/bom">Abbrechen</a>
    <button class="btn btn-primary" type="submit">Import starten</button>
  </div>
</form>
{% endblock %}