{% extends "base.html" %}

{% block title %}Fach {{ loc.code }} · {{ loc.zone_name }}{% endblock %}
{% block breadcrumb %}
<p class="text-xs text-neutral-500">
  <a href="/werkstatt/lager/schraenke" class="hover:underline">Schränke</a> /
  <a href="/werkstatt/lager/schraenke/{{ loc.zone_id }}" class="hover:underline">{{ loc.zone_name }}</a> /
  {{ loc.group_name or '—' }} / <strong>{{ loc.code }}</strong>
</p>
{% endblock %}
{% block heading %}Fach {{ loc.code }}{% endblock %}

{% block content %}
<style>
  .panel { background:var(--card-bg); border:1px solid rgba(255,255,255,0.10); border-radius:10px; padding:18px; margin-bottom:14px; }
  .panel h3 { font-size:14px; color:var(--brand-orange); margin:0 0 12px 0; text-transform:uppercase; letter-spacing:0.04em; }
  .field-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
  @media (max-width:700px) { .field-grid { grid-template-columns:1fr; } }
  .field { display:flex; flex-direction:column; gap:5px; }
  .field label { font-size:11px; font-weight:600; color:rgba(255,255,255,0.75); text-transform:uppercase; letter-spacing:0.04em; }
  .item-row { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border:1px solid rgba(255,255,255,0.08); border-radius:6px; margin-bottom:6px; }
  .item-info { display:flex; flex-direction:column; gap:2px; }
  .item-ident { font-family:ui-monospace,monospace; font-size:12px; font-weight:600; color:var(--brand-orange); }
  .item-desc { font-size:12px; color:rgba(255,255,255,0.85); }
  .qty-badge { background:var(--brand-blue); color:#fff; padding:2px 10px; border-radius:12px; font-size:11px; font-weight:600; }
  .assign-form { display:grid; grid-template-columns:2fr 1fr auto; gap:10px; align-items:end; }
  @media (max-width:700px) { .assign-form { grid-template-columns:1fr; } }
</style>

<div class="panel">
  <h3>Fach-Eigenschaften</h3>
  <form method="post" action="/werkstatt/lager/location/{{ loc.id }}/update">
    <input type="hidden" name="csrf_token" value="{{ request.cookies.get('csrf_token','') }}">
    <div class="field-grid">
      <div class="field">
        <label>Code *</label>
        <input type="text" name="code" value="{{ loc.code }}" required maxlength="32">
      </div>
      <div class="field">
        <label>Größe (Beschreibung, optional)</label>
        <input type="text" name="size" value="{{ loc.size or '' }}" placeholder="z.B. 5×5 cm, klein, mittel">
      </div>
      <div class="field">
        <label>Kapazität (optional)</label>
        <input type="number" name="capacity" value="{{ loc.capacity or '' }}" min="0" max="9999" placeholder="z.B. 50">
      </div>
    </div>
    <div style="display:flex;justify-content:space-between;align-items:center;margin-top:14px;">
      <form method="post" action="/werkstatt/lager/location/{{ loc.id }}/delete" style="display:inline;" onsubmit="return confirm('Fach „{{ loc.code }}\' wirklich löschen? Items werden unzugewiesen.')">
        <input type="hidden" name="csrf_token" value="{{ request.cookies.get('csrf_token','') }}">
        <button type="submit" class="btn btn-sm" style="background:rgba(220,38,38,0.18);color:#fca5a5;border:1px solid rgba(220,38,38,0.30);">Fach löschen</button>
      </form>
      <button type="submit" class="btn btn-primary">Änderungen speichern</button>
    </div>
  </form>
</div>

<div class="panel">
  <h3>Zugewiesene Werkzeuge ({{ loc['items']|length }})</h3>
  {% if loc['items'] %}
    {% for it in loc['items'] %}
    <div class="item-row">
      <div class="item-info">
        <div class="item-ident">{{ it.ident }}</div>
        <div class="item-desc">{{ it.description or '—' }}</div>
      </div>
      <div style="display:flex;align-items:center;gap:10px;">
        <span class="qty-badge">{{ it.quantity }} Stk</span>
        <form method="post" action="/werkstatt/lager/location/{{ loc.id }}/unassign/{{ it.item_id }}" style="display:inline;" onsubmit="return confirm('Werkzeug aus diesem Fach entfernen?')">
          <input type="hidden" name="csrf_token" value="{{ request.cookies.get('csrf_token','') }}">
          <button type="submit" class="btn btn-sm btn-secondary">Entfernen</button>
        </form>
      </div>
    </div>
    {% endfor %}
  {% else %}
    <p style="color:rgba(255,255,255,0.55);font-style:italic;font-size:13px;margin:0 0 14px 0;">Noch kein Werkzeug zugewiesen.</p>
  {% endif %}

  <hr style="border:0;border-top:1px solid rgba(255,255,255,0.08);margin:14px 0;">

  <h3 style="margin-top:0;">Werkzeug zuweisen</h3>
  <form method="post" action="/werkstatt/lager/location/{{ loc.id }}/assign">
    <input type="hidden" name="csrf_token" value="{{ request.cookies.get('csrf_token','') }}">
    <div class="assign-form">
      <div class="field">
        <label>Werkzeug auswählen</label>
        <select name="item_id" required>
          <option value="">— wählen —</option>
          {% for i in items %}
          <option value="{{ i.id }}">{{ i.ident }} — {{ (i.description or '')[:60] }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label>Menge</label>
        <input type="number" name="quantity" value="1" min="0" max="99999" required>
      </div>
      <button type="submit" class="btn btn-primary">+ Zuweisen</button>
    </div>
  </form>
</div>

<div style="text-align:center;margin-top:18px;">
  <a href="/werkstatt/lager/schraenke/{{ loc.zone_id }}" class="btn btn-secondary">← Zurück zum Schrank</a>
</div>
{% endblock %}