{% macro app_pill(source_app) -%}
  {% if source_app == 'tools' %}
    <span class="app-pill app-pill-tp" title="Werkzeug-Modul">WK</span>
  {% elif source_app == 'management' %}
    <span class="app-pill app-pill-mg" title="Lager-Modul">LG</span>
  {% else %}
    <span class="app-pill badge-neutral">{{ source_app }}</span>
  {% endif %}
{%- endmacro %}

{% macro item_type_badge(t) -%}
  {%- set cls = {
    'tool': 'badge-blue', 'measuring_equipment': 'badge-purple', 'clamping': 'badge-blue',
    'material': 'badge-emerald', 'consumable': 'badge-amber', 'packaging': 'badge-neutral',
    'other': 'badge-neutral'
  } -%}
  <span class="badge {{ cls.get(t, 'badge-neutral') }}">{{ item_type_label(t) }}</span>
{%- endmacro %}

{% macro action_badge(code, name) -%}
  {%- set cls = {
    'rent': 'badge-blue', 'return': 'badge-emerald',
    'order': 'badge-amber', 'receive': 'badge-emerald',
    'stock_in': 'badge-emerald', 'stock_out': 'badge-amber',
    'rebook': 'badge-neutral', 'inventory': 'badge-neutral',
    'scrap': 'badge-red',
  } -%}
  <span class="badge {{ cls.get(code, 'badge-neutral') }}">{{ name or code }}</span>
{%- endmacro %}

{% macro order_status_badge(s) -%}
  {%- set cls = {'open': 'badge-amber', 'received': 'badge-emerald', 'closed': 'badge-neutral', 'cancelled': 'badge-red'} -%}
  <span class="badge {{ cls.get(s, 'badge-neutral') }}">{{ order_status_label(s) }}</span>
{%- endmacro %}

{% macro avatar(first_name, last_name, photo=None) -%}
  {%- set initials = (first_name[0] if first_name else '?') ~ (last_name[0] if last_name else '') -%}
  {%- if photo -%}
    <span class="avatar avatar-img"><img src="{{ photo }}" alt="{{ first_name }} {{ last_name }}"></span>
  {%- else -%}
    <span class="avatar">{{ initials }}</span>
  {%- endif -%}
{%- endmacro %}

{% macro money(value) -%}
  {%- if value is none -%}—{%- else -%}
    {{ "{:,.2f}".format(value).replace(",", "X").replace(".", ",").replace("X", ".") }} €
  {%- endif -%}
{%- endmacro %}

{# v1.8.0: PDF-Sprach-Picker (DE/EN/FR) für Beleg-Detailseiten.
   entity = "quotes"|"sales-orders"|"invoices"|"delivery-notes"
   eid    = numerische ID
   current_lang = aktuell auf dem Beleg gespeicherte Sprache (default 'de')
#}
{% macro pdf_lang_picker(entity, eid, current_lang="de") -%}
  {%- set cl = (current_lang or 'de')[:2] -%}
  <div style="display:inline-flex; align-items:center; gap:6px; margin-right:6px;"
       title="Sprache des PDF-Belegs">
    <span style="font-size:10px; color:#737373; text-transform:uppercase;
                 letter-spacing:0.05em; font-weight:600;">PDF-Sprache</span>
    <select onchange="window.takomaSetDocLang('{{ entity }}', {{ eid }}, this.value)"
            class="select"
            style="font-size:12px; padding:3px 6px; min-width:64px;
                   border:1px solid #e5e5e5; border-radius:6px;">
      <option value="de" {% if cl=='de' %}selected{% endif %}>🇩🇪 DE</option>
      <option value="en" {% if cl=='en' %}selected{% endif %}>🇬🇧 EN</option>
      <option value="fr" {% if cl=='fr' %}selected{% endif %}>🇫🇷 FR</option>
    </select>
  </div>
  <script>
    if (!window.takomaSetDocLang) {
      window.takomaSetDocLang = function(entity, eid, lang) {
        fetch('/api/' + entity + '/' + eid + '/lang', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({lang: lang}),
        }).then(function(r){
          if (r.ok && window.toast) {
            var labels = {de: 'Deutsch', en: 'English', fr: 'Français'};
            window.toast('PDF-Sprache: ' + (labels[lang] || lang), 'success');
          }
        });
      };
    }
  </script>
{%- endmacro %}

