{% extends 'base.html' %}
{% block title %}Spulen | Filament Manager{% endblock %}
{% block body_class %}page-spools{% endblock %}
{% block page_title %}Spulenverwaltung{% endblock %}
{% block page_subtitle %}Rollen, Restfüllmengen, Reservierungen, Kosten und schnelle Detail-/Label-Ansichten pro Spule.{% endblock %}
{% block page_toolbar %}
<details class="row-action-menu page-toolbar-menu">
  <summary class="sci-btn small row-action-menu-trigger">
    <iconify-icon icon="mdi:plus-circle-outline" aria-hidden="true"></iconify-icon> Anlegen
    <iconify-icon class="menu-caret" icon="mdi:chevron-down" aria-hidden="true"></iconify-icon>
  </summary>
  <div class="row-action-menu-list page-toolbar-menu-list">
    <div class="row-action-menu-head">Neue Rollen und Profile</div>
    <div class="row-action-menu-note muted tiny">Neue Einzelrollen, Bulk-Erfassung und herstellerbezogene Leerspulen aus einem Menü.</div>
    <button type="button" class="sci-btn subtle small menu-action-btn" data-open-create-spool><iconify-icon icon="mdi:plus-circle-outline" aria-hidden="true"></iconify-icon> Neue Rolle</button>
    <button type="button" class="sci-btn subtle small menu-action-btn" data-open-bulk-create-spool><iconify-icon icon="mdi:package-variant-plus" aria-hidden="true"></iconify-icon> Bulk anlegen</button>
    <button type="button" class="sci-btn subtle small menu-action-btn" data-open-empty-spool-manager><iconify-icon icon="mdi:weight-kilogram" aria-hidden="true"></iconify-icon> Leerspulen</button>
  </div>
</details>
<details class="row-action-menu page-toolbar-menu">
  <summary class="sci-btn small row-action-menu-trigger">
    <iconify-icon icon="mdi:archive-outline" aria-hidden="true"></iconify-icon> Bestand
    <iconify-icon class="menu-caret" icon="mdi:chevron-down" aria-hidden="true"></iconify-icon>
  </summary>
  <div class="row-action-menu-list page-toolbar-menu-list">
    <div class="row-action-menu-head">Bulk Aktionen</div>
    <div class="row-action-menu-note muted tiny">Mehrere Rollen gemeinsam umlagern, archivieren oder Massenwerte anpassen.</div>
    <button type="button" class="sci-btn subtle small menu-action-btn" data-open-bulk-transfer><iconify-icon icon="mdi:swap-horizontal" aria-hidden="true"></iconify-icon> Bulk umlagern</button>
    <button type="button" class="sci-btn subtle small menu-action-btn" data-open-bulk-archive><iconify-icon icon="mdi:archive-outline" aria-hidden="true"></iconify-icon> Bulk archivieren</button>
    <button type="button" class="sci-btn subtle small menu-action-btn--danger" data-open-bulk-delete-archived><iconify-icon icon="mdi:delete-forever-outline" aria-hidden="true"></iconify-icon> Archivierte endgueltig loeschen</button>
    <button type="button" class="sci-btn subtle small menu-action-btn" data-open-bulk-set-remaining><iconify-icon icon="mdi:scale-bathroom" aria-hidden="true"></iconify-icon> Mengen setzen</button>
    <button type="button" class="sci-btn subtle small menu-action-btn" data-open-bulk-set-prices><iconify-icon icon="mdi:currency-eur" aria-hidden="true"></iconify-icon> Preise aendern</button>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.report_rollenvorrat_pdf') }}"><iconify-icon icon="mdi:file-document-multiple-outline" aria-hidden="true"></iconify-icon> Report Rollenvorrat</a>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.report_bestellzettel_pdf') }}"><iconify-icon icon="mdi:cart-outline" aria-hidden="true"></iconify-icon> Report Bestellzettel</a>
  </div>
</details>
<details class="row-action-menu page-toolbar-menu">
  <summary class="sci-btn small row-action-menu-trigger">
    <iconify-icon icon="mdi:warehouse" aria-hidden="true"></iconify-icon> Lager & Tools
    <iconify-icon class="menu-caret" icon="mdi:chevron-down" aria-hidden="true"></iconify-icon>
  </summary>
  <div class="row-action-menu-list page-toolbar-menu-list">
    <div class="row-action-menu-head">Wechsel und Werkzeuge</div>
    <div class="row-action-menu-note muted tiny">In Lager, Labels oder die zentrale Filamentpflege springen und neue Lager direkt anlegen.</div>
    <button type="button" class="sci-btn subtle small menu-action-btn" data-open-bulk-move-new-warehouse><iconify-icon icon="mdi:domain-plus" aria-hidden="true"></iconify-icon> Neues Lager + Transfer</button>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.warehouses') }}"><iconify-icon icon="mdi:view-grid-outline" aria-hidden="true"></iconify-icon> Lager</a>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.labels') }}"><iconify-icon icon="mdi:label-outline" aria-hidden="true"></iconify-icon> Label Tool</a>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.filaments') }}"><iconify-icon icon="mdi:vector-polyline" aria-hidden="true"></iconify-icon> Globale Filamente</a>
  </div>
</details>
{% endblock %}
{% block content %}
{% set has_extended_filter = filters.warehouse_id or filters.color_mode or filters.color_family or filters.finish_type or filters.effect_tag or filters.stock_state or filters.active != '1' or filters.only_reserved or filters.low_stock_only %}
<section
  class="sci-panel filter-panel compact page-filter-shell filament-filter-shell spool-filter-shell"
  data-spool-filter-shell
  data-filter-state="collapsed"
  data-default-open="{{ '1' if filters.q or has_extended_filter else '0' }}"
  data-default-tab="{{ 'advanced' if has_extended_filter else 'basic' }}"
