{% extends "base.html" %}

{% block title %}{{ inq.inquiry_no or 'Anfrage' }}{% endblock %}
{% block body_data %}data-page-type="inquiry" data-page-id="{{ inq.id }}" data-page-label="{{ inq.inquiry_no or '#'~inq.id }}" data-page-sub="{{ (inq.subject or '')[:40] }}"{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/inquiries" class="hover:underline">Anfragen</a> / {{ inq.inquiry_no or inq.id }}</p>{% endblock %}
{% block heading %}{{ inq.inquiry_no }} <span class="text-neutral-400 font-normal text-base ml-2">· {{ inq.subject }}</span>{% endblock %}

{% block topbar_actions %}
  <span class="badge badge-{{ STATUS_COLOR.get(inq.status, 'neutral') }}" style="font-size:0.75rem; padding:0.25rem 0.625rem;">{{ STATUS_LABELS.get(inq.status, inq.status) }}</span>
  {% if not inq.created_quote_id %}
    <a class="btn btn-sm btn-primary" href="/quotes/new?inquiry_id={{ inq.id }}">→ Angebot erstellen</a>
  {% else %}
    <a class="btn btn-sm btn-secondary" href="/quotes/{{ inq.created_quote_id }}">Angebot {{ inq.quote_no or '#'~inq.created_quote_id }} öffnen</a>
  {% endif %}
  <form method="post" action="/inquiries/{{ inq.id }}/duplicate" class="inline" style="display:inline;">
    <button class="btn btn-sm btn-secondary" type="submit" title="Anfrage als Vorlage duplizieren">Duplizieren</button>
  </form>
{% endblock %}

{% block content %}
{% include "_workflow_stepper.html" %}
<div class="grid grid-cols-3 gap-4">

  <div class="col-span-2 space-y-4">
    <div class="card">
      <div class="card-header"><div><h2>Inhalt</h2></div></div>
      <div class="p-5 text-sm">
        <p class="font-medium mb-3" style="color:#fafafa;">{{ inq.subject }}</p>
        {% if inq.body %}
          <pre class="whitespace-pre-wrap font-sans text-sm"
               style="font-family: inherit; color:#e5e7eb; line-height:1.55;
                      background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
                      border-radius:8px; padding:14px 16px; margin:0;">{{ inq.body }}</pre>
        {% else %}
          <p style="color:rgba(255,255,255,0.55);">— kein Anfrage-Text hinterlegt —</p>
        {% endif %}
      </div>
    </div>

    {# ---------- Strukturierte Anfrage-Positionen ---------- #}
    {% if items %}
    <div class="card">
      <div class="card-header"><div>
        <h2>Artikel-Anfrage</h2>
        <p class="sub">Strukturiert aus Webformular / E-Mail-Import</p>
      </div></div>
      <table class="data-table">
        <thead>
          <tr>
            <th style="width:40px">#</th>
            <th>Beschreibung</th>
            <th>Artikel-Nr</th>
            <th class="num">Menge</th>
            <th>Einh.</th>
            <th>Notiz</th>
          </tr>
        </thead>
        <tbody>
          {% for it in items %}
          <tr>
            <td class="nums text-neutral-500">{{ loop.index }}</td>
            <td class="text-sm">{{ it.description or '—' }}</td>
            <td class="text-xs nums">{{ it.item_code or '—' }}</td>
            <td class="num nums font-semibold">{{ it.qty or '—' }}</td>
            <td class="text-xs">{{ it.unit or 'Stk' }}</td>
            <td class="text-xs text-neutral-600">{{ it.notes or '—' }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}

    {# ---------- Prozess-Planung ---------- #}
    <div class="card" id="plan">
      <div class="card-header"><div>
        <h2>Prozess-Planung</h2>
        <p class="sub">Vor dem Angebot kalkulieren — Preis-Vorschlag wird automatisch berechnet</p>
      </div></div>
      <form method="post" action="/inquiries/{{ inq.id }}/plan" class="p-5 grid grid-cols-3 gap-x-6 gap-y-4 text-sm">
        <input type="hidden" name="csrf_token" value="{{ request.cookies.get('csrf_token','') }}">
        <input type="hidden" name="goto" value="">

        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Stückzahl</label>
          <input class="input mt-1 w-full nums" type="number" min="1" step="1" name="qty"
                 value="{{ plan.qty or 1 }}" required>
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Minuten pro Teil (Pauschal)</label>
          <input class="input mt-1 w-full nums" type="text" name="minutes_per_unit"
                 value="{{ plan.minutes_per_unit or ((plan.hours_per_unit or 0) * 60) or '0' }}" placeholder="z.B. 4,5">
          <p class="text-[10px] text-neutral-500 mt-1">wird ignoriert wenn Schritt-Detail unten gefüllt ist</p>
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Rüstzeit (Min, einmalig)</label>
          <input class="input mt-1 w-full nums" type="text" name="minutes_setup"
                 value="{{ plan.minutes_setup or ((plan.hours_setup or 0) * 60) or '0' }}" placeholder="z.B. 30">
        </div>

        {# v1.7+: Material aus DB-Auswahl + Gewicht/Teil → €/Stk auto #}
        <div class="col-span-3">
          <div class="grid grid-cols-3 gap-x-6 gap-y-2">
            <div class="col-span-2">
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">
                Material
                {% if suggested_material_id %}
                  <span style="color:#fcd34d;font-size:9px;font-weight:600;">🤖 aus Anfrage erkannt</span>
                {% endif %}
              </label>
              <select name="material_id" id="material-id" class="select mt-1 w-full"
                      data-suggested="{{ suggested_material_id or '' }}">
                <option value="">— Material wählen oder pauschal €/Stk eintragen —</option>
                {% for m in materials %}
                <option value="{{ m.id }}"
                        data-price="{{ m.price_per_kg or 0 }}"
                        data-density="{{ m.density or 0 }}"
                        {% if (plan.material_id == m.id) or (not plan.material_id and m.id == suggested_material_id) %}selected{% endif %}>
                  {{ m.name }} — {{ "%.2f"|format(m.price_per_kg or 0)|replace('.', ',') }} €/kg{% if m.density %} (ρ {{ m.density }} g/cm³){% endif %}
                </option>
                {% endfor %}
              </select>
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Gewicht/Teil (kg)</label>
              <input class="input mt-1 w-full nums" type="text" name="weight_per_unit_kg"
                     id="weight-input"
                     value="{{ plan.weight_per_unit_kg or '' }}" placeholder="z.B. 0,85">
              <p class="text-[10px] text-neutral-500 mt-1" id="material-cost-hint">—</p>
            </div>
          </div>
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Material pauschal/Stück (€) Fallback</label>
          <input class="input mt-1 w-full nums" type="text" name="material_per_unit"
                 value="{{ plan.material_per_unit or '0' }}" placeholder="0">
          <p class="text-[10px] text-neutral-500 mt-1">nur wenn KEIN Material oben gewählt</p>
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Werkzeug/Sonderkosten (€, einmalig)</label>
          <input class="input mt-1 w-full nums" type="text" name="material_setup"
                 value="{{ plan.material_setup or '0' }}" placeholder="120">
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Aufschlag %</label>
          <input class="input mt-1 w-full nums" type="text" name="markup_pct"
                 value="{{ plan.markup_pct or '30' }}" placeholder="30">
        </div>

        <div class="col-span-3">
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">
            Prozess-Schritte mit Maschine + Zeit + Preis pro Teil
          </label>
          <p class="text-[10px] text-neutral-500 mt-1 mb-2">
            Häkchen setzen → Zeile erscheint. Pro Schritt: Maschine wählen
            (übernimmt deren Stundensatz) ODER festen €/Teil-Preis eintragen.
          </p>
          <table class="data-table mt-2" style="width:100%;font-size:12px;">
            <thead>
              <tr>
                <th style="width:24px;"></th>
                <th>Schritt</th>
                <th style="width:200px;">Maschine</th>
                <th class="text-right" style="width:90px;">Min/Teil</th>
                <th class="text-right" style="width:100px;">€/Teil (fix)</th>
              </tr>
            </thead>
            <tbody>
              {% for st in process_steps %}
              {% set sp_active = plan.steps and st.code in plan.steps %}
              {% set sp_data = (plan.step_pricing or []) | selectattr('code','equalto',st.code) | list | first %}
              <tr>
                <td><input type="checkbox" name="steps" value="{{ st.code }}" {% if sp_active %}checked{% endif %}></td>
                <td>
                  <span class="dot" style="background:{{ st.color }}; width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px;"></span>
                  {{ st.name }}
                </td>
                <td>
                  <select class="select" style="width:100%;font-size:12px;" name="step_machine__{{ st.code }}">
                    <option value="">— wählen (oder default-Satz) —</option>
                    {% for m in machines %}
                    <option value="{{ m.id }}" {% if sp_data and sp_data.machine_id == m.id %}selected{% endif %}>
                      {{ m.name }}{% if m.hourly_rate %} ({{ m.hourly_rate|round(0)|int }} €/h){% endif %}
                    </option>
                    {% endfor %}
                  </select>
                </td>
                <td>
                  <input class="input nums" style="width:100%;font-size:12px;text-align:right;" type="text"
                         name="step_min__{{ st.code }}"
                         value="{{ sp_data.minutes_per_unit if sp_data and sp_data.minutes_per_unit else '' }}"
                         placeholder="0">
                </td>
                <td>
                  <input class="input nums" style="width:100%;font-size:12px;text-align:right;" type="text"
                         name="step_eur__{{ st.code }}"
                         value="{{ sp_data.price_per_unit if sp_data and sp_data.price_per_unit else '' }}"
                         placeholder="(leer = aus Min×Satz)">
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          <p class="text-[10px] text-neutral-500 mt-2">
            Schritt fehlt? <a href="#" onclick="document.getElementById('add-step-form').style.display='flex'; this.style.display='none'; event.preventDefault();" class="hover:underline" style="color:#fcd34d; font-weight:600;">+ Eigenen Schritt anlegen</a>
          </p>
        </div>

        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Hauptmaschine</label>
          <select name="machine_id" class="select mt-1 w-full">
            <option value="">— keine —</option>
            {% for m in machines %}
            <option value="{{ m.id }}" {% if plan.machine_id == m.id %}selected{% endif %}>{{ m.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Mitarbeiter zuweisen</label>
          <select name="assigned_user_id" class="select mt-1 w-full">
            <option value="">— niemand —</option>
            {% for u in users %}
            <option value="{{ u.id }}" {% if plan.assigned_user_id == u.id %}selected{% endif %}>{{ u.first_name }} {{ u.last_name }}{% if u.position %} · {{ u.position }}{% endif %}</option>
            {% endfor %}
          </select>
          <p class="text-[10px] text-neutral-500 mt-1">Erscheint dann morgens in seiner „Meine Aufgaben"</p>
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Lieferzeit (T)</label>
          <input class="input mt-1 w-full nums" type="number" min="0" name="lead_time_days"
                 value="{{ plan.lead_time_days or '' }}" placeholder="14">
        </div>

        <div class="col-span-3">
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Notiz zur Planung</label>
          <textarea class="input mt-1 w-full" name="notes" rows="2"
                    placeholder="z.B. Vorrichtung muss neu konstruiert werden">{{ plan.notes or '' }}</textarea>
        </div>

        {# Live-Berechnung im Browser #}
        <div class="col-span-3 pt-3 border-t" style="border-color: var(--card-border-2);">
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-2">Kalkulation</p>
          <div id="plan-calc" class="grid grid-cols-4 gap-3 text-center"
               data-rate="{{ default_hourly_rate }}">
            <div><p class="text-[10px] text-neutral-500">Stunden gesamt</p><p class="text-lg font-semibold nums" id="pc-hours">—</p></div>
            <div><p class="text-[10px] text-neutral-500">Stunden-Kosten</p><p class="text-lg font-semibold nums" id="pc-hc">—</p></div>
            <div><p class="text-[10px] text-neutral-500">Material gesamt</p><p class="text-lg font-semibold nums" id="pc-mat">—</p></div>
            <div><p class="text-[10px] text-neutral-500">Selbstkosten</p><p class="text-lg font-semibold nums" id="pc-cost">—</p></div>
            <div></div>
            <div><p class="text-[10px] text-neutral-500">Verkaufspreis gesamt</p><p class="text-xl font-bold nums" style="color:#10b981;" id="pc-total">—</p></div>
            <div><p class="text-[10px] text-neutral-500">Pro Stück</p><p class="text-xl font-bold nums" id="pc-unit">—</p></div>
            <div></div>
          </div>
          <p class="text-[10px] text-neutral-500 mt-2">Stundensatz: {{ default_hourly_rate }} €/h (aus Settings)</p>
        </div>
      </form>

      {# ---- Inline-Form für eigenen Prozess-Schritt ---- #}
      <form id="add-step-form" method="post" action="/process-steps/new"
            class="px-5 py-3 border-t" style="border-color: var(--card-border-2); display:none; gap:8px; align-items:end; background: rgba(232,93,47,0.04);">
        <input type="hidden" name="from_inquiry" value="{{ inq.id }}">
        <div style="flex:1;">
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Neuer Schritt-Name</label>
          <input class="input mt-1 w-full" type="text" name="name" required placeholder="z.B. Lackieren · Eloxieren · Gravieren">
        </div>
        <div style="width:120px;">
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Farbe</label>
          <input class="input mt-1 w-full" type="color" name="color" value="#737373" style="height:36px; padding:2px;">
        </div>
        <button class="btn btn-primary" type="submit">Anlegen</button>
        <button class="btn btn-secondary" type="button" onclick="this.parentElement.style.display='none';">Abbrechen</button>
      </form>

      <div class="px-5 py-3 border-t flex items-center justify-between" style="border-color: var(--card-border-2);">
        <p class="text-[11px] text-neutral-500">
          {% if pricing %}Letzte Kalkulation: <b>{{ "%.2f"|format(pricing.suggested_unit_price)|replace(".", ",") }} €/Stk</b>, gesamt <b>{{ "%.2f"|format(pricing.total_price)|replace(".", ",") }} €</b>{% else %}Noch nicht geplant{% endif %}
        </p>
        <div class="flex gap-2">
          <button class="btn btn-sm btn-secondary" type="button"
                  onclick="(function(f){
                    var g=f.querySelector('input[name=goto]'); if(g) g.value='';
                    f.submit();
                  })(document.querySelector('form[action=\'/inquiries/{{ inq.id }}/plan\']'));">
            Plan speichern
          </button>
          <button class="btn btn-sm btn-primary" type="button"
                  onclick="(function(f){
                    var g=f.querySelector('input[name=goto]'); if(g) g.value='quote';
                    f.submit();
                  })(document.querySelector('form[action=\'/inquiries/{{ inq.id }}/plan\']'));">
            💾 Plan speichern + Angebot →
          </button>
        </div>
      </div>
    </div>

    <script>
    (function () {
      const wrap = document.getElementById('plan-calc');
      if (!wrap) return;
      const rate = parseFloat(wrap.dataset.rate || '85');
      const form = wrap.closest('form');
      function f(n) {
        const el = form.elements[n];
        return el ? (parseFloat((el.value || '0').replace(',', '.')) || 0) : 0;
      }
      function machineRateForStep(code) {
        // Stundensatz aus Maschinen-Dropdown Option-Text "(85 €/h)"
        const sel = form.elements['step_machine__' + code];
        if (!sel || !sel.selectedOptions[0]) return rate;
        const m = sel.selectedOptions[0].textContent.match(/\((\d+) €\/h\)/);
        return m ? parseFloat(m[1]) : rate;
      }

      function refreshStepAutoPrice(code) {
        const minEl = form.elements['step_min__' + code];
        const eurEl = form.elements['step_eur__' + code];
        if (!minEl || !eurEl) return;
        const stepMin = parseFloat((minEl.value || '0').replace(',', '.')) || 0;
        const stepRate = machineRateForStep(code);
        const autoEur = (stepMin / 60) * stepRate;
        eurEl.placeholder = stepMin > 0
          ? `auto ${autoEur.toFixed(2).replace('.', ',')} €`
          : '(leer = aus Min×Satz)';
        const hintCell = eurEl.closest('td');
        if (hintCell) {
          let hint = hintCell.querySelector('.auto-price-hint');
          if (!hint) {
            hint = document.createElement('div');
            hint.className = 'auto-price-hint';
            // helleres Amber/Orange — gut lesbar im dunklen Brand-Modus
            hint.style.cssText = 'font-size:10px;color:#fcd34d;margin-top:3px;text-align:right;font-weight:500;';
            hintCell.appendChild(hint);
          }
          if (stepMin > 0 && !eurEl.value) {
            hint.style.color = '#fcd34d';
            hint.textContent = `🤖 ${autoEur.toFixed(2).replace('.', ',')} €/Stk (= ${stepMin} min × ${stepRate} €/h)`;
          } else if (eurEl.value) {
            hint.style.color = '#fb923c';
            hint.textContent = `Override aktiv (${eurEl.value} € statt ${autoEur.toFixed(2).replace('.', ',')} €)`;
          } else {
            hint.textContent = '';
          }
        }
      }

      function materialUnitEur() {
        // Material €/Stk = Material-Preis €/kg × Gewicht kg, sonst pauschal
        const matSel = form.elements['material_id'];
        const weight = f('weight_per_unit_kg');
        if (matSel && matSel.selectedOptions[0] && matSel.value) {
          const pricePerKg = parseFloat(matSel.selectedOptions[0].dataset.price || '0') || 0;
          const eur = pricePerKg * weight;
          // Hint anzeigen
          const hint = document.getElementById('material-cost-hint');
          if (hint) {
            if (weight > 0) {
              hint.innerHTML = '🤖 <strong>' + eur.toFixed(2).replace('.', ',') + ' €/Stk</strong> (= ' + weight + ' kg × ' + pricePerKg.toFixed(2).replace('.', ',') + ' €/kg)';
              hint.style.color = '#fcd34d';
              hint.style.fontWeight = '500';
            } else {
              hint.textContent = 'Gewicht/Teil eingeben für Auto-Berechnung';
              hint.style.color = '#cbd5e1';
            }
          }
          return eur;
        }
        const hint = document.getElementById('material-cost-hint');
        if (hint) { hint.textContent = '— kein Material gewählt → Fallback pauschal'; hint.style.color = '#cbd5e1'; }
        return f('material_per_unit');
      }

      function recalc() {
        const qty = Math.max(1, f('qty') || 1);
        const minSetup = f('minutes_setup');
        const muMaterial = materialUnitEur(), msMaterial = f('material_setup');
        const markup = f('markup_pct');

        // Step-Detail summieren wenn Schritte ausgewählt sind
        let stepUnitEur = 0, stepMinTotal = 0, anyStep = false;
        form.querySelectorAll('input[name="steps"]:checked').forEach(cb => {
          const code = cb.value;
          anyStep = true;
          const stepMin = f('step_min__' + code);
          const stepEur = f('step_eur__' + code);
          refreshStepAutoPrice(code);   // Live-Anzeige des Auto-Preises
          if (stepEur > 0) {
            stepUnitEur += stepEur;
          } else {
            const stepRate = machineRateForStep(code);
            stepUnitEur += (stepMin / 60) * stepRate;
            stepMinTotal += stepMin;
          }
        });

        let unitLabor, totalMin;
        if (anyStep) {
          unitLabor = stepUnitEur;
          totalMin = qty * stepMinTotal + minSetup;
        } else {
          // Fallback: Pauschal-Minuten
          const minPerUnit = f('minutes_per_unit');
          unitLabor = (minPerUnit / 60) * rate;
          totalMin = qty * minPerUnit + minSetup;
        }
        const setupLaborEur = (minSetup / 60) * rate;
        const laborTotal = qty * unitLabor + setupLaborEur;
        const matTotal = qty * muMaterial + msMaterial;
        const cost = laborTotal + matTotal;
        const total = cost * (1 + markup / 100);
        const unit = qty > 0 ? total / qty : 0;
        const fmt = v => v.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';
        const hoursLabel = (totalMin / 60).toFixed(2).replace('.', ',') + ' h ('+totalMin.toFixed(0)+' min)';
        const setEl = (id, v) => { const el = document.getElementById(id); if (el) el.textContent = v; };
        setEl('pc-hours', hoursLabel);
        setEl('pc-hc',    fmt(laborTotal));
        setEl('pc-mat',   fmt(matTotal));
        setEl('pc-cost',  fmt(cost));
        setEl('pc-total', fmt(total));
        setEl('pc-unit',  fmt(unit));
      }
      form.addEventListener('input', recalc);
      recalc();
    })();
    </script>

    {# ---------- Zeichnungen / Anhänge ---------- #}
    <div class="card" id="drawings">
      <div class="card-header"><div>
        <h2>Zeichnungen &amp; Anhänge</h2>
        <p class="sub">Bilder/PDFs vom Kunden — z.B. per E-Mail erhalten</p>
      </div></div>
      <div class="p-5 space-y-3 text-sm">
        {% if drawings %}
        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
          {% for a in drawings %}
          {% set ext = a.filename.split('.')[-1]|lower %}
          {# v1.5.0: 3D-Files öffnen den Vollbild-Viewer; alle anderen die Original-Datei #}
          {% set click_href = '/3d-viewer?src=' ~ (a.web_path|urlencode) if ext in ['stl','obj','3mf','step','stp','iges','igs'] else a.web_path %}
          <a href="{{ click_href }}" target="_blank" class="border rounded-lg overflow-hidden hover:shadow-md transition" style="border-color: var(--card-border-2); background: var(--card-bg);">
            <div class="aspect-square flex items-center justify-center bg-white p-2 border-b" style="border-color: var(--card-border-2);">
              {% if ext in ['jpg','jpeg','png','gif','webp','svg'] %}
                <img src="{{ a.web_path }}" alt="" style="max-width:100%; max-height:100%; object-fit:contain;">
              {% elif ext in ['dxf','dwg'] %}
                {# v1.4.0: CAD-Vorschau via /api/dxf-preview/<id>.svg (server-side gerendert + gecached) #}
                <img src="/api/dxf-preview/{{ a.id }}.svg" alt="DXF-Vorschau"
                     style="max-width:100%; max-height:100%; object-fit:contain;"
                     loading="lazy">
              {% elif ext in ['stl','obj','3mf','step','stp','iges','igs'] %}
                {# v1.5.0: Inline-3D-Viewer via static/inline-3d-preview.js (lazy-load three.js)
                   v1.6.0: STEP/IGES jetzt auch unterstützt (Klick-zum-Laden, OCCT-WASM lokal) #}
                <canvas class="takoma-3d-preview" width="240" height="240"
                        data-3d-src="{{ a.web_path }}" data-3d-ext="{{ ext }}"
                        style="max-width:100%; max-height:100%; cursor:zoom-in;"
                        title="Klick: Vollbild-3D-Viewer öffnen"></canvas>
              {% elif ext == 'pdf' %}
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="48" height="48" stroke-width="1.5" style="color:#ef4444;">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                  <path d="M14 2v6h6"/>
                </svg>
              {% else %}
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="48" height="48" stroke-width="1.5" style="color:#94a3b8;">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                  <path d="M14 2v6h6"/>
                </svg>
              {% endif %}
            </div>
            <div class="px-2 py-1.5 text-[11px]">
              <div class="truncate" title="{{ a.filename }}">{{ a.filename }}</div>
              <div class="text-neutral-500 nums">{{ (a.size_bytes/1024)|round(0)|int }} KB · {{ a.created_at[:10] }}</div>
            </div>
          </a>
          {% endfor %}
        </div>
        {% else %}
        <p class="text-[11px] text-neutral-500">Keine Anhänge.</p>
        {% endif %}
        <form method="post" action="/inquiries/{{ inq.id }}/drawings" enctype="multipart/form-data"
              class="flex items-center gap-2 pt-2 border-t" style="border-color: var(--card-border-2);">
          <input type="file" name="file" accept=".pdf,.png,.jpg,.jpeg,.gif,.webp,.svg,.dxf,.dwg,.stl,.obj,.3mf,.step,.stp,.iges,.igs" required class="text-xs flex-1">
          <button class="btn btn-sm btn-primary" type="submit">+ Hochladen</button>
        </form>
      </div>
    </div>
  </div>

  <div class="space-y-4">
    <div class="card">
      <div class="card-header"><div><h2>Status</h2></div></div>
      <div class="p-5 space-y-3 text-sm">
        <p><span class="badge badge-{{ STATUS_COLOR.get(inq.status, 'neutral') }}">{{ STATUS_LABELS.get(inq.status, inq.status) }}</span></p>
        <form method="post" action="/inquiries/{{ inq.id }}/status" class="flex items-center gap-2">
          <select name="status" class="select flex-1" style="font-size:0.75rem;">
            {% for code, label in STATUS_LABELS.items() %}
              <option value="{{ code }}" {% if code == inq.status %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
          <button class="btn btn-sm btn-primary" type="submit">Setzen</button>
        </form>
      </div>
    </div>

    <div class="card">
      <div class="card-header"><div><h2>Absender</h2></div></div>
      <div class="p-5 text-sm space-y-1">
        {% if inq.customer_name %}
          <p class="font-medium">{{ inq.customer_name }}</p>
          {% if inq.customer_email %}<p class="text-xs text-neutral-600">{{ inq.customer_email }}</p>{% endif %}
          {% if inq.customer_phone %}<p class="text-xs text-neutral-600 nums">{{ inq.customer_phone }}</p>{% endif %}
          {% if inq.customer_country_iso %}<p class="text-xs text-neutral-500 nums">{{ inq.customer_country_iso }}</p>{% endif %}
        {% else %}
          <p class="font-medium">{{ inq.customer_name_text or '— unbekannt —' }}</p>
          {% if inq.customer_email_text %}<p class="text-xs text-neutral-600">{{ inq.customer_email_text }}</p>{% endif %}
          {% if inq.customer_phone_text %}<p class="text-xs text-neutral-600 nums">{{ inq.customer_phone_text }}</p>{% endif %}
          <p class="text-xs text-neutral-500">Externer Absender — kein Kundendatensatz</p>
        {% endif %}
      </div>
    </div>

    <div class="card">
      <div class="card-header"><div><h2>Metadaten</h2></div></div>
      <div class="p-5 text-xs space-y-1 text-neutral-600">
        <p>Eingang: <span class="nums">{{ inq.created_at[:16] }}</span></p>
        <p>Quelle: {{ SOURCE_LABELS.get(inq.source, inq.source) }}</p>
        {% if inq.assigned_first %}
          <p>Bearbeiter: {{ inq.assigned_first }} {{ inq.assigned_last }}</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{# v1.12.2: Drag&Drop für Kunden-Zeichnungen #}
{% with attach_entity_type='inquiry', attach_entity_id=inq.id, attach_title='Kunden-Zeichnungen & Anhänge' %}
  {% include '_attachments_dropzone.html' %}
{% endwith %}
{% endblock %}