{# ========== Form helpers ========== #}
{% macro field(label, name, value="", type="text", required=false, hint=None, placeholder=None, attrs="") -%}
<div>
  <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">{{ label }}{% if required %} *{% endif %}</label>
  <input class="input mt-1 w-full" type="{{ type }}" name="{{ name }}"
         value="{{ value if value is not none else '' }}"
         {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
         {% if required %}required{% endif %}
         {{ attrs|safe }}>
  {% if hint %}<p class="text-[11px] text-neutral-500 mt-1">{{ hint }}</p>{% endif %}
</div>
{%- endmacro %}

{% macro select_field(label, name, options, current="", required=false, allow_empty=true, empty_label="—") -%}
<div>
  <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">{{ label }}{% if required %} *{% endif %}</label>
  <select class="select mt-1 w-full" name="{{ name }}" {% if required %}required{% endif %}>
    {% if allow_empty %}<option value="">{{ empty_label }}</option>{% endif %}
    {% for value, label in options %}
      <option value="{{ value }}" {% if current|string == value|string %}selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
</div>
{%- endmacro %}

{% macro checkbox(label, name, checked=false) -%}
<label class="flex items-center gap-2 text-sm">
  <input type="checkbox" name="{{ name }}" value="1" {% if checked %}checked{% endif %}>
  {{ label }}
</label>
{%- endmacro %}

{# Attachments card: lists existing files + upload form. action_url is the POST endpoint. #}
{% macro attachments_card(attachments, action_url, title="Anhänge", subtitle=None, accept="image/*,.pdf,.svg") -%}
<div class="card">
  <div class="card-header"><div>
    <h2>{{ title }}</h2>
    <p class="sub">{{ subtitle or "Bilder, Zeichnungen, PDF-Skizzen — max. 8 MB pro Datei" }}</p>
  </div></div>
  {% if attachments %}
  <div class="p-5 grid grid-cols-1 md:grid-cols-3 gap-3">
    {% for a in attachments %}
    <div class="border rounded-md overflow-hidden" style="border-color:#d4d4d4;">
      {% set is_img = a.content_type and a.content_type.startswith('image/') %}
      {% if is_img %}
        <a href="{{ a.web_path }}" target="_blank">
          <img src="{{ a.web_path }}" alt="{{ a.filename }}" style="width:100%;height:160px;object-fit:cover;display:block;">
        </a>
      {% else %}
        <a href="{{ a.web_path }}" target="_blank" class="flex items-center justify-center" style="height:160px;background:#f5f5f5;">
          <div class="text-center">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" style="width:40px;height:40px;stroke-width:1.5;color:#737373;margin:0 auto;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
            <p class="text-[10px] text-neutral-500 mt-1 nums">{{ a.filename.split('.')[-1].upper() }}</p>
          </div>
        </a>
      {% endif %}
      <div class="p-2 text-xs">
        <div class="truncate font-medium" title="{{ a.filename }}">{{ a.filename }}</div>
        <div class="flex items-center justify-between mt-1 text-[11px] text-neutral-500">
          <span class="nums">{{ ((a.size_bytes or 0) / 1024) | round(0, 'common') | int }} KB</span>
          <form method="post" action="/attachments/{{ a.id }}/delete" class="inline" onsubmit="return confirm('Datei wirklich löschen?')">
            <button class="text-red-600 hover:text-red-800" type="submit" title="Löschen">✕</button>
          </form>
        </div>
        {% if a.first_name %}<div class="text-[10px] text-neutral-400 mt-0.5">— {{ a.first_name }} {{ a.last_name }}</div>{% endif %}
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="p-5 text-sm text-neutral-500">Noch keine Anhänge.</div>
  {% endif %}

  <form method="post" action="{{ action_url }}" enctype="multipart/form-data" class="p-5 border-t border-neutral-100 flex items-center gap-3">
    <input type="file" name="file" accept="{{ accept }}" required class="text-xs">
    <button class="btn btn-secondary btn-sm" type="submit">+ Hochladen</button>
    <p class="text-[11px] text-neutral-500 ml-auto">PNG · JPG · PDF · SVG bis 8 MB</p>
  </form>
</div>
{%- endmacro %}

{% macro number_field(label, name, value=0, min=None, hint=None) -%}
<div>
  <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">{{ label }}</label>
  <input class="input mt-1 w-full nums" type="number" name="{{ name }}"
         value="{{ value if value is not none else 0 }}"
         {% if min is not none %}min="{{ min }}"{% endif %}>
  {% if hint %}<p class="text-[11px] text-neutral-500 mt-1">{{ hint }}</p>{% endif %}
</div>
{%- endmacro %}


{# ============== EMPTY-STATE — onboarding-freundliche Hinweise ==============
   Verwendung:
     {% from "_macros.html" import empty_state %}
     {{ empty_state(
          icon="📥",
          title="Noch keine Anfragen",
          description="Hier landen alle Mail-Anfragen die per IMAP reinkommen, plus alles was du manuell anlegst.",
          workflow="📥 Anfrage → 💼 Angebot → 📋 Auftrag → 🏭 Werkstatt → 📦 Versand → 🧾 Rechnung",
          ctas=[
            {"label": "+ Erste Anfrage anlegen",  "href": "/inquiries/new",       "primary": True},
            {"label": "📥 IMAP konfigurieren",    "href": "/settings#imap"},
            {"label": "📚 Wie funktioniert das?", "href": "/handbuch/de/pdf",     "external": True},
          ],
        ) }}
   ========================================================================== #}
{% macro empty_state(icon='📭', title='Noch keine Daten', description='', workflow=None, ctas=None) -%}
<div class="card">
  <div class="p-12 text-center" style="min-height: 280px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
    <div style="font-size: 64px; line-height: 1; margin-bottom: 18px; opacity: 0.85;">{{ icon }}</div>
    <h3 style="font-size: 18px; font-weight: 700; color: var(--card-text); margin: 0 0 8px 0;">{{ title }}</h3>
    {% if description %}
    <p style="font-size: 13px; color: var(--card-text-muted); max-width: 580px; line-height: 1.6; margin: 0 0 14px 0;">{{ description }}</p>
    {% endif %}
    {% if workflow %}
    <p style="font-size: 12px; color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.04);
              padding: 8px 14px; border-radius: 9999px; margin: 6px 0 18px 0;
              border: 1px solid rgba(255,255,255,0.08);">{{ workflow }}</p>
    {% endif %}
    {% if ctas %}
    <div style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px;">
      {% for c in ctas %}
        <a href="{{ c.href }}"
           {% if c.external %}target="_blank"{% endif %}
           class="btn {% if c.primary %}btn-primary{% else %}btn-secondary{% endif %}">
          {{ c.label }}
        </a>
      {% endfor %}
    </div>
    {% endif %}
  </div>
</div>
{%- endmacro %}


{# v1.12.0: Inline-Sparkline-Widget
   Usage: {{ sparkline_widget("/api/sparkline/customer/" ~ customer.id, "Umsatz 12 Mo", "revenue") }}
#}
{%- macro sparkline_widget(api_url, label, value_key="revenue", suffix="€") -%}
<div class="sparkline-widget" data-api="{{ api_url }}" data-key="{{ value_key }}" data-suffix="{{ suffix }}"
     style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
            padding: 10px 14px; min-width: 200px; display: inline-block;">
  <div style="font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
              color: #6b7280; font-weight: 700;">{{ label }}</div>
  <div style="display: flex; align-items: center; gap: 10px; margin-top: 4px;">
    <svg class="spark-svg" width="120" height="32" preserveAspectRatio="none" viewBox="0 0 120 32"
         style="overflow: visible;">
      <path class="spark-path" fill="none" stroke="#2b5ce6" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
    <div>
      <div class="spark-last" style="font-size: 14px; font-weight: 700; color: #111;">—</div>
      <div class="spark-trend" style="font-size: 10px; color: #6b7280;"></div>
    </div>
  </div>
</div>
{%- endmacro %}


{# v1.12.0 — Generic-Entity-Detail-Macros
   Mini-Version statt 8-Std-Refactor aller 30 Templates.
   Neue Detail-Templates können ab v1.13 diese Macros nutzen statt von Grund
   auf neu zu schreiben.

   Usage-Beispiel:
     {{ entity_header(item.ident, item.description, icon="📦", badges=[...]) }}
     {{ entity_tabs("/items/" ~ item.id, tabs, current_tab) }}
     {{ entity_quick_actions(actions) }}
#}

{%- macro entity_header(title, subtitle="", icon="", badges=[]) -%}
<div class="entity-header" style="display: flex; align-items: flex-start;
            gap: 16px; padding: 18px 20px; background: var(--card-bg);
            border: 1px solid var(--card-border); border-radius: 12px;
            margin-bottom: 14px;">
  {% if icon %}
  <div style="font-size: 28px; line-height: 1;">{{ icon }}</div>
  {% endif %}
  <div style="flex: 1; min-width: 0;">
    <h2 style="margin: 0; font-size: 1.25em;">{{ title }}</h2>
    {% if subtitle %}
    <p style="margin: 2px 0 0; color: var(--card-text-muted); font-size: 0.9em;">
      {{ subtitle }}
    </p>
    {% endif %}
    {% if badges %}
    <div style="margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap;">
      {% for b in badges %}
      <span class="badge badge-{{ b.color or 'neutral' }}">{{ b.label }}</span>
      {% endfor %}
    </div>
    {% endif %}
  </div>
</div>
{%- endmacro %}


{%- macro entity_tabs(base_url, tabs, current_tab) -%}
{# tabs = [{"key": "stammdaten", "label": "📋 Stammdaten"}, ...] #}
<div class="card" style="padding: 0; margin-bottom: 14px;">
  <div class="tabs" style="border-bottom: 1px solid var(--border-color);
                            display: flex; flex-wrap: wrap;">
    {% for t in tabs %}
    <a href="{{ base_url }}?tab={{ t.key }}"
       class="tab {% if current_tab == t.key %}is-active{% endif %}"
       style="padding: 0.7em 1.2em; text-decoration: none;
              border-bottom: 3px solid {% if current_tab == t.key %}#f2581b{% else %}transparent{% endif %};">
      {{ t.label }}
    </a>
    {% endfor %}
  </div>
</div>
{%- endmacro %}


{%- macro entity_quick_actions(actions) -%}
{# actions = [{"label": "+ Neu", "url": "/quotes/new", "primary": true}, ...] #}
<div class="entity-quick-actions" style="display: flex; gap: 8px; flex-wrap: wrap;
            padding: 12px; background: var(--card-bg); border-radius: 8px;
            margin-bottom: 14px;">
  {% for a in actions %}
  <a href="{{ a.url }}"
     class="btn btn-sm {% if a.primary %}btn-primary{% else %}btn-secondary{% endif %}">
    {{ a.label }}
  </a>
  {% endfor %}
</div>
{%- endmacro %}


{%- macro entity_meta_row(items) -%}
{# items = [{"label": "Erstellt", "value": "2026-05-17"}, ...] #}
<div style="display: flex; gap: 24px; padding: 10px 14px;
            background: #f9fafb; border-radius: 6px; flex-wrap: wrap;
            font-size: 12px;">
  {% for i in items %}
  <div>
    <div style="color: var(--card-text-muted); font-size: 10px; text-transform: uppercase;
                letter-spacing: 0.05em; font-weight: 700;">{{ i.label }}</div>
    <div style="font-weight: 600; margin-top: 2px;">{{ i.value or '—' }}</div>
  </div>
  {% endfor %}
</div>
{%- endmacro %}