>
  <div class="filament-filter-shell-head">
    <div>
      <h2 class="sci-h2">Suche & Filter</h2>
      <div class="muted tiny">Kompakt einklappbar: geschlossen nur Freitextsuche, geöffnet mit Basis- und erweiterten Filtern.</div>
    </div>
    <button type="button" class="sci-btn subtle small filament-filter-toggle" data-spool-filter-toggle aria-expanded="false" data-fallback-symbol="v">
      <iconify-icon icon="mdi:chevron-down" aria-hidden="true"></iconify-icon>
      <span data-spool-filter-toggle-label>Filter öffnen</span>
    </button>
  </div>

  <form class="filament-filter-quickbar" method="get" data-spool-filter-quick-form>
    {% if filters.warehouse_id %}<input type="hidden" name="warehouse_id" value="{{ filters.warehouse_id }}">{% endif %}
    {% if filters.brand %}<input type="hidden" name="brand" value="{{ filters.brand }}">{% endif %}
    {% if filters.material %}<input type="hidden" name="material" value="{{ filters.material }}">{% endif %}
    {% if filters.color_mode %}<input type="hidden" name="color_mode" value="{{ filters.color_mode }}">{% endif %}
    {% if filters.color_family %}<input type="hidden" name="color_family" value="{{ filters.color_family }}">{% endif %}
    {% if filters.finish_type %}<input type="hidden" name="finish_type" value="{{ filters.finish_type }}">{% endif %}
    {% if filters.effect_tag %}<input type="hidden" name="effect_tag" value="{{ filters.effect_tag }}">{% endif %}
    {% if filters.stock_state %}<input type="hidden" name="stock_state" value="{{ filters.stock_state }}">{% endif %}
    {% if filters.active != '1' %}<input type="hidden" name="active" value="{{ filters.active }}">{% endif %}
    {% if filters.only_reserved %}<input type="hidden" name="only_reserved" value="1">{% endif %}
    {% if filters.low_stock_only %}<input type="hidden" name="low_stock_only" value="1">{% endif %}
    <input class="sci-input filter-search filament-filter-quick-input" type="search" name="q" value="{{ filters.q }}" placeholder="Freitextsuche: Hersteller, Materialtyp, Farbe, SKU, Lagerort" data-spool-filter-quick-input>
    <button class="sci-btn small" type="submit"><iconify-icon icon="mdi:magnify" aria-hidden="true"></iconify-icon> Suchen</button>
  </form>

  <form class="filament-filter-form-advanced" method="get" data-spool-filter-form>
    <div class="filament-filter-tabbar" role="tablist" aria-label="Spulen Filter Tabs">
      <button type="button" class="filament-filter-tab active" data-spool-filter-tab="basic" aria-pressed="true"><iconify-icon icon="mdi:tune-vertical-variant" aria-hidden="true"></iconify-icon> Basis</button>
      <button type="button" class="filament-filter-tab" data-spool-filter-tab="advanced" aria-pressed="false"><iconify-icon icon="mdi:tune" aria-hidden="true"></iconify-icon> Erweiterte Filter</button>
    </div>

    <div class="filament-filter-panel active" data-spool-filter-panel="basic">
      <div class="filament-filter-grid filament-filter-grid--basic">
        <div class="sci-input-group filament-filter-field filament-filter-field--full">
          <label>Freitextsuche</label>
          <input class="sci-input" type="search" name="q" value="{{ filters.q }}" placeholder="Hersteller, Materialtyp, Farbe, SKU, Lagerort" data-spool-filter-main-q>
        </div>
        <div class="sci-input-group filament-filter-field">
          <label>Hersteller</label>
          <select class="sci-input" name="brand"><option value="">Alle Hersteller</option>{% for b in brands %}<option value="{{ b }}" {% if filters.brand == b %}selected{% endif %}>{{ b }}</option>{% endfor %}</select>
        </div>
        <div class="sci-input-group filament-filter-field">
          <label>Material</label>
          <select class="sci-input" name="material"><option value="">Alle Materialien</option>{% for m in materials %}<option value="{{ m.material }}" {% if filters.material == m.material %}selected{% endif %}>{{ m.material }}</option>{% endfor %}</select>
        </div>
        <div class="sci-input-group filament-filter-field">
          <label>Lager</label>
          <select class="sci-input" name="warehouse_id"><option value="">Alle Lager</option>{% for w in warehouses %}<option value="{{ w.id }}" {% if filters.warehouse_id == w.id|string %}selected{% endif %}>{{ w.name }}</option>{% endfor %}</select>
        </div>
      </div>
    </div>

    <div class="filament-filter-panel" data-spool-filter-panel="advanced">
      <div class="filament-advanced-filter-groups">
        <section class="filament-filter-group-card">
          <header>
            <strong>Optik & Material</strong>
            <span>Farbmodus, Familie, Finish und Effekte gezielt eingrenzen.</span>
          </header>
          <div class="filament-filter-grid">
            <div class="sci-input-group filament-filter-field">
              <label>Farbmodus</label>
              <select class="sci-input" name="color_mode"><option value="">Alle Farbmodi</option>{% for mode in color_modes %}<option value="{{ mode }}" {% if filters.color_mode == mode %}selected{% endif %}>{{ mode|upper }}</option>{% endfor %}</select>
            </div>
            <div class="sci-input-group filament-filter-field">
              <label>Farbfamilie</label>
              <select class="sci-input" name="color_family"><option value="">Alle Farbfamilien</option>{% for family in color_families %}<option value="{{ family }}" {% if filters.color_family == family %}selected{% endif %}>{{ family|replace('_', ' ')|title }}</option>{% endfor %}</select>
            </div>
            <div class="sci-input-group filament-filter-field">
              <label>Finish</label>
              <select class="sci-input" name="finish_type"><option value="">Alle Finishs</option>{% for finish in finish_types %}<option value="{{ finish }}" {% if filters.finish_type == finish %}selected{% endif %}>{{ finish|replace('_', ' ')|title }}</option>{% endfor %}</select>
            </div>
            <div class="sci-input-group filament-filter-field">
              <label>Effekt</label>
              <select class="sci-input" name="effect_tag"><option value="">Alle Effekte</option>{% for effect in effect_tags %}<option value="{{ effect }}" {% if filters.effect_tag == effect %}selected{% endif %}>{{ effect }}</option>{% endfor %}</select>
            </div>
          </div>
        </section>

        <section class="filament-filter-group-card">
          <header>
            <strong>Lager & Status</strong>
            <span>Füllstand, Reservierungen und aktive Rollen gezielt filtern.</span>
          </header>
          <div class="filament-filter-grid">
            <div class="sci-input-group filament-filter-field">
              <label>Bestandsstatus</label>
              <select class="sci-input" name="stock_state">
                <option value="">Alle Zustände</option>
                <option value="ok" {% if filters.stock_state == 'ok' %}selected{% endif %}>OK</option>
                <option value="niedrig" {% if filters.stock_state == 'niedrig' %}selected{% endif %}>Niedrig</option>
                <option value="kritisch" {% if filters.stock_state == 'kritisch' %}selected{% endif %}>Kritisch</option>
                <option value="leer" {% if filters.stock_state == 'leer' %}selected{% endif %}>Leer</option>
                <option value="archiviert" {% if filters.stock_state == 'archiviert' %}selected{% endif %}>Archiviert</option>
              </select>
            </div>
            <div class="sci-input-group filament-filter-field">
              <label>Ansicht</label>
              <select class="sci-input" name="active">
                <option value="1" {% if filters.active == '1' %}selected{% endif %}>Nur aktiv</option>
                <option value="0" {% if filters.active == '0' %}selected{% endif %}>Nur archiviert</option>
                <option value="" {% if filters.active == '' %}selected{% endif %}>Alle Rollen</option>
              </select>
            </div>
            <label class="check-line"><input type="checkbox" name="only_reserved" value="1" {% if filters.only_reserved %}checked{% endif %}> nur reservierte Rollen</label>
            <label class="check-line"><input type="checkbox" name="low_stock_only" value="1" {% if filters.low_stock_only %}checked{% endif %}> nur niedriger Bestand</label>
          </div>
        </section>
      </div>
    </div>

    <div class="filament-filter-footer spool-filter-footer">
      <div class="filament-filter-footer-actions">
        <button class="sci-btn small" type="submit"><iconify-icon icon="mdi:filter-variant" aria-hidden="true"></iconify-icon> Filter anwenden</button>
        <a class="sci-btn subtle small" href="{{ url_for('web.spools') }}"><iconify-icon icon="mdi:filter-remove-outline" aria-hidden="true"></iconify-icon> Zurücksetzen</a>
      </div>
      <div class="spool-filter-stats" aria-label="Spulen Kennzahlen">
        <span class="spool-filter-stat"><b>{{ spool_stats_summary.count }}</b> Rollen</span>
        <span class="spool-filter-stat"><b>{{ spool_stats_summary.active_count }}</b> aktiv</span>
        <span class="spool-filter-stat"><b>{{ spool_stats_summary.low_count }}</b> {% if spool_stats_summary.low_stock_logic_mode == 'grouped_material_color' %}Low-Stock Gruppen{% else %}niedriger Bestand{% endif %}</span>
        <span class="spool-filter-stat"><b>{{ spool_stats_summary.reserved_count }}</b> reserviert</span>
        <span class="spool-filter-stat"><b>{{ spool_stats_summary.warehouse_count }}</b> Lager</span>
        <span class="spool-filter-stat"><b>{{ spool_stats_summary.remaining_total_g }}</b> g gesamt</span>
      </div>
    </div>
  </form>
