{% extends 'base.html' %}
{% block body_class %}page-labels page-label-tool{% endblock %}
{% block head_extra %}
<link rel="modulepreload" href="{{ url_for('static', filename='js/labels.js') }}">
{% endblock %}
{% block title %}Label Tool - Filament Manager{% endblock %}
{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}
{% block page_toolbar %}{% endblock %}
{% block content %}
{% set selected_preset_entry = (label_presets | selectattr('key', 'equalto', selected_preset) | list | first) %}
<section class="label-tool-studio">
  <article class="sci-panel label-tool-shell">
    <header class="label-tool-topbar">
      <div class="label-tool-topbar-brand">
        <div class="label-tool-brand-mark" aria-hidden="true">NL</div>
        <div class="label-tool-brand-copy">
          <strong>Label Tool</strong>
          <span>Batchdruck, Presets und Vorschau auf einer gemeinsamen Arbeitsflaeche.</span>
        </div>
      </div>
      <div class="label-tool-topbar-summary">
        <div class="label-tool-summary-pill">
          <span>Preset</span>
          <strong id="label-active-preset-name">{{ selected_preset_entry.name if selected_preset_entry else 'Eigenes Designer-Layout' }}</strong>
        </div>
        <div class="label-tool-summary-pill">
          <span>Ausgabe</span>
          <strong id="label-output-mode-summary">A4 Bogen</strong>
        </div>
        <div class="label-tool-summary-pill">
          <span>Drucker</span>
          <strong id="label-output-printer-summary">Noch kein Profil</strong>
        </div>
      </div>
      <div class="sci-actions label-tool-topbar-actions">
        <button type="button" class="sci-btn subtle small" data-label-open-preset-modal>
          <iconify-icon icon="mdi:view-grid-outline" aria-hidden="true"></iconify-icon>
          Presets
        </button>
        <button type="button" class="sci-btn subtle small" data-label-open-assistant>
          <iconify-icon icon="mdi:tune" aria-hidden="true"></iconify-icon>
          Drucker-Assistent
        </button>
        <button type="button" class="sci-btn small" data-label-batch-selected>
          <iconify-icon icon="mdi:printer-outline" aria-hidden="true"></iconify-icon>
          Batch Auswahl
        </button>
        <button type="button" class="sci-btn subtle small" data-label-batch-filtered>
          <iconify-icon icon="mdi:file-pdf-box" aria-hidden="true"></iconify-icon>
          Batch Gefiltert
        </button>
        <a id="label-open-designer-link" class="sci-btn subtle small" href="{{ url_for('web.labels_designer', preset=selected_preset, load_preset=1) }}">
          <iconify-icon icon="mdi:draw" aria-hidden="true"></iconify-icon>
          Designer
        </a>
      </div>
    </header>

    <div class="label-tool-layout">
      <aside class="label-tool-sidebar">
        <section class="designer-step-card label-tool-filter-card">
          <div class="designer-step-card-head">
            <strong>Filter</strong>
            <span class="muted">Spulenmenge eingrenzen und Drucklauf vorbereiten.</span>
          </div>
          <form id="label-filter-form" class="label-tool-filter-form" method="get">
            <input id="label-selected-preset" type="hidden" name="preset" value="{{ selected_preset }}">
            <div class="sci-input-group full">
              <label>Suche</label>
              <input class="sci-input filter-search" name="q" placeholder="Brand, Material, Farbe, SKU, Lager" value="{{ filters.q }}">
            </div>
            <div class="label-tool-filter-grid">
              <div class="sci-input-group">
                <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 class="sci-input-group">
                <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">
                <label>Status</label>
                <select class="sci-input" name="active">
                  <option value="1" {% if filters.active == '1' %}selected{% endif %}>Aktiv</option>
                  <option value="0" {% if filters.active == '0' %}selected{% endif %}>Archiviert</option>
                  <option value="" {% if filters.active == '' %}selected{% endif %}>Alle</option>
                </select>
              </div>
            </div>
            <div class="sci-actions">
              <button class="sci-btn small" type="submit">
                <iconify-icon icon="mdi:tune" aria-hidden="true"></iconify-icon>
                Filtern
              </button>
              <a class="sci-btn subtle small" href="{{ url_for('web.spools') }}">
                <iconify-icon icon="mdi:warehouse" aria-hidden="true"></iconify-icon>
                Spulen
              </a>
            </div>
          </form>
        </section>

        <section class="designer-step-card">
          <div class="designer-step-card-head">
            <strong>Ausgabeprofil</strong>
            <span class="muted">Gespeicherte Ausgabeart und Batch-Strategie.</span>
          </div>
          <div class="label-output-summary">
            <div class="label-output-summary-item">
              <span>Modus</span>
              <strong id="label-output-mode-card">A4 Bogen</strong>
            </div>
            <div class="label-output-summary-item">
              <span>Format</span>
              <strong id="label-output-format-card">PDF</strong>
            </div>
            <div class="label-output-summary-item">
              <span>Drucker</span>
              <strong id="label-output-printer-card">Noch kein Profil</strong>
            </div>
          </div>
          <div class="designer-card-note">
            <iconify-icon icon="mdi:printer-outline" aria-hidden="true"></iconify-icon>
            <span id="label-output-summary-note">A4 nutzt den PDF-/Browserdruck. Labeldrucker erzeugen optimierte Einzeldateien und koennen direkt an die Systemwarteschlange gesendet werden.</span>
          </div>
          <div class="sci-actions">
            <button type="button" class="sci-btn subtle small" data-label-open-assistant>
              <iconify-icon icon="mdi:tune" aria-hidden="true"></iconify-icon>
              Profil bearbeiten
            </button>
          </div>
        </section>

        <section class="designer-step-card">
          <div class="designer-step-card-head">
            <strong>Preset Auswahl</strong>
            <span class="muted">Aktives Layout fuer Vorschau, Export und Batchdruck.</span>
          </div>
          <div class="label-tool-active-preset">
            <strong id="label-sidebar-preset-name">{{ selected_preset_entry.name if selected_preset_entry else 'Eigenes Designer-Layout' }}</strong>
            <p id="label-sidebar-preset-description" class="muted">{{ selected_preset_entry.description if selected_preset_entry else 'Nutze dein global gespeichertes Layout aus dem Label Designer.' }}</p>
          </div>
          <div class="sci-actions">
            <button type="button" class="sci-btn subtle small" data-label-open-preset-modal>
              <iconify-icon icon="mdi:view-grid-outline" aria-hidden="true"></iconify-icon>
              Preset Browser
            </button>
            <a id="label-sidebar-designer-link" class="sci-btn subtle small" href="{{ url_for('web.labels_designer', preset=selected_preset, load_preset=1) }}">
              <iconify-icon icon="mdi:open-in-new" aria-hidden="true"></iconify-icon>
              Im Designer
            </a>
          </div>
        </section>

        <section class="designer-step-card label-tool-status-card">
          <div class="designer-step-card-head">
            <strong>Batch Status</strong>
            <span class="muted">Letzter vorbereiteter Drucklauf und Rueckmeldung.</span>
          </div>
          <div id="label-job-status" class="label-tool-job-status is-idle">
            Noch kein Batchdruck ausgefuehrt.
          </div>
        </section>
      </aside>

      <section class="label-tool-main">
        <div class="label-tool-main-head">
          <div>
            <strong>Spulen fuer Labeldruck</strong>
            <p class="muted">Zeilen anklicken fuer Vorschau, mehrere Spulen markieren fuer Batchdruck.</p>
          </div>
          <div class="label-tool-main-meta">
            <span>{{ spools|length }} Eintraege</span>
            <span id="label-selection-count">0 markiert</span>
          </div>
        </div>
        <div class="table-wrap">
          <table class="sci-table label-table" data-label-table>
            <thead>
              <tr>
                <th><input id="label-toggle-all" type="checkbox"></th>
                <th>Spule</th>
                <th>Lager</th>
                <th>Bestand</th>
                <th>Status</th>
                <th>Ausgabe</th>
              </tr>
            </thead>
            <tbody>
              {% for spool in spools %}
              <tr data-label-row data-spool-id="{{ spool.id }}">
                <td><input class="label-selector" type="checkbox" value="{{ spool.id }}"></td>
                <td>
                  <div class="label-spool-cell">
                    <span class="label-color-chip" style="--label-chip-color: {{ spool.color_hex or '#7aa4d8' }}"></span>
                    <div>
                      <strong>{{ spool.brand }} · {{ spool.material }}</strong>
                      <div class="muted">{{ spool.color_name }}{% if spool.sku %} · {{ spool.sku }}{% endif %}</div>
                    </div>
                  </div>
                </td>
                <td>{{ spool.warehouse_name }}{% if spool.storage_location %}<div class="muted">{{ spool.storage_location }}</div>{% endif %}</td>
                <td>{{ spool.remaining_g }} g<div class="muted">frei {{ spool.available_g }} g</div></td>
                <td>
                  <span class="sci-badge {% if spool.stock_state == 'kritisch' %}critical{% elif spool.stock_state == 'niedrig' %}low{% elif spool.stock_state == 'ok' %}ok{% else %}archiviert{% endif %}">{{ spool.stock_state }}</span>
                </td>
                <td class="sci-actions label-row-actions">
                  <button
                    type="button"
                    class="sci-btn subtle small icon-only"
                    data-label-preview
                    data-id="{{ spool.id }}"
                    data-name="{{ spool.brand }} {{ spool.material }} {{ spool.color_name }}"
                    data-svg-base="{{ url_for('web.spool_label_svg', spool_id=spool.id) }}"
                    title="Vorschau laden"
                    aria-label="Vorschau laden"
                  ><iconify-icon icon="mdi:eye-outline" aria-hidden="true"></iconify-icon></button>
                  <a
                    class="sci-btn subtle small icon-only"
                    target="_blank"
                    data-label-svg-link
                    data-svg-base="{{ url_for('web.spool_label_svg', spool_id=spool.id) }}"
                    href="{{ url_for('web.spool_label_svg', spool_id=spool.id, preset=selected_preset) }}"
                    title="SVG exportieren"
                    aria-label="SVG exportieren"
                  ><iconify-icon icon="mdi:file-code-outline" aria-hidden="true"></iconify-icon></a>
                  <a
                    class="sci-btn subtle small icon-only"
                    target="_blank"
                    data-label-png-link
                    data-id="{{ spool.id }}"
                    data-png-base="{{ url_for('web.spool_label_png', spool_id=spool.id) }}"
                    href="{{ url_for('web.spool_label_png', spool_id=spool.id, preset=selected_preset, thermal=1) }}"
                    title="PNG exportieren"
                    aria-label="PNG exportieren"
                  ><iconify-icon icon="mdi:image-outline" aria-hidden="true"></iconify-icon></a>
                  <a
                    class="sci-btn subtle small icon-only"
                    target="_blank"
                    data-label-jpg-link
                    data-id="{{ spool.id }}"
                    data-jpg-base="{{ url_for('web.spool_label_jpg', spool_id=spool.id) }}"
                    href="{{ url_for('web.spool_label_jpg', spool_id=spool.id, preset=selected_preset, thermal=1) }}"
                    title="JPEG exportieren"
                    aria-label="JPEG exportieren"
                  ><iconify-icon icon="mdi:image-outline" aria-hidden="true"></iconify-icon></a>
                  <button
                    type="button"
                    class="sci-btn subtle small icon-only"
                    data-label-print-row
                    data-id="{{ spool.id }}"
                    title="Drucklauf fuer diese Spule starten"
                    aria-label="Drucklauf fuer diese Spule starten"
                  ><iconify-icon icon="mdi:printer-outline" aria-hidden="true"></iconify-icon></button>
                  <a
                    class="sci-btn subtle small icon-only"
                    data-label-pdf-link
                    data-id="{{ spool.id }}"
                    href="{{ url_for('web.labels_export_pdf') }}?ids={{ spool.id }}&preset={{ selected_preset }}"
                    title="PDF exportieren"
                    aria-label="PDF exportieren"
                  ><iconify-icon icon="mdi:file-pdf-box" aria-hidden="true"></iconify-icon></a>
                </td>
              </tr>
              {% else %}
              <tr><td colspan="6" class="empty-cell">Keine passenden Spulen fuer Labels gefunden.</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </section>

      <aside class="sci-panel label-preview-panel label-tool-preview-panel">
        <div class="label-preview-head">
          <div>
            <h2 class="sci-h2">Label Vorschau</h2>
            <div id="label-preview-name" class="muted">Bitte links eine Spule waehlen.</div>
          </div>
          <a id="label-preview-open" class="sci-btn subtle small is-disabled" href="#" target="_blank" rel="noopener">SVG oeffnen</a>
        </div>
        <iframe id="label-preview-frame" class="label-preview-frame" title="Label Vorschau"></iframe>
        <div class="label-preview-export-grid">
          <a id="label-preview-svg" class="sci-btn subtle small is-disabled" href="#" target="_blank" rel="noopener">
            <iconify-icon icon="mdi:file-code-outline" aria-hidden="true"></iconify-icon>
            SVG
          </a>
          <a id="label-preview-png" class="sci-btn subtle small is-disabled" href="#" target="_blank" rel="noopener">
            <iconify-icon icon="mdi:image-outline" aria-hidden="true"></iconify-icon>
            PNG
          </a>
          <a id="label-preview-jpg" class="sci-btn subtle small is-disabled" href="#" target="_blank" rel="noopener">
            <iconify-icon icon="mdi:image-outline" aria-hidden="true"></iconify-icon>
            JPEG
          </a>
          <button id="label-preview-print" type="button" class="sci-btn subtle small is-disabled" data-label-print-active>
            <iconify-icon icon="mdi:printer-outline" aria-hidden="true"></iconify-icon>
            Drucken
          </button>
          <a id="label-preview-pdf" class="sci-btn subtle small is-disabled" href="#">
            <iconify-icon icon="mdi:file-pdf-box" aria-hidden="true"></iconify-icon>
            PDF
          </a>
        </div>
      </aside>
    </div>

    <div id="label-tool-preset-modal" class="modal hidden" aria-hidden="true">
      <div class="modal-backdrop" data-label-preset-modal-close></div>
      <div class="modal-card modal-card--label-presets" role="dialog" aria-modal="true" aria-labelledby="label-tool-preset-modal-title">
        <div class="modal-head">
          <div>
            <div id="label-tool-preset-modal-title" class="modal-title">Preset Browser</div>
            <p class="muted">Vorschau aller System- und Custom-Presets. Direkt auswahlen oder im Designer mit geladenem Preset oeffnen.</p>
          </div>
          <button type="button" class="modal-close-icon" data-label-preset-modal-close aria-label="Preset Browser schliessen">
            <iconify-icon icon="mdi:close-circle-outline" aria-hidden="true"></iconify-icon>
          </button>
        </div>
        <div id="label-tool-preset-grid" class="label-preset-modal-grid section-gap"></div>
      </div>
    </div>

    <div id="label-print-assistant-modal" class="modal hidden" aria-hidden="true">
      <div class="modal-backdrop" data-label-assistant-close></div>
      <div class="modal-card modal-card--label-assistant" role="dialog" aria-modal="true" aria-labelledby="label-print-assistant-title">
        <div class="modal-head">
          <div>
            <div id="label-print-assistant-title" class="modal-title">Drucker-Assistent</div>
            <p class="muted">Ausgabeformat, Batchstrategie und bevorzugten Drucker speichern. Das Profil bleibt fuer spaetere Drucklaeufe erhalten.</p>
          </div>
          <button type="button" class="modal-close-icon" data-label-assistant-close aria-label="Drucker-Assistent schliessen">
            <iconify-icon icon="mdi:close-circle-outline" aria-hidden="true"></iconify-icon>
          </button>
        </div>
        <div class="label-assistant-grid">
          <section class="designer-step-card">
            <div class="designer-step-card-head">
              <strong>Arbeitsmodus</strong>
              <span class="muted">A4 Bogen oder Labeldrucker.</span>
            </div>
            <div id="label-assistant-mode-list" class="label-mode-switch"></div>
          </section>
          <section class="designer-step-card">
            <div class="designer-step-card-head">
              <strong>Ausgabeformat</strong>
              <span class="muted">Das Format wird pro Modus sinnvoll eingeschraenkt.</span>
            </div>
            <div id="label-assistant-format-list" class="label-tool-option-grid"></div>
          </section>
          <section class="designer-step-card">
            <div class="designer-step-card-head">
              <strong>Druckerziel</strong>
              <span class="muted">Systemwarteschlange oder serielle Profile.</span>
            </div>
            <div class="designer-config-grid designer-config-grid--compact">
              <div class="sci-input-group full">
                <label>Verbindung</label>
                <select id="label-assistant-connection" class="sci-input"></select>
              </div>
              <div class="sci-input-group full">
                <label>Windows Drucker</label>
                <select id="label-assistant-printer" class="sci-input"></select>
              </div>
              <div class="sci-input-group full">
                <label>USB / Bluetooth Port</label>
                <select id="label-assistant-serial-port" class="sci-input"></select>
              </div>
              <div class="sci-input-group">
                <label>Baudrate</label>
                <input id="label-assistant-baudrate" class="sci-input" type="number" min="1200" max="921600" step="1" value="9600">
              </div>
            </div>
          </section>
          <section class="designer-step-card">
            <div class="designer-step-card-head">
              <strong>Batch Komfort</strong>
              <span class="muted">Kopien, Bildqualitaet und Versand an den Drucker.</span>
            </div>
            <div class="designer-config-grid designer-config-grid--compact">
              <div class="sci-input-group">
                <label>Kopien</label>
                <input id="label-assistant-copies" class="sci-input" type="number" min="1" max="100" step="1" value="1">
              </div>
              <div class="sci-input-group">
                <label>Bildskalierung</label>
                <input id="label-assistant-scale" class="sci-input" type="number" min="1" max="6" step="1" value="3">
              </div>
              <label class="check-line full"><input id="label-assistant-thermal" type="checkbox" checked> Thermaloptimierte Schwarz/Weiss-Ausgabe</label>
              <label class="check-line full"><input id="label-assistant-auto-dispatch" type="checkbox"> Batch direkt an Drucker senden, wenn unterstuetzt</label>
            </div>
            <div id="label-assistant-note" class="designer-card-note">
              <iconify-icon icon="mdi:printer-outline" aria-hidden="true"></iconify-icon>
              <span>A4 und Labeldrucker erzeugen jetzt jeweils eigene Batch-Jobs mit stabil gespeicherten Ausgabedateien. Systemdruck fuer Labeldrucker ist aktuell fuer PNG/JPEG vorbereitet; USB- und Bluetooth-Profile bleiben als gefuehrte Exportstrecke gespeichert.</span>
            </div>
          </section>
        </div>
        <div class="dialog-actions">
          <button type="button" class="sci-btn subtle small" data-label-assistant-refresh>
            <iconify-icon icon="mdi:restore" aria-hidden="true"></iconify-icon>
            Geraete neu laden
          </button>
          <button type="button" class="sci-btn subtle small" data-label-assistant-close>Schliessen</button>
          <button type="button" class="sci-btn small" data-label-assistant-save>
            <iconify-icon icon="mdi:content-save-outline" aria-hidden="true"></iconify-icon>
            Profil speichern
          </button>
        </div>
      </div>
    </div>
  </article>
</section>
{% endblock %}
{% block data_blocks %}
<script id="label-spool-options" type="application/json">{{ spools_json|tojson }}</script>
<script id="label-presets-json" type="application/json">{{ label_presets|tojson }}</script>
<script id="label-print-preferences-json" type="application/json">{{ label_print_preferences|tojson }}</script>
<script id="label-preview-spool-id-json" type="application/json">{{ {'id': preview_spool_id}|tojson }}</script>
{% endblock %}