</section>

<section class="sci-panel section-gap">
  <div class="spool-table-shell-head">
    <div class="spool-table-shell-copy">
      <h2 class="sci-h2">Spulenübersicht</h2>
      <div class="muted tiny">Spalten per Drag & Drop sortieren, per Schalter ein- oder ausblenden und jederzeit auf Standard zurücksetzen.</div>
    </div>
    <div class="spool-table-toolbar">
      <div class="spool-table-toolbar-actions" aria-label="Tabellenaktionen">
        <button type="button" class="sci-btn subtle small" data-spool-expand-all><iconify-icon icon="mdi:plus-box-outline" aria-hidden="true"></iconify-icon> Alle öffnen</button>
        <button type="button" class="sci-btn subtle small" data-spool-collapse-all><iconify-icon icon="mdi:minus-circle-outline" aria-hidden="true"></iconify-icon> Alle schließen</button>
      </div>
      <details class="row-action-menu spool-column-menu" data-spool-column-menu>
        <summary class="sci-btn subtle small spool-toolbar-menu-trigger" aria-label="Spaltenauswahl" title="Spaltenauswahl">
          <iconify-icon icon="mdi:view-column-outline" aria-hidden="true"></iconify-icon> Spalten
        </summary>
        <div class="row-action-menu-list spool-column-menu-list">
          <div class="row-action-menu-head">Tabellenspalten</div>
          <div class="row-action-menu-note muted tiny">Zeilen ziehen, um die Reihenfolge zu ändern. Über den Schalter rechts blendest du Spalten direkt ein oder aus.</div>
          <div class="spool-column-menu-grid" data-spool-column-order-list>
            {% set spool_column_options = [
              ('material', 'Materialtyp'),
              ('color', 'Farbe'),
              ('finish', 'Finish'),
              ('diameter', 'Durchmesser'),
              ('location', 'Lagerort'),
              ('available', 'Verfügbar'),
              ('reserved', 'Reserviert'),
              ('stock', 'Restfüllmenge'),
              ('status', 'Status'),
              ('supplier', 'Lieferant'),
              ('lot', 'Lot')
            ] %}
            {% for column_key, column_label in spool_column_options %}
            <div class="spool-column-option-row" data-spool-column-row="{{ column_key }}" data-spool-column-key="{{ column_key }}">
              <div class="spool-column-drag-handle" data-spool-column-drag-handle title="{{ column_label }} ziehen" aria-hidden="true" draggable="true">
                <iconify-icon icon="mdi:drag-vertical" aria-hidden="true"></iconify-icon>
              </div>
              <div class="spool-column-option-copy">
                <strong>{{ column_label }}</strong>
                <span>{{ column_key }}</span>
              </div>
              <label class="spool-column-switch" aria-label="{{ column_label }} ein- oder ausblenden">
                <input type="checkbox" data-spool-column-toggle value="{{ column_key }}" {% if column_key in ['material', 'color', 'location', 'stock', 'status'] %}checked{% endif %}>
                <span class="spool-column-switch-track"><span class="spool-column-switch-thumb"></span></span>
              </label>
            </div>
            {% endfor %}
          </div>
          <div class="spool-column-menu-actions">
            <button type="button" class="sci-btn subtle small" data-spool-columns-reset><iconify-icon icon="mdi:restore" aria-hidden="true"></iconify-icon> Standardansicht</button>
          </div>
        </div>
      </details>
    </div>
  </div>
  <div class="table-wrap">
    <div class="spool-table-top-scroll" data-spool-top-scroll hidden aria-hidden="true">
      <div class="spool-table-top-scroll-inner" data-spool-top-scroll-inner></div>
    </div>
    <table class="sci-table spool-table-compact spool-table-accordion" data-spool-table>
      <thead>
        <tr>
          <th class="spool-check-col"><input type="checkbox" id="toggle-all-spools"></th>
          <th class="spool-col spool-col--filament"><button type="button" class="spool-sort-btn" data-spool-sort="brand" aria-label="Nach Filament sortieren">Filament<span class="spool-sort-indicator" data-spool-sort-indicator="brand"></span></button></th>
          <th class="spool-col spool-col--material" data-spool-col="material"><button type="button" class="spool-sort-btn" data-spool-sort="material" aria-label="Nach Materialtyp sortieren">Materialtyp<span class="spool-sort-indicator" data-spool-sort-indicator="material"></span></button></th>
          <th class="spool-col spool-col--color" data-spool-col="color"><button type="button" class="spool-sort-btn" data-spool-sort="color" aria-label="Nach Farbe sortieren">Farbe<span class="spool-sort-indicator" data-spool-sort-indicator="color"></span></button></th>
          <th class="spool-col spool-col--finish" data-spool-col="finish"><button type="button" class="spool-sort-btn" data-spool-sort="finish" aria-label="Nach Finish sortieren">Finish<span class="spool-sort-indicator" data-spool-sort-indicator="finish"></span></button></th>
          <th class="spool-col spool-col--diameter" data-spool-col="diameter"><button type="button" class="spool-sort-btn" data-spool-sort="diameter" aria-label="Nach Durchmesser sortieren">Durchm.<span class="spool-sort-indicator" data-spool-sort-indicator="diameter"></span></button></th>
          <th class="spool-col spool-col--location" data-spool-col="location"><button type="button" class="spool-sort-btn" data-spool-sort="warehouse" aria-label="Nach Lagerort sortieren">Lagerort<span class="spool-sort-indicator" data-spool-sort-indicator="warehouse"></span></button></th>
          <th class="spool-col spool-col--available" data-spool-col="available"><button type="button" class="spool-sort-btn" data-spool-sort="available" aria-label="Nach verfügbarem Gewicht sortieren">Verfügbar<span class="spool-sort-indicator" data-spool-sort-indicator="available"></span></button></th>
          <th class="spool-col spool-col--reserved" data-spool-col="reserved"><button type="button" class="spool-sort-btn" data-spool-sort="reserved" aria-label="Nach reserviertem Gewicht sortieren">Reserviert<span class="spool-sort-indicator" data-spool-sort-indicator="reserved"></span></button></th>
          <th class="spool-col spool-col--stock" data-spool-col="stock"><button type="button" class="spool-sort-btn" data-spool-sort="remaining" aria-label="Nach Restfüllmenge sortieren">Restfüllmenge<span class="spool-sort-indicator" data-spool-sort-indicator="remaining"></span></button></th>
          <th class="spool-col spool-col--status" data-spool-col="status"><button type="button" class="spool-sort-btn" data-spool-sort="status" aria-label="Nach Status sortieren">Status<span class="spool-sort-indicator" data-spool-sort-indicator="status"></span></button></th>
          <th class="spool-col spool-col--supplier" data-spool-col="supplier"><button type="button" class="spool-sort-btn" data-spool-sort="supplier" aria-label="Nach Lieferant sortieren">Lieferant<span class="spool-sort-indicator" data-spool-sort-indicator="supplier"></span></button></th>
          <th class="spool-col spool-col--lot" data-spool-col="lot"><button type="button" class="spool-sort-btn" data-spool-sort="lot" aria-label="Nach Lot sortieren">Lot<span class="spool-sort-indicator" data-spool-sort-indicator="lot"></span></button></th>
          <th class="spool-expand-col spool-col spool-col--detail">Details</th>
        </tr>
      </thead>
      <tbody>
        {% for spool in spools %}
        {% set color_hex = spool.color_hex or '#8aa0b8' %}
        {% set mode_label = (spool.color_mode or spool.filament_color_mode or 'single')|replace('_', ' ')|title %}
        {% set family_label = (spool.color_family or spool.filament_color_family or '')|replace('_', ' ')|title %}
        {% set finish_label = (spool.finish_type or spool.filament_finish_type or '')|replace('_', ' ')|title %}
        {% set net_weight = spool.net_weight_g or 0 %}
        {% set remaining_weight = spool.remaining_g or 0 %}
        {% set stock_percent = ((remaining_weight / net_weight) * 100) if net_weight > 0 else 0 %}
        {% set empty_weight = spool.empty_spool_weight_g or 0 %}
        {% set current_weight = remaining_weight + empty_weight %}
        {% set reference_weight = (net_weight + empty_weight) if (net_weight + empty_weight) > 0 else 0 %}
        {% set combined_fill_percent = (((remaining_weight + empty_weight) / reference_weight) * 100) if reference_weight > 0 else 0 %}
        {% set material_fill_percent = ((remaining_weight / reference_weight) * 100) if reference_weight > 0 else 0 %}
        {% set detail_id = 'spool-detail-' ~ spool.id %}
        {% set spool_name = (spool.brand or '') ~ ' ' ~ (spool.material or '') ~ ' ' ~ (spool.color_name or '') %}
        {% set profile_label = spool.filament_color_name or spool.color_name or ('Profil #' ~ (spool.filament_id or spool.id)) %}
        {% set brand_label = spool.brand or 'Hersteller' %}
        {% set material_label = spool.material or 'Material offen' %}
        {% set color_label = spool.color_name or profile_label or 'Ohne Farbname' %}
        {% set nozzle_label = spool.print_temp_c or spool.filament_print_temp_c %}
        {% set bed_label = spool.bed_temp_c or spool.filament_bed_temp_c %}
        {% set slot_label = ('Slot ' ~ spool.slot_number) if spool.slot_number else '' %}
        {% set storage_label = spool.storage_location or '' %}
        {% set role_status_key = spool.role_status_key or 'free' %}
        {% if role_status_key not in ['free', 'reserved', 'in-use', 'empty'] %}
          {% set role_status_key = 'free' %}
        {% endif %}
        {% set role_status_label = 'Verfügbar' %}
        {% set role_status_rank = 2 %}
        {% set stock_tone_key = 'ok' %}
        {% if role_status_key == 'empty' %}
          {% set role_status_label = 'Leer' %}
          {% set role_status_rank = 1 %}
        {% elif role_status_key == 'reserved' %}
          {% set role_status_label = 'Reserviert' %}
          {% set role_status_rank = 3 %}
        {% elif role_status_key == 'in-use' %}
          {% set role_status_label = 'In Verwendung' %}
          {% set role_status_rank = 4 %}
        {% endif %}
        {% if stock_percent <= 15 %}
          {% set stock_tone_key = 'critical' %}
        {% elif stock_percent <= 35 %}
          {% set stock_tone_key = 'low' %}
        {% elif stock_percent <= 60 %}
          {% set stock_tone_key = 'warn' %}
        {% endif %}
        {% set material_key = (spool.material or '')|lower %}
        {% set material_badge_class = 'is-generic' %}
        {% if 'pla' in material_key %}
          {% set material_badge_class = 'is-pla' %}
        {% elif 'petg' in material_key %}
          {% set material_badge_class = 'is-petg' %}
        {% elif 'abs' in material_key or 'asa' in material_key %}
          {% set material_badge_class = 'is-abs' %}
        {% elif 'tpu' in material_key or 'flex' in material_key %}
          {% set material_badge_class = 'is-tpu' %}
        {% elif 'pa' in material_key or 'nylon' in material_key or 'pc' in material_key %}
          {% set material_badge_class = 'is-engineering' %}
        {% endif %}
        <tr
          class="spool-summary-row"
          data-spool-row
          data-spool-summary-row
          data-spool-id="{{ spool.id }}"
          data-filament-id="{{ spool.filament_id or '' }}"
          data-active="{{ 1 if spool.active else 0 }}"
          data-sort-brand="{{ (spool.brand or '')|lower }}"
          data-sort-material="{{ (spool.material or '')|lower }}"
          data-sort-color="{{ (spool.color_name or '')|lower }}"
          data-sort-finish="{{ (finish_label or '')|lower }}"
          data-sort-diameter="{{ spool.diameter_mm or 0 }}"
          data-sort-available="{{ spool.available_g or 0 }}"
          data-sort-reserved="{{ spool.reserved_g or 0 }}"
          data-sort-supplier="{{ (spool.supplier or '')|lower }}"
          data-sort-lot="{{ (spool.lot_number or '')|lower }}"
          data-sort-warehouse="{{ (spool.warehouse_name or '')|lower }}"
          data-sort-remaining="{{ remaining_weight }}"
          data-sort-status="{{ role_status_key }}"
          data-sort-status-rank="{{ role_status_rank }}"
          data-role-status="{{ role_status_key }}"
        >
          <td class="spool-check-col"><input type="checkbox" class="spool-selector" value="{{ spool.id }}"></td>
          <td class="spool-cell spool-cell--filament spool-col spool-col--filament">
            <div class="spool-main-cell" style="--spool-accent: {{ color_hex }}; --spool-accent-soft: {{ color_hex }}22;">
              <div class="spool-main-copy">
                <strong>{{ brand_label }} - {{ material_label }} - {{ color_label }}</strong>
                <div class="spool-main-subline">
                  {% if spool.lot_number %}<span>Lot {{ spool.lot_number }}</span>{% endif %}
                  {% if spool.supplier %}<span>{{ spool.supplier }}</span>{% endif %}
                </div>
              </div>
            </div>
          </td>
          <td class="spool-cell spool-cell--material spool-col spool-col--material" data-spool-col="material">
            <div class="spool-material-cell">
              <span class="spool-material-badge {{ material_badge_class }}" title="Materialtyp">{{ material_label }}</span>
            </div>
          </td>
          <td class="spool-cell spool-cell--color spool-col spool-col--color" data-spool-col="color">
            <div class="spool-color-cell">
              <span class="spool-color-swatch" style="--spool-accent: {{ color_hex }};"><span class="spool-color-swatch-dot" style="background: {{ color_hex }};"></span></span>
              <div class="spool-color-copy">
                <strong>{{ color_label }}</strong>
                <span>{{ mode_label }}{% if family_label %} | {{ family_label }}{% endif %}</span>
              </div>
            </div>
          </td>
          <td class="spool-cell spool-cell--finish spool-col spool-col--finish" data-spool-col="finish">
            <div class="spool-inline-metric">
              <strong>{{ finish_label or '-' }}</strong>
              <span>Finish</span>
            </div>
          </td>
          <td class="spool-cell spool-cell--diameter spool-col spool-col--diameter" data-spool-col="diameter">
            <div class="spool-inline-metric">
              <strong>{% if spool.diameter_mm %}{{ spool.diameter_mm }} mm{% else %}-{% endif %}</strong>
              <span>Durchmesser</span>
            </div>
          </td>
          <td class="spool-cell spool-cell--location spool-col spool-col--location" data-spool-col="location">
            <div class="spool-location-cell">
              <div class="spool-location-line">
                <strong>{{ spool.warehouse_name }}</strong>
                {% if slot_label %}<span class="spool-location-chip">{{ slot_label }}</span>{% endif %}
              </div>
            </div>
          </td>
          <td class="spool-cell spool-cell--available spool-col spool-col--available" data-spool-col="available">
            <div class="spool-inline-metric">
              <strong>{{ spool.available_g }} g</strong>
              <span>frei</span>
            </div>
          </td>
          <td class="spool-cell spool-cell--reserved spool-col spool-col--reserved" data-spool-col="reserved">
            <div class="spool-inline-metric">
              <strong>{{ spool.reserved_g }} g</strong>
              <span>reserviert</span>
            </div>
          </td>
          <td class="spool-cell spool-cell--stock spool-col spool-col--stock" data-spool-col="stock">
            <div class="spool-stock-summary" tabindex="0" data-stock-tooltip-title="Spuleninfo" data-stock-size="Spulengröße: {% if net_weight %}{{ net_weight }} g{% else %}offen{% endif %}" data-stock-weight="Gewicht aktuell: {{ current_weight }} g" data-stock-remaining="Restfüllmenge: {{ remaining_weight }} g">
              <div class="spool-stock-topline">
                <strong>{{ remaining_weight }} g</strong>
                <span class="spool-stock-percent">{{ stock_percent|round(0, 'common')|int }}%</span>
              </div>
              <span>{% if net_weight %}von {{ net_weight }} g netto{% else %}Nettogewicht offen{% endif %}{% if spool.empty_spool_weight_g is not none %} · Leer {{ '%.0f'|format(spool.empty_spool_weight_g) }} g{% endif %}</span>
              <div class="spool-stock-bar spool-stock-bar--combined" aria-hidden="true">
                {% for i in range(8) %}
                {% set segment_start = (i / 8) * 100 %}
                <span class="spool-stock-segment{% if stock_percent > segment_start %} is-filled is-tone-{{ stock_tone_key }}{% endif %}"></span>
                {% endfor %}
              </div>
            </div>
          </td>
          <td class="spool-cell spool-cell--status spool-col spool-col--status" data-spool-col="status">
            <div class="spool-status-summary" data-role-status-current="{{ role_status_key }}">
              <span class="spool-role-status-track" aria-label="{{ role_status_label }}">
                <button type="button" class="spool-role-status spool-role-status--free{% if role_status_key == 'free' %} is-active{% endif %}" data-spool-status-set="free" data-id="{{ spool.id }}" aria-label="Status auf Verfügbar setzen" aria-pressed="{{ 'true' if role_status_key == 'free' else 'false' }}" title="Verfügbar">
                  <iconify-icon icon="mdi:check-circle-outline" aria-hidden="true"></iconify-icon>
                  <span>Verfügbar</span>
                </button>
                <button type="button" class="spool-role-status spool-role-status--in-use{% if role_status_key == 'in-use' %} is-active{% endif %}" data-spool-status-set="in-use" data-id="{{ spool.id }}" aria-label="Status auf In Verwendung setzen" aria-pressed="{{ 'true' if role_status_key == 'in-use' else 'false' }}" title="In Verwendung">
                  <iconify-icon icon="mdi:play-circle-outline" aria-hidden="true"></iconify-icon>
                  <span>In Verwendung</span>
                </button>
                <button type="button" class="spool-role-status spool-role-status--reserved{% if role_status_key == 'reserved' %} is-active{% endif %}" data-spool-status-set="reserved" data-id="{{ spool.id }}" aria-label="Status auf Reserviert setzen" aria-pressed="{{ 'true' if role_status_key == 'reserved' else 'false' }}" title="Reserviert">
                  <iconify-icon icon="mdi:bookmark-check-outline" aria-hidden="true"></iconify-icon>
                  <span>Reserviert</span>
                </button>
                <button type="button" class="spool-role-status spool-role-status--empty{% if role_status_key == 'empty' %} is-active{% endif %}" data-spool-status-set="empty" data-id="{{ spool.id }}" aria-label="Status auf Leer setzen" aria-pressed="{{ 'true' if role_status_key == 'empty' else 'false' }}" title="Leer">
                  <iconify-icon icon="mdi:tray-remove" aria-hidden="true"></iconify-icon>
                  <span>Leer</span>
                </button>
              </span>
            </div>
          </td>
          <td class="spool-cell spool-cell--supplier spool-col spool-col--supplier" data-spool-col="supplier">
            <div class="spool-inline-metric">
              <strong>{{ spool.supplier or '-' }}</strong>
              <span>Lieferant</span>
            </div>
          </td>
          <td class="spool-cell spool-cell--lot spool-col spool-col--lot" data-spool-col="lot">
            <div class="spool-inline-metric">
              <strong>{{ spool.lot_number or '-' }}</strong>
              <span>Lot</span>
            </div>
          </td>
          <td class="spool-expand-col spool-cell spool-cell--detail spool-col spool-col--detail">
            <button type="button" class="spool-expand-btn" data-spool-expand data-target="{{ detail_id }}" aria-expanded="false" aria-controls="{{ detail_id }}" title="Materialdetails aufklappen"><iconify-icon icon="mdi:chevron-down" aria-hidden="true"></iconify-icon></button>
          </td>
        </tr>
        <tr class="spool-detail-row" id="{{ detail_id }}" data-spool-detail-row hidden>
          <td colspan="13" data-spool-detail-cell>
            <div class="spool-detail-shell">
              <div class="spool-detail-overview">
                <div class="spool-detail-stat spool-detail-stat--identity">
                  <span class="spool-detail-stat-icon"><iconify-icon icon="mdi:package-variant-closed" aria-hidden="true"></iconify-icon></span>
                  <div><span>Profil</span><strong>{{ profile_label or '-' }}</strong></div>
                </div>
                <div class="spool-detail-stat spool-detail-stat--material">
                  <span class="spool-detail-stat-icon"><iconify-icon icon="mdi:layers-outline" aria-hidden="true"></iconify-icon></span>
                  <div><span>Material</span><strong>{{ spool.material or '-' }}</strong></div>
                </div>
                <div class="spool-detail-stat spool-detail-stat--color">
                  <span class="spool-detail-stat-icon"><iconify-icon icon="mdi:palette-outline" aria-hidden="true"></iconify-icon></span>
                  <div><span>Farbe</span><strong>{{ spool.color_name or '-' }}</strong></div>
                </div>
                <div class="spool-detail-stat spool-detail-stat--stock">
                  <span class="spool-detail-stat-icon"><iconify-icon icon="mdi:scale-bathroom" aria-hidden="true"></iconify-icon></span>
                  <div><span>Restfüllmenge</span><strong>{{ remaining_weight }} g</strong></div>
                </div>
              </div>
              <div class="spool-detail-grid">
                <article class="spool-detail-card spool-detail-card--identity">
                  <header class="spool-detail-card-head">
                    <span class="spool-detail-card-icon"><iconify-icon icon="mdi:factory" aria-hidden="true"></iconify-icon></span>
                    <div class="spool-detail-card-heading">
                      <h3>Basis & Herkunft</h3>
                      <p>Profil, Hersteller und Kennzeichnung</p>
                    </div>
                  </header>
                  <div class="spool-detail-brandline">
                    <span class="spool-detail-brandlogo" aria-hidden="true">
                      {% if spool.brand_logo_url %}
                      <img class="spool-brand-logo" src="{{ spool.brand_logo_url }}" alt="{{ spool.brand }} Logo">
                      {% else %}
                      <span class="spool-brand-logo-fallback">{{ (spool.brand or '?')[:1] }}</span>
                      {% endif %}
                    </span>
                    <div class="spool-detail-brandcopy">
                      <strong>{{ spool.brand or 'Hersteller' }}</strong>
                      <span>{{ profile_label or '-' }}</span>
                    </div>
                  </div>
                  <dl class="spool-detail-list">
                    <div><dt>Hersteller</dt><dd>{{ spool.brand or '-' }}</dd></div>
                    <div><dt>Filamentprofil</dt><dd>{{ profile_label or '-' }}</dd></div>
                    <div><dt>Materialtyp</dt><dd>{{ spool.material or '-' }}</dd></div>
                    <div><dt>Farbname</dt><dd>{{ spool.color_name or '-' }}</dd></div>
                    <div><dt>SKU</dt><dd>{{ spool.sku or '-' }}</dd></div>
                    <div><dt>Lieferant</dt><dd>{{ spool.supplier or '-' }}</dd></div>
                    <div><dt>Lot</dt><dd>{{ spool.lot_number or '-' }}</dd></div>
                  </dl>
                </article>
                <article class="spool-detail-card spool-detail-card--optics">
                  <header class="spool-detail-card-head">
                    <span class="spool-detail-card-icon"><iconify-icon icon="mdi:palette-swatch-outline" aria-hidden="true"></iconify-icon></span>
                    <div class="spool-detail-card-heading">
                      <h3>Optik & Materialprofil</h3>
                      <p>Farbaufbau, Finish und Materialeigenschaften</p>
                    </div>
                  </header>
                  <dl class="spool-detail-list">
                    <div><dt>Material</dt><dd>{{ spool.material or '-' }}</dd></div>
                    <div><dt>Farbmodus</dt><dd>{{ mode_label }}</dd></div>
                    <div><dt>Farbfamilie</dt><dd>{{ family_label or '-' }}</dd></div>
                    <div><dt>Finish</dt><dd>{{ finish_label or '-' }}</dd></div>
                    <div><dt>Durchmesser</dt><dd>{% if spool.diameter_mm %}{{ spool.diameter_mm }} mm{% else %}-{% endif %}</dd></div>
                    <div><dt>Lebensmittelecht</dt><dd>{{ 'Ja' if spool.filament_food_safe else 'Nein' }}</dd></div>
                  </dl>
                </article>
                <article class="spool-detail-card spool-detail-card--stock">
                  <header class="spool-detail-card-head">
                    <span class="spool-detail-card-icon"><iconify-icon icon="mdi:chart-donut" aria-hidden="true"></iconify-icon></span>
                    <div class="spool-detail-card-heading">
                      <h3>Restfüllmenge & Kosten</h3>
                      <p>Füllstand, Mengen und wirtschaftliche Werte</p>
                    </div>
                  </header>
                  <dl class="spool-detail-list">
                    <div><dt>Restgewicht</dt><dd>{{ remaining_weight }} g</dd></div>
                    <div><dt>Füllstand</dt><dd>{{ stock_percent|round(0, 'common')|int }} %</dd></div>
                    <div><dt>Verfügbar</dt><dd>{{ spool.available_g }} g</dd></div>
                    <div><dt>Reserviert</dt><dd>{{ spool.reserved_g }} g</dd></div>
                    <div><dt>Nettogewicht</dt><dd>{{ spool.net_weight_g or '-' }} g</dd></div>
                    <div><dt>Leerspule</dt><dd>{% if spool.empty_spool_weight_g is not none %}{{ '%.0f'|format(spool.empty_spool_weight_g) }} g{% else %}-{% endif %}</dd></div>
                    <div><dt>Kosten / kg</dt><dd>{{ '%.2f'|format(spool.cost_per_kg or 0) }} EUR/kg</dd></div>
                    <div><dt>Einkauf</dt><dd>{{ '%.2f'|format(spool.purchase_price_total or 0) }} EUR</dd></div>
                    <div><dt>Leerspulenprofil</dt><dd>{% if spool.empty_spool_brand or spool.empty_spool_model_code %}{{ spool.empty_spool_brand or '' }} {{ spool.empty_spool_model_code or '' }}{% else %}-{% endif %}</dd></div>
                  </dl>
                </article>
                <article class="spool-detail-card spool-detail-card--tech">
                  <header class="spool-detail-card-head">
                    <span class="spool-detail-card-icon"><iconify-icon icon="mdi:cog-outline" aria-hidden="true"></iconify-icon></span>
                    <div class="spool-detail-card-heading">
                      <h3>Technik & Hinweise</h3>
                      <p>Druckwerte, Lagerort und ergänzende Hinweise</p>
                    </div>
                  </header>
                  <dl class="spool-detail-list">
                    <div><dt>Düse</dt><dd>{% if nozzle_label %}{{ nozzle_label }} C{% else %}-{% endif %}</dd></div>
                    <div><dt>Heizbett</dt><dd>{% if bed_label %}{{ bed_label }} C{% else %}-{% endif %}</dd></div>
                    <div><dt>Lüfter</dt><dd>{% if spool.filament_fan_percent is not none %}{{ spool.filament_fan_percent }} %{% else %}-{% endif %}</dd></div>
                    <div><dt>Dichte</dt><dd>{% if spool.filament_density_g_cm3 %}{{ spool.filament_density_g_cm3 }} g/cm3{% else %}-{% endif %}</dd></div>
                    <div><dt>Geruch</dt><dd>{{ spool.filament_scent_note or '-' }}</dd></div>
                    <div><dt>Lagerort</dt><dd>{{ spool.warehouse_name }}</dd></div>
                    <div><dt>Lagerplatz</dt><dd>{{ spool.storage_location or '-' }}</dd></div>
                    <div><dt>Slot ID</dt><dd>{% if spool.slot_number %}Slot {{ spool.slot_number }}{% else %}-{% endif %}</dd></div>
                  </dl>
                  {% if spool.notes %}
                  <div class="spool-detail-note"><strong>Notizen</strong><p>{{ spool.notes }}</p></div>
                  {% endif %}
                </article>
              </div>
              <div class="spool-detail-footer">
                <div class="spool-detail-quickbar">
                  <button type="button" class="sci-btn subtle small" data-open-filament-detail data-filament-id="{{ spool.filament_id or '' }}" data-spool-id="{{ spool.id }}"><iconify-icon icon="mdi:file-document-outline" aria-hidden="true"></iconify-icon> Filamentdetails</button>
                  <button type="button" class="sci-btn subtle small" data-open-label-modal data-spool-id="{{ spool.id }}"><iconify-icon icon="mdi:label-outline" aria-hidden="true"></iconify-icon> Label</button>
                  <button type="button" class="sci-btn subtle small" data-open-edit-spool data-id="{{ spool.id }}"><iconify-icon icon="mdi:pencil-outline" aria-hidden="true"></iconify-icon> Bearbeiten</button>
                  <button type="button" class="sci-btn subtle small" data-open-consume data-id="{{ spool.id }}" data-name="{{ spool_name }}"><iconify-icon icon="mdi:fire-circle" aria-hidden="true"></iconify-icon> Verbrauch</button>
                  <button type="button" class="sci-btn subtle small" data-open-transfer data-id="{{ spool.id }}" data-name="{{ spool_name }}"><iconify-icon icon="mdi:swap-horizontal" aria-hidden="true"></iconify-icon> Umlagern</button>
                  <button type="button" class="sci-btn subtle small" data-open-weigh-spool data-id="{{ spool.id }}" data-name="{{ spool_name }}"><iconify-icon icon="mdi:scale-bathroom" aria-hidden="true"></iconify-icon> Wiegen</button>
                  <button type="button" class="sci-btn subtle small" data-open-mqtt-slot-sync data-id="{{ spool.id }}" data-name="{{ spool_name }}"><iconify-icon icon="mdi:lan-connect" aria-hidden="true"></iconify-icon> MQTT-Slot</button>
                  <a class="sci-btn subtle small" href="{{ url_for('web.labels_designer', spool_id=spool.id) }}"><iconify-icon icon="mdi:draw" aria-hidden="true"></iconify-icon> Label-Layout</a>
                  {% if spool.active %}
                  <button type="button" class="sci-btn subtle small menu-action-btn--danger" data-action="archive" data-id="{{ spool.id }}"><iconify-icon icon="mdi:archive-outline" aria-hidden="true"></iconify-icon> Archivieren</button>
                  {% else %}
                  <button type="button" class="sci-btn subtle small" data-action="restore" data-id="{{ spool.id }}"><iconify-icon icon="mdi:archive-arrow-up-outline" aria-hidden="true"></iconify-icon> Wiederherstellen</button>
                  <button type="button" class="sci-btn subtle small menu-action-btn--danger" data-action="delete" data-id="{{ spool.id }}" data-confirm="Archivierte Rolle inklusive Historie endgueltig loeschen?"><iconify-icon icon="mdi:delete-forever-outline" aria-hidden="true"></iconify-icon> Endgueltig loeschen</button>
                  {% endif %}
                </div>
              </div>
            </div>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="13" class="empty-cell" data-spool-empty-cell>Keine Rollen gefunden.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endblock %}
{% block data_blocks %}
<script id="warehouse-options" type="application/json">{{ warehouses_json|tojson }}</script>
<script id="spool-options" type="application/json">{{ spools_json|tojson }}</script>
<script id="filament-options-endpoint" type="application/json">{{ {'url': filament_modal_options_url}|tojson }}</script>
<script id="filament-datasheets-map" type="application/json">{{ filament_datasheets_map|tojson }}</script>
<script id="manufacturer-profiles" type="application/json">{{ manufacturer_profiles_json|tojson }}</script>
<script id="scale-devices" type="application/json">{{ scales_json|tojson }}</script>
<script id="empty-spool-options" type="application/json">{{ empty_spool_profiles_json|tojson }}</script>
{% endblock %}