{% extends 'base.html' %}
{% block title %}Label Designer - Filament Manager{% endblock %}
{% block head_extra %}
<link rel="modulepreload" href="{{ url_for('static', filename='js/labels_designer.js') }}">
{% endblock %}
{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}
{% block body_class %}{% if popup_mode %}label-designer-popup{% else %}page-label-designer{% endif %}{% endblock %}
{% block page_toolbar %}{% endblock %}
{% block content %}
<section class="label-designer-shell{% if popup_mode %} is-popup{% endif %}">
  <article class="sci-panel label-designer-main">
    <header class="designer-titlebar designer-titlebar--studio">
      <div class="designer-menubar">
        <div class="designer-brand" aria-label="Label Designer">
          <div class="designer-brand-mark" aria-hidden="true">NL</div>
        </div>
        <nav class="designer-menu" aria-label="Designer Menue">
          <button type="button" class="designer-menu-item" data-top-menu="file">Datei</button>
          <button type="button" class="designer-menu-item" data-top-menu="edit">Bearbeiten</button>
          <button type="button" class="designer-menu-item" data-top-menu="view">Ansicht</button>
          <button type="button" class="designer-menu-item" data-top-menu="print">Druck</button>
          <button type="button" class="designer-menu-item" data-top-menu="tools">Tools</button>
          <button type="button" class="designer-menu-item" data-top-menu="help">Hilfe</button>
        </nav>
      </div>
      <div class="designer-top-menu">
        <section class="designer-top-menu-panel" data-top-menu-panel="file">
          <button type="button" class="sci-btn small" data-label-template-save><iconify-icon icon="mdi:content-save-outline" aria-hidden="true"></iconify-icon> Layout speichern</button>
          <button type="button" class="sci-btn subtle small" data-tab-target="assets"><iconify-icon icon="mdi:file-pdf-box" aria-hidden="true"></iconify-icon> Ausgabe oeffnen</button>
          <button type="button" class="sci-btn subtle small" data-preset-modal-open><iconify-icon icon="mdi:view-grid-outline" aria-hidden="true"></iconify-icon> Presets</button>
          <button type="button" class="sci-btn subtle small" data-label-template-reset><iconify-icon icon="mdi:restore" aria-hidden="true"></iconify-icon> Zuruecksetzen</button>
        </section>
        <section class="designer-top-menu-panel" data-top-menu-panel="edit">
          <button type="button" class="sci-btn subtle small" data-add-element="text"><iconify-icon icon="mdi:format-text" aria-hidden="true"></iconify-icon> Text</button>
          <button type="button" class="sci-btn subtle small" data-add-element="field"><iconify-icon icon="mdi:tag-outline" aria-hidden="true"></iconify-icon> Feld</button>
          <button type="button" class="sci-btn subtle small" data-add-element="progress"><iconify-icon icon="mdi:chart-bell-curve-cumulative" aria-hidden="true"></iconify-icon> Progress</button>
          <button type="button" class="sci-btn subtle small" data-add-element="checkbox"><iconify-icon icon="mdi:checkbox-blank-outline" aria-hidden="true"></iconify-icon> Checkbox</button>
          <button type="button" class="sci-btn subtle small" data-add-element="circle"><iconify-icon icon="mdi:stop-circle-outline" aria-hidden="true"></iconify-icon> Kreis</button>
          <button type="button" class="sci-btn subtle small" data-add-element="oval"><iconify-icon icon="mdi:shape-outline" aria-hidden="true"></iconify-icon> Oval</button>
          <button type="button" class="sci-btn subtle small" data-object-duplicate><iconify-icon icon="mdi:content-copy" aria-hidden="true"></iconify-icon> Duplizieren</button>
          <button type="button" class="sci-btn subtle small" data-object-delete><iconify-icon icon="mdi:delete-outline" aria-hidden="true"></iconify-icon> Loeschen</button>
        </section>
        <section class="designer-top-menu-panel" data-top-menu-panel="view">
          <button type="button" class="sci-btn subtle small" data-work-tab="design"><iconify-icon icon="mdi:monitor-eye" aria-hidden="true"></iconify-icon> Editor</button>
          <button type="button" class="sci-btn subtle small" data-work-tab="preview"><iconify-icon icon="mdi:eye-outline" aria-hidden="true"></iconify-icon> Vorschau</button>
          <button type="button" class="sci-btn subtle small" data-tab-target="document"><iconify-icon icon="mdi:ruler-square" aria-hidden="true"></iconify-icon> Layout</button>
          <button type="button" class="sci-btn subtle small" data-stage-zoom="reset"><iconify-icon icon="mdi:magnify-plus-outline" aria-hidden="true"></iconify-icon> 100%</button>
          <label class="check-line compact designer-menu-toggle" title="Rasterlinien anzeigen"><input id="label-show-grid" type="checkbox" checked> Grid</label>
          <label class="check-line compact designer-menu-toggle" title="Rasterpunkte anzeigen"><input id="label-show-dots" type="checkbox" checked> Dots</label>
          <label class="check-line compact designer-menu-toggle" title="Am Raster einrasten"><input id="label-snap-grid" type="checkbox" checked> Snap Grid</label>
          <label class="check-line compact designer-menu-toggle" title="An Objekten einrasten"><input id="label-snap-objects" type="checkbox" checked> Snap Objekt</label>
          <label class="check-line compact designer-menu-toggle" title="Hilfslinien verwenden"><input id="label-snap-guides" type="checkbox" checked> Linien</label>
          <div class="sci-input-group compact-inline designer-menu-inline"><label>Grid</label><input id="label-grid-size" class="sci-input" type="number" min="4" max="120" step="1" value="12"></div>
          <div class="sci-input-group compact-inline designer-menu-inline"><label>Toleranz</label><input id="label-snap-distance" class="sci-input" type="number" min="2" max="40" step="1" value="8"></div>
        </section>
        <section class="designer-top-menu-panel" data-top-menu-panel="print">
          <button type="button" class="sci-btn small" data-label-template-preview><iconify-icon icon="mdi:printer-eye" aria-hidden="true"></iconify-icon> Vorschau bauen</button>
          <button type="button" class="sci-btn subtle small" data-tab-target="assets"><iconify-icon icon="mdi:printer-check-outline" aria-hidden="true"></iconify-icon> Ausgabe</button>
          <button type="button" class="sci-btn subtle small" data-open-preview-svg><iconify-icon icon="mdi:file-code-outline" aria-hidden="true"></iconify-icon> SVG</button>
          <button type="button" class="sci-btn subtle small" data-open-preview-pdf><iconify-icon icon="mdi:printer-pos" aria-hidden="true"></iconify-icon> PDF</button>
        </section>
        <section class="designer-top-menu-panel" data-top-menu-panel="tools">
          {% if popup_mode %}
          <a class="sci-btn subtle small" href="{{ url_for('web.labels_designer') }}" target="_blank" rel="noopener"><iconify-icon icon="mdi:window-restore" aria-hidden="true"></iconify-icon> Standardseite</a>
          {% else %}
          <button type="button" class="sci-btn subtle small" data-open-designer-window data-designer-url="{{ url_for('web.labels_designer', popup='1') }}"><iconify-icon icon="mdi:open-in-new" aria-hidden="true"></iconify-icon> Designer Fenster</button>
          {% endif %}
          <button type="button" class="sci-btn subtle small" data-preset-modal-open><iconify-icon icon="mdi:view-grid-outline" aria-hidden="true"></iconify-icon> Preset Browser</button>
          <a class="sci-btn subtle small" 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" href="{{ url_for('web.wiki') }}#labels-designer"><iconify-icon icon="mdi:book-open-page-variant-outline" aria-hidden="true"></iconify-icon> Workflow Hilfe</a>
        </section>
        <section class="designer-top-menu-panel" data-top-menu-panel="help">
          <button type="button" class="sci-btn subtle small" data-tab-target="document"><iconify-icon icon="mdi:ruler-square" aria-hidden="true"></iconify-icon> Schritt Layout</button>
          <button type="button" class="sci-btn subtle small" data-tab-target="layers"><iconify-icon icon="mdi:form-select" aria-hidden="true"></iconify-icon> Schritt Felder</button>
          <button type="button" class="sci-btn subtle small" data-tab-target="assets"><iconify-icon icon="mdi:content-save-cog-outline" aria-hidden="true"></iconify-icon> Schritt Ausgabe</button>
        </section>
      </div>
    </header>

    <section class="designer-ribbon designer-ribbon--studio" aria-label="Editor Toolbar">
      <div class="designer-ribbon-body designer-ribbon-body--studio">
        <div class="ribbon-group ribbon-group--primary">
          <div class="ribbon-group-title">Datei</div>
          <div class="ribbon-group-actions ribbon-actions-icons">
            <button type="button" class="sci-btn small icon-only label-designer-icon-btn" data-label-template-save title="Layout speichern" aria-label="Layout speichern" data-tooltip="Layout speichern"><iconify-icon icon="mdi:content-save-outline" aria-hidden="true"></iconify-icon><span class="sr-only">Layout speichern</span></button>
            <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-label-template-preview title="Druckvorschau aktualisieren" aria-label="Druckvorschau aktualisieren" data-tooltip="Druckvorschau aktualisieren"><iconify-icon icon="mdi:eye-outline" aria-hidden="true"></iconify-icon><span class="sr-only">Druckvorschau aktualisieren</span></button>
            <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-label-template-reset title="Standardlayout wiederherstellen" aria-label="Standardlayout wiederherstellen" data-tooltip="Standardlayout wiederherstellen"><iconify-icon icon="mdi:restore" aria-hidden="true"></iconify-icon><span class="sr-only">Standardlayout wiederherstellen</span></button>
          </div>
        </div>

        <div class="ribbon-group ribbon-group--tools">
          <div class="ribbon-group-title">Bausteine</div>
          <div class="ribbon-group-actions">
            <details class="designer-toolbar-dropdown designer-toolbar-dropdown--builder">
              <summary class="sci-btn subtle small">
                <iconify-icon icon="mdi:format-text" aria-hidden="true"></iconify-icon>
                <span>Text</span>
              </summary>
              <div class="designer-toolbar-dropdown-panel designer-toolbar-dropdown-panel--builder">
                <div class="designer-toolbar-dropdown-head">
                  <strong>Text</strong>
                  <small class="muted">Freitext, Datenfelder und statusbezogene Textbausteine.</small>
                </div>
                <div class="designer-builder-grid">
                  <button type="button" class="sci-btn subtle small" data-add-element="text"><iconify-icon icon="mdi:format-text" aria-hidden="true"></iconify-icon> Freitext</button>
                  <button type="button" class="sci-btn subtle small" data-add-element="field"><iconify-icon icon="mdi:tag-outline" aria-hidden="true"></iconify-icon> Datenfeld</button>
                  <button type="button" class="sci-btn subtle small" data-add-element="progress"><iconify-icon icon="mdi:chart-bell-curve-cumulative" aria-hidden="true"></iconify-icon> Progress</button>
                  <button type="button" class="sci-btn subtle small" data-add-element="checkbox"><iconify-icon icon="mdi:checkbox-blank-outline" aria-hidden="true"></iconify-icon> Checkbox</button>
                </div>
              </div>
            </details>

            <details class="designer-toolbar-dropdown designer-toolbar-dropdown--builder">
              <summary class="sci-btn subtle small">
                <iconify-icon icon="mdi:shape-outline" aria-hidden="true"></iconify-icon>
                <span>Formen</span>
              </summary>
              <div class="designer-toolbar-dropdown-panel designer-toolbar-dropdown-panel--builder">
                <div class="designer-toolbar-dropdown-head">
                  <strong>Formen</strong>
                  <small class="muted">Grundformen für Struktur, Rahmen und Hervorhebungen.</small>
                </div>
                <div class="designer-builder-grid">
                  <button type="button" class="sci-btn subtle small" data-add-element="rect"><iconify-icon icon="mdi:checkbox-blank-outline" aria-hidden="true"></iconify-icon> Box</button>
                  <button type="button" class="sci-btn subtle small" data-add-element="line"><iconify-icon icon="mdi:minus" aria-hidden="true"></iconify-icon> Linie</button>
                  <button type="button" class="sci-btn subtle small" data-add-element="circle"><iconify-icon icon="mdi:stop-circle-outline" aria-hidden="true"></iconify-icon> Kreis</button>
                  <button type="button" class="sci-btn subtle small" data-add-element="oval"><iconify-icon icon="mdi:shape-outline" aria-hidden="true"></iconify-icon> Oval</button>
                </div>
              </div>
            </details>

            <details class="designer-toolbar-dropdown designer-toolbar-dropdown--builder">
              <summary class="sci-btn subtle small">
                <iconify-icon icon="mdi:image-outline" aria-hidden="true"></iconify-icon>
                <span>Bilder</span>
              </summary>
              <div class="designer-toolbar-dropdown-panel designer-toolbar-dropdown-panel--builder">
                <div class="designer-toolbar-dropdown-head">
                  <strong>Bilder</strong>
                  <small class="muted">Logos, Assets und Bildmaterial direkt auf das Label ziehen.</small>
                </div>
                <div class="designer-builder-grid">
                  <button type="button" class="sci-btn subtle small" data-add-element="logo"><iconify-icon icon="mdi:image-outline" aria-hidden="true"></iconify-icon> Logo</button>
                  <button type="button" class="sci-btn subtle small" data-asset-library-open><iconify-icon icon="mdi:view-grid-outline" aria-hidden="true"></iconify-icon> Asset Browser</button>
                </div>
              </div>
            </details>

            <details class="designer-toolbar-dropdown designer-toolbar-dropdown--builder">
              <summary class="sci-btn subtle small">
                <iconify-icon icon="mdi:qrcode" aria-hidden="true"></iconify-icon>
                <span>QR &amp; Barcodes</span>
              </summary>
              <div class="designer-toolbar-dropdown-panel designer-toolbar-dropdown-panel--builder">
                <div class="designer-toolbar-dropdown-head">
                  <strong>QR &amp; Barcodes</strong>
                  <small class="muted">Maschinenlesbare Codes für Druck, Lager und Versand.</small>
                </div>
                <div class="designer-builder-grid">
                  <button type="button" class="sci-btn subtle small" data-add-element="qr"><iconify-icon icon="mdi:qrcode" aria-hidden="true"></iconify-icon> QR Code</button>
                  <button type="button" class="sci-btn subtle small" data-add-element="barcode"><iconify-icon icon="mdi:barcode" aria-hidden="true"></iconify-icon> Barcode</button>
                </div>
              </div>
            </details>
          </div>
        </div>

        <div class="ribbon-group">
          <div class="ribbon-group-title">Bearbeiten</div>
          <div class="ribbon-group-actions ribbon-actions-icons">
            <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-object-duplicate title="Ausgewaehltes Element duplizieren" aria-label="Ausgewaehltes Element duplizieren" data-tooltip="Ausgewaehltes Element duplizieren"><iconify-icon icon="mdi:content-copy" aria-hidden="true"></iconify-icon><span class="sr-only">Ausgewaehltes Element duplizieren</span></button>
            <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-object-delete title="Ausgewaehltes Element loeschen" aria-label="Ausgewaehltes Element loeschen" data-tooltip="Ausgewaehltes Element loeschen"><iconify-icon icon="mdi:delete-outline" aria-hidden="true"></iconify-icon><span class="sr-only">Ausgewaehltes Element loeschen</span></button>
            <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-tab-target="layers" title="Zum Schritt Felder wechseln" aria-label="Zum Schritt Felder wechseln" data-tooltip="Zum Schritt Felder wechseln"><iconify-icon icon="mdi:tag-outline" aria-hidden="true"></iconify-icon><span class="sr-only">Zum Schritt Felder wechseln</span></button>
            <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-work-tab="preview" title="Druckvorschau oeffnen" aria-label="Druckvorschau oeffnen" data-tooltip="Druckvorschau oeffnen"><iconify-icon icon="mdi:eye-outline" aria-hidden="true"></iconify-icon><span class="sr-only">Druckvorschau oeffnen</span></button>
          </div>
        </div>

        <div class="ribbon-group">
          <div class="ribbon-group-title">Ausrichten</div>
          <div class="ribbon-group-actions ribbon-grid ribbon-actions-icons">
            <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-align-selected="left" title="Links ausrichten" aria-label="Links ausrichten" data-tooltip="Links ausrichten"><iconify-icon icon="mdi:format-align-left" aria-hidden="true"></iconify-icon><span class="sr-only">Links ausrichten</span></button>
            <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-align-selected="center-x" title="Horizontal zentrieren" aria-label="Horizontal zentrieren" data-tooltip="Horizontal zentrieren"><iconify-icon icon="mdi:format-align-center" aria-hidden="true"></iconify-icon><span class="sr-only">Horizontal zentrieren</span></button>
            <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-align-selected="right" title="Rechts ausrichten" aria-label="Rechts ausrichten" data-tooltip="Rechts ausrichten"><iconify-icon icon="mdi:format-align-right" aria-hidden="true"></iconify-icon><span class="sr-only">Rechts ausrichten</span></button>
            <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-align-selected="top" title="Oben ausrichten" aria-label="Oben ausrichten" data-tooltip="Oben ausrichten"><iconify-icon icon="mdi:arrow-up" aria-hidden="true"></iconify-icon><span class="sr-only">Oben ausrichten</span></button>
            <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-align-selected="middle-y" title="Vertikal zentrieren" aria-label="Vertikal zentrieren" data-tooltip="Vertikal zentrieren"><iconify-icon icon="mdi:arrow-expand-vertical" aria-hidden="true"></iconify-icon><span class="sr-only">Vertikal zentrieren</span></button>
            <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-align-selected="bottom" title="Unten ausrichten" aria-label="Unten ausrichten" data-tooltip="Unten ausrichten"><iconify-icon icon="mdi:arrow-down" aria-hidden="true"></iconify-icon><span class="sr-only">Unten ausrichten</span></button>
          </div>
        </div>

        <div class="ribbon-group ribbon-group--view">
          <div class="ribbon-group-title">Ansicht</div>
          <div class="ribbon-group-actions ribbon-actions-icons">
            <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-stage-zoom="out" title="Herauszoomen" aria-label="Herauszoomen" data-tooltip="Herauszoomen"><iconify-icon icon="mdi:magnify-minus-outline" aria-hidden="true"></iconify-icon><span class="sr-only">Herauszoomen</span></button>
            <button type="button" class="sci-btn subtle small label-designer-zoom-btn" data-stage-zoom="reset" title="Zoom auf 100 Prozent" aria-label="Zoom auf 100 Prozent" data-tooltip="Zoom auf 100 Prozent">100%</button>
            <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-stage-zoom="in" title="Hineinzoomen" aria-label="Hineinzoomen" data-tooltip="Hineinzoomen"><iconify-icon icon="mdi:magnify-plus-outline" aria-hidden="true"></iconify-icon><span class="sr-only">Hineinzoomen</span></button>
          </div>
        </div>

        <div class="ribbon-group ribbon-group--layers">
          <div class="ribbon-group-title">Layer</div>
          <div class="ribbon-group-actions">
            <details class="designer-toolbar-dropdown">
              <summary class="sci-btn subtle small">
                <iconify-icon icon="mdi:view-sequential-outline" aria-hidden="true"></iconify-icon>
                <span>Layer Editor</span>
              </summary>
              <div class="designer-toolbar-dropdown-panel">
                <div class="designer-toolbar-dropdown-head">
                  <strong>Layer Reihenfolge</strong>
                  <small class="muted">Waehlen, ein- oder ausblenden, nach vorne oder hinten schieben.</small>
                </div>
                <div id="label-layer-list" class="label-layer-list"></div>
              </div>
            </details>
          </div>
        </div>
      </div>
      <div class="designer-context-strip">
        <span class="designer-context-item">Preset waehlen</span>
        <span class="designer-context-item">Inhalt aufbauen</span>
        <span class="designer-context-item">Pruefen und drucken</span>
      </div>
    </section>

    <div class="designer-workframe">
      <aside class="label-designer-side label-designer-side--workflow">
        <section class="label-settings-tabs">
          <nav class="label-tab-nav label-step-nav" aria-label="Designer Arbeitsschritte">
            <button type="button" class="label-tab-btn active" data-tab-target="document">
              <span class="label-step-index">1</span>
              <iconify-icon icon="mdi:file-document-outline" aria-hidden="true"></iconify-icon>
              <span class="label-step-copy"><strong>Layout</strong><small>Format und Drucker</small></span>
            </button>
            <button type="button" class="label-tab-btn" data-tab-target="layers">
              <span class="label-step-index">2</span>
              <iconify-icon icon="mdi:tag-outline" aria-hidden="true"></iconify-icon>
              <span class="label-step-copy"><strong>Felder</strong><small>Daten einfuegen</small></span>
            </button>
            <button type="button" class="label-tab-btn" data-tab-target="object">
              <span class="label-step-index">3</span>
              <iconify-icon icon="mdi:palette-outline" aria-hidden="true"></iconify-icon>
              <span class="label-step-copy"><strong>Design</strong><small>Objekte und Assets</small></span>
            </button>
            <button type="button" class="label-tab-btn" data-tab-target="assets">
              <span class="label-step-index">4</span>
              <iconify-icon icon="mdi:file-pdf-box" aria-hidden="true"></iconify-icon>
              <span class="label-step-copy"><strong>Ausgabe</strong><small>Vorschau und Preset</small></span>
            </button>
          </nav>

          <div class="label-tab-panel" data-tab-panel="object">
            <div class="designer-panel-intro designer-panel-intro--compact">
              <strong>3. Design</strong>
              <p class="muted">Auswahl anpassen, dann Reihenfolge und Assets pruefen.</p>
            </div>
            <nav class="designer-section-tabs" aria-label="Design Bereiche">
              <button type="button" class="designer-section-tab active" data-section-owner="object-form" data-section-target="core">Objekt</button>
              <button type="button" class="designer-section-tab" data-section-owner="object-form" data-section-target="style">Stil</button>
              <button type="button" class="designer-section-tab" data-section-owner="object-form" data-section-target="actions">Aktion</button>
            </nav>
            <section class="designer-step-card designer-step-card--selection">
              <div class="designer-step-card-head">
                <strong>Auswahl</strong>
                <span class="muted">Nur sichtbar, wenn ein Element markiert ist.</span>
              </div>
              <div id="label-object-empty" class="muted layer-panel-intro">Kein Objekt ausgewaehlt.</div>
              <form id="label-object-form" class="label-object-form is-hidden" autocomplete="off">
              <div class="designer-section-panel active" data-section-owner="object-form" data-section-panel="core">
              <section class="object-group">
                <div class="object-group-head">Objektbasis</div>
                <div class="object-group-grid">
                  <div class="sci-input-group span-4"><label>Aktiv</label><input id="obj-summary" class="sci-input" type="text" readonly></div>
                  <div class="sci-input-group"><label>Typ</label>
                    <select id="obj-type" class="sci-input">
                      <option value="text">text</option>
                      <option value="field">field</option>
                      <option value="rect">rect</option>
                      <option value="line">line</option>
                      <option value="progress">progress</option>
                      <option value="checkbox">checkbox</option>
                      <option value="circle">circle</option>
                      <option value="oval">oval</option>
                      <option value="logo">logo</option>
                      <option value="qr">qr</option>
                      <option value="barcode">barcode</option>
                    </select>
                  </div>
                  <div class="sci-input-group"><label>ID</label><input id="obj-id" class="sci-input" type="text"></div>
                </div>
              </section>

              <section class="object-group">
                <div class="object-group-head">Inhalt</div>
                <div class="object-group-grid">
                  <div class="sci-input-group span-4" data-object-types="text,barcode,qr,progress,checkbox"><label>Text / Wert</label><input id="obj-text" class="sci-input" type="text" placeholder="Freitext, Prozent oder Status"></div>
                  <div class="sci-input-group span-4" data-object-types="field,barcode,qr,progress,checkbox"><label>Field</label><input id="obj-field" class="sci-input" list="label-placeholder-list" type="text"></div>
                  <div class="sci-input-group span-4" data-object-types="logo"><label>Asset ID</label><select id="obj-asset-id" class="sci-input"></select></div>
                  <div class="sci-input-group" data-object-types="field"><label>Prefix</label><input id="obj-prefix" class="sci-input" type="text"></div>
                  <div class="sci-input-group" data-object-types="field"><label>Suffix</label><input id="obj-suffix" class="sci-input" type="text"></div>
                </div>
              </section>
              </div>

              <div class="designer-section-panel" data-section-owner="object-form" data-section-panel="style">
              <section class="object-group">
                <div class="object-group-head">Position &amp; Groesse</div>
                <div class="object-group-grid">
                  <div class="sci-input-group"><label>X</label><input id="obj-x" class="sci-input" type="number" step="0.1"></div>
                  <div class="sci-input-group"><label>Y</label><input id="obj-y" class="sci-input" type="number" step="0.1"></div>
                  <div class="sci-input-group"><label>W</label><input id="obj-w" class="sci-input" type="number" step="0.1"></div>
                  <div class="sci-input-group"><label>H</label><input id="obj-h" class="sci-input" type="number" step="0.1"></div>
                  <div class="sci-input-group"><label>Opacity</label><input id="obj-opacity" class="sci-input" type="number" min="0" max="1" step="0.01"></div>
                  <div class="sci-input-group" data-object-types="rect,line,progress,checkbox,circle,oval"><label>Stroke W</label><input id="obj-stroke-width" class="sci-input" type="number" min="0" step="0.1"></div>
                  <label class="check-line span-2"><input id="obj-visible" type="checkbox"> Sichtbar</label>
                </div>
              </section>

              <section class="object-group">
                <div class="object-group-head">Typografie &amp; Farben</div>
                <div class="object-group-grid">
                  <div class="sci-input-group span-4" data-object-types="text,field,progress,checkbox"><label>Schriftfamilie</label>
                    <select id="obj-font-family" class="sci-input">
                      <option value="Inter">Inter</option>
                      <option value="Noto Sans">Noto Sans</option>
                      <option value="Open Sans">Open Sans</option>
                      <option value="Public Sans">Public Sans</option>
                      <option value="Source Sans 3">Source Sans 3</option>
                      <option value="IBM Plex Sans">IBM Plex Sans</option>
                      <option value="Work Sans">Work Sans</option>
                      <option value="Atkinson Hyperlegible Next">Atkinson Hyperlegible Next</option>
                      <option value="Rajdhani">Rajdhani</option>
                      <option value="Orbitron">Orbitron</option>
                    </select>
                  </div>
                  <div class="sci-input-group" data-object-types="text,field,progress,checkbox"><label>Groesse</label><input id="obj-font-size" class="sci-input" type="number" min="6" step="0.1"></div>
                  <div class="sci-input-group" data-object-types="text,field,progress,checkbox"><label>Weight</label><select id="obj-font-weight" class="sci-input"><option value="normal">normal</option><option value="bold">bold</option></select></div>
                  <div class="sci-input-group span-2" data-object-types="text,field,progress,checkbox"><label>Align</label><select id="obj-align" class="sci-input"><option value="left">left</option><option value="center">center</option><option value="right">right</option></select></div>
                  <div class="sci-input-group span-2" data-object-types="text,field,barcode,progress,checkbox"><label>Color</label><div class="color-input-inline"><input id="obj-color-picker" class="color-picker compact" type="color" value="#ffffff"><input id="obj-color" class="sci-input" type="text"></div></div>
                  <div class="sci-input-group span-2" data-object-types="rect,progress,checkbox,circle,oval"><label>Fill</label><div class="color-input-inline"><input id="obj-fill-picker" class="color-picker compact" type="color" value="#000000"><input id="obj-fill" class="sci-input" type="text"></div></div>
                  <div class="sci-input-group span-2" data-object-types="rect,line,progress,checkbox,circle,oval"><label>Stroke</label><div class="color-input-inline"><input id="obj-stroke-picker" class="color-picker compact" type="color" value="#ffffff"><input id="obj-stroke" class="sci-input" type="text"></div></div>
                </div>
              </section>
              </div>

              <div class="designer-section-panel" data-section-owner="object-form" data-section-panel="actions">
              <section class="object-group">
                <div class="object-group-head">Live-Wert &amp; Aktionen</div>
                <div class="object-group-grid">
                  <div class="sci-input-group span-4">
                    <label>Aktueller Wert fuer gewaehlte Spule</label>
                    <textarea id="obj-resolved-value" class="sci-input" rows="2" readonly></textarea>
                  </div>
                  <div class="dialog-actions span-4">
                    <button type="button" class="sci-btn subtle small" data-object-duplicate><iconify-icon icon="mdi:content-copy" aria-hidden="true"></iconify-icon> Duplizieren</button>
                    <button type="button" class="sci-btn subtle small" data-object-delete><iconify-icon icon="mdi:delete-outline" aria-hidden="true"></iconify-icon> Loeschen</button>
                  </div>
                </div>
              </section>
              </div>
              </form>
            </section>
            <section class="designer-step-card designer-step-card--mode">
              <div class="designer-step-card-head">
                <strong>Assets &amp; Medien</strong>
                <span class="muted">Upload im Browser-Fenster und dann per Drag &amp; Drop auf das Label ziehen.</span>
              </div>
              <div class="designer-inline-actions designer-inline-actions--stack">
                <button type="button" class="sci-btn subtle small" data-asset-library-open><iconify-icon icon="mdi:image-outline" aria-hidden="true"></iconify-icon> Asset Browser oeffnen</button>
                <small class="muted">Logos, Bilder und SVGs lassen sich aus dem Browser direkt auf die Arbeitsflaeche ziehen.</small>
              </div>
            </section>
            <div class="workflow-step-actions">
              <button type="button" class="sci-btn subtle small" data-tab-target="layers"><iconify-icon icon="mdi:arrow-left" aria-hidden="true"></iconify-icon> Zurueck</button>
              <button type="button" class="sci-btn small" data-tab-target="assets"><iconify-icon icon="mdi:arrow-right" aria-hidden="true"></iconify-icon> Weiter</button>
            </div>
          </div>

          <div class="label-tab-panel" data-tab-panel="layers">
            <div class="designer-panel-intro designer-panel-intro--compact">
              <strong>2. Felder</strong>
              <p class="muted">Bausteine waehlen und die wichtigsten Daten zuerst setzen.</p>
            </div>
            <nav class="designer-section-tabs" aria-label="Felder Bereiche">
              <button type="button" class="designer-section-tab active" data-section-owner="layers" data-section-target="blocks">Bausteine</button>
              <button type="button" class="designer-section-tab" data-section-owner="layers" data-section-target="fields">Feldquellen</button>
            </nav>
            <div class="designer-section-panel active" data-section-owner="layers" data-section-panel="blocks">
            <section class="designer-step-card">
              <div class="designer-step-card-head">
                <strong>Schnellbausteine</strong>
                <span class="muted">Direkt auf die Flaeche legen.</span>
              </div>
              <div class="label-inline-tool-grid">
                <button type="button" class="sci-btn subtle small label-inline-tool" data-add-element="text" title="Freitext einfuegen" aria-label="Freitext einfuegen"><iconify-icon icon="mdi:format-text" aria-hidden="true"></iconify-icon><span>Text</span></button>
                <button type="button" class="sci-btn subtle small label-inline-tool" data-add-element="field" title="Leeres Datenfeld einfuegen" aria-label="Leeres Datenfeld einfuegen"><iconify-icon icon="mdi:tag-outline" aria-hidden="true"></iconify-icon><span>Feld</span></button>
                <button type="button" class="sci-btn subtle small label-inline-tool" data-add-element="qr" title="QR Code einfuegen" aria-label="QR Code einfuegen"><iconify-icon icon="mdi:qrcode" aria-hidden="true"></iconify-icon><span>QR</span></button>
                <button type="button" class="sci-btn subtle small label-inline-tool" data-add-element="barcode" title="Barcode einfuegen" aria-label="Barcode einfuegen"><iconify-icon icon="mdi:barcode" aria-hidden="true"></iconify-icon><span>Code</span></button>
                <button type="button" class="sci-btn subtle small label-inline-tool" data-add-element="progress" title="Progressbar einfuegen" aria-label="Progressbar einfuegen"><iconify-icon icon="mdi:chart-bell-curve-cumulative" aria-hidden="true"></iconify-icon><span>Progress</span></button>
                <button type="button" class="sci-btn subtle small label-inline-tool" data-add-element="checkbox" title="Checkbox einfuegen" aria-label="Checkbox einfuegen"><iconify-icon icon="mdi:checkbox-blank-outline" aria-hidden="true"></iconify-icon><span>Check</span></button>
                <button type="button" class="sci-btn subtle small label-inline-tool" data-add-element="circle" title="Kreis einfuegen" aria-label="Kreis einfuegen"><iconify-icon icon="mdi:stop-circle-outline" aria-hidden="true"></iconify-icon><span>Kreis</span></button>
                <button type="button" class="sci-btn subtle small label-inline-tool" data-add-element="oval" title="Oval einfuegen" aria-label="Oval einfuegen"><iconify-icon icon="mdi:shape-outline" aria-hidden="true"></iconify-icon><span>Oval</span></button>
              </div>
            </section>
            </div>
            <div class="designer-section-panel" data-section-owner="layers" data-section-panel="fields">
            <section class="label-placeholder-panel label-placeholder-panel--sidebar">
              <div class="label-placeholder-head">Haeufige Felder</div>
              <div class="label-placeholder-grid label-placeholder-grid--quick">
                {% for key in placeholder_keys %}
                {% if key in ['brand', 'material', 'material_type', 'finish_profile', 'color_group', 'warehouse_storage', 'remaining_label', 'sku_or_id', 'qr_code_data', 'is_matte', 'is_silk', 'is_glow', 'id'] %}
                <button type="button" class="sci-btn subtle small" data-add-field="{{ key }}" title="Feld {{ key }} einfuegen" aria-label="Feld {{ key }} einfuegen">{{ key }}</button>
                {% endif %}
                {% endfor %}
              </div>
            </section>
            <details class="designer-step-fold">
              <summary>Alle Felder anzeigen</summary>
              <div class="label-placeholder-grid">
                {% for key in placeholder_keys %}
                <button type="button" class="sci-btn subtle small" data-add-field="{{ key }}" title="Feld {{ key }} einfuegen" aria-label="Feld {{ key }} einfuegen">{{ key }}</button>
                {% endfor %}
              </div>
            </details>
            </div>
            <div class="workflow-step-actions">
              <button type="button" class="sci-btn subtle small" data-tab-target="document"><iconify-icon icon="mdi:arrow-left" aria-hidden="true"></iconify-icon> Zurueck</button>
              <button type="button" class="sci-btn small" data-tab-target="object"><iconify-icon icon="mdi:arrow-right" aria-hidden="true"></iconify-icon> Weiter</button>
            </div>
          </div>

          <div class="label-tab-panel" data-tab-panel="assets">
            <div class="designer-panel-intro designer-panel-intro--compact">
              <strong>4. Ausgabe</strong>
              <p class="muted">Vorschau pruefen, Preset sichern, Testdruck starten.</p>
            </div>
            <nav class="designer-section-tabs" aria-label="Ausgabe Bereiche">
              <button type="button" class="designer-section-tab active" data-section-owner="assets" data-section-target="preview">Vorschau</button>
              <button type="button" class="designer-section-tab" data-section-owner="assets" data-section-target="preset">Preset</button>
            </nav>
            <div class="designer-section-panel active" data-section-owner="assets" data-section-panel="preview">
            <section class="designer-step-card">
              <div class="designer-step-card-head">
                <strong>Ausgabe-Check</strong>
                <span class="muted">Drucker, Format und Preset.</span>
              </div>
              <div class="label-output-summary">
                <div class="label-output-summary-item"><span>Drucker</span><strong id="label-output-printer">Noch kein Profil</strong></div>
                <div class="label-output-summary-item"><span>Format</span><strong id="label-output-format">Noch kein Format</strong></div>
                <div class="label-output-summary-item"><span>Preset</span><strong id="label-output-preset">Kein Preset</strong></div>
              </div>
            </section>
            <section class="designer-step-card">
              <div class="designer-step-card-head">
                <strong>Testdaten & Vorschau</strong>
                <span class="muted">Live-Daten und Druckansicht.</span>
              </div>
              <div class="designer-output-actions">
                <div class="sci-input-group full">
                  <label>Test-Spule</label>
                  <input id="label-preview-spool" class="sci-input" list="label-preview-spool-list" value="{{ preview_spool_id }}" placeholder="Spulen-ID">
                </div>
                <div class="designer-output-button-row">
                  <button type="button" class="sci-btn small" data-label-template-preview><iconify-icon icon="mdi:eye-outline" aria-hidden="true"></iconify-icon> Aktualisieren</button>
                  <button type="button" class="sci-btn subtle small" data-work-tab="preview"><iconify-icon icon="mdi:eye-outline" aria-hidden="true"></iconify-icon> Vorschau</button>
                  <a id="label-designer-preview-open" class="sci-btn subtle small is-disabled" href="#" download="label-preview.svg" data-open-preview-svg><iconify-icon icon="mdi:file-code-outline" aria-hidden="true"></iconify-icon> SVG</a>
                  <a id="label-designer-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>
              </div>
            </section>
            </div>
            <div class="designer-section-panel" data-section-owner="assets" data-section-panel="preset">
            <section class="designer-step-card">
              <div class="designer-step-card-head">
                <strong>Als Preset sichern</strong>
                <span class="muted">Vorlage aus dem aktuellen Stand.</span>
              </div>
              <div class="designer-config-grid designer-config-grid--output">
                <div class="sci-input-group full">
                  <label>Preset Name</label>
                  <input id="label-preset-name" class="sci-input" type="text" placeholder="z.B. PETG Lagerlayout">
                </div>
                <div class="sci-input-group full">
                  <label>Preset Beschreibung</label>
                  <input id="label-preset-desc" class="sci-input" type="text" placeholder="Kurzer Einsatzzweck">
                </div>
                <div class="sci-actions label-designer-preset-actions label-designer-preset-actions--icons">
                  <button type="button" class="sci-btn small icon-only label-designer-icon-btn" data-label-preset-save title="Aktives Preset ueberschreiben" aria-label="Aktives Preset ueberschreiben" data-tooltip="Aktives Preset ueberschreiben"><iconify-icon icon="mdi:content-save-outline" aria-hidden="true"></iconify-icon><span class="sr-only">Aktives Preset ueberschreiben</span></button>
                  <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-label-preset-create title="Neues Preset aus diesem Layout erstellen" aria-label="Neues Preset aus diesem Layout erstellen" data-tooltip="Neues Preset aus diesem Layout erstellen"><iconify-icon icon="mdi:plus-box-outline" aria-hidden="true"></iconify-icon><span class="sr-only">Neues Preset aus diesem Layout erstellen</span></button>
                  <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-label-preset-default title="Aktives Preset als Standard setzen" aria-label="Aktives Preset als Standard setzen" data-tooltip="Aktives Preset als Standard setzen"><iconify-icon icon="mdi:star-outline" aria-hidden="true"></iconify-icon><span class="sr-only">Aktives Preset als Standard setzen</span></button>
                  <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-label-preset-delete title="Aktives Preset loeschen" aria-label="Aktives Preset loeschen" data-tooltip="Aktives Preset loeschen"><iconify-icon icon="mdi:delete-outline" aria-hidden="true"></iconify-icon><span class="sr-only">Aktives Preset loeschen</span></button>
                  <button type="button" class="sci-btn subtle small icon-only label-designer-icon-btn" data-label-template-save title="Layout dauerhaft speichern" aria-label="Layout dauerhaft speichern" data-tooltip="Layout dauerhaft speichern"><iconify-icon icon="mdi:content-save-outline" aria-hidden="true"></iconify-icon><span class="sr-only">Layout dauerhaft speichern</span></button>
                </div>
                <small id="label-preset-default-info" class="muted"></small>
                <small id="label-preset-description" class="muted">Waehle ein Preset und lade es als Ausgangspunkt in den Designer.</small>
              </div>
            </section>
            </div>
            <div class="workflow-step-actions">
              <button type="button" class="sci-btn subtle small" data-tab-target="object"><iconify-icon icon="mdi:arrow-left" aria-hidden="true"></iconify-icon> Zurueck</button>
            </div>
          </div>

          <div class="label-tab-panel active" data-tab-panel="document">
            <div class="designer-panel-intro designer-panel-intro--compact">
              <strong>1. Layout</strong>
              <p class="muted">Erst Arbeitsmodus und Druckerprofil waehlen, dann Format, Druckrand und freie Flaeche festlegen.</p>
            </div>
            <nav class="designer-section-tabs" aria-label="Layout Bereiche">
              <button type="button" class="designer-section-tab active" data-section-owner="document" data-section-target="profile">Profil</button>
              <button type="button" class="designer-section-tab" data-section-owner="document" data-section-target="geometry">Geometrie</button>
              <button type="button" class="designer-section-tab" data-section-owner="document" data-section-target="presets">Presets</button>
            </nav>
            <div class="designer-section-panel active" data-section-owner="document" data-section-panel="profile">
            <section class="designer-step-card">
              <div class="designer-step-card-head">
                <strong>Arbeitsmodus</strong>
                <span class="muted">Freies Layout fuer eigene Groessen oder gefuehrt nach Druckerprofil.</span>
              </div>
              <div class="label-mode-switch" role="tablist" aria-label="Layout Modus">
                <button type="button" class="label-mode-btn active" data-layout-mode="free">
                  <iconify-icon icon="mdi:draw" aria-hidden="true"></iconify-icon>
                  <span>Freies Layout</span>
                  <small>Canvas und Labelgroesse selbst bestimmen</small>
                </button>
                <button type="button" class="label-mode-btn" data-layout-mode="printer">
                  <iconify-icon icon="mdi:printer-3d-nozzle" aria-hidden="true"></iconify-icon>
                  <span>Preset nach Drucker</span>
                  <small>Nach Hersteller, Familie und Rollenformat filtern</small>
                </button>
              </div>
            </section>

            <section class="designer-step-card designer-step-card--printer" id="label-printer-profile-card">
              <div class="designer-step-card-head">
                <strong>Druckerprofil</strong>
                <span class="muted">Marke und Familie waehlen, dann ein passendes Rollenformat laden.</span>
              </div>
              <div class="designer-config-grid designer-config-grid--printer">
                <div class="sci-input-group full">
                  <label>Hersteller</label>
                  <div id="label-printer-brand-list" class="label-brand-pills" aria-label="Drucker Hersteller"></div>
                </div>
                <div class="sci-input-group full">
                  <label>Druckerfamilie</label>
                  <select id="label-printer-family" class="sci-input"></select>
                </div>
                <div class="sci-input-group full">
                  <label>Passende Formate</label>
                  <div id="label-format-presets" class="label-format-presets"></div>
                </div>
              </div>
            </section>
            </div>

            <div class="designer-section-panel" data-section-owner="document" data-section-panel="geometry">
            <section class="designer-step-card designer-step-card--geometry">
              <div class="designer-step-card-head">
                <strong>Labelgeometrie</strong>
                <span class="muted">Format, Innenrand und Canvas bestimmen den sichtbaren druckbaren Bereich.</span>
              </div>
              <div class="designer-config-grid designer-config-grid--compact section-gap">
                <div class="sci-input-group full"><label>Template Name</label><input id="label-template-name" class="sci-input" type="text" value="{{ template_config.name }}"></div>
                <div class="sci-input-group"><label>Label B (mm)</label><input id="label-pdf-width" class="sci-input" type="number" min="10" max="200" step="0.1" value="{{ template_config.pdf.label_width_mm }}"></div>
                <div class="sci-input-group"><label>Label H (mm)</label><input id="label-pdf-height" class="sci-input" type="number" min="10" max="200" step="0.1" value="{{ template_config.pdf.label_height_mm }}"></div>
                <div class="sci-input-group"><label>Druckrand innen</label><input id="label-safe-margin" class="sci-input" type="number" min="0" max="12" step="0.1" value="{{ template_config.pdf.safe_margin_mm or 2 }}"></div>
                <div class="sci-input-group"><label>Canvas W</label><input id="label-canvas-width" class="sci-input" type="number" min="240" max="2400" value="{{ template_config.canvas.width }}"></div>
                <div class="sci-input-group"><label>Canvas H</label><input id="label-canvas-height" class="sci-input" type="number" min="140" max="1800" value="{{ template_config.canvas.height }}"></div>
                <div class="sci-input-group"><label>Radius</label><input id="label-canvas-radius" class="sci-input" type="number" min="0" max="100" value="{{ template_config.canvas.radius }}"></div>
                <div class="sci-input-group"><label>Label Abstand</label><input id="label-pdf-gap" class="sci-input" type="number" min="0" max="20" step="0.1" value="{{ template_config.pdf.gap_mm }}"></div>
              </div>
              <div class="designer-card-note">
                <iconify-icon icon="mdi:ruler-square" aria-hidden="true"></iconify-icon>
                <span>Der druckbare Bereich wird auf dem Label als innere Sicherheitszone eingeblendet.</span>
              </div>
            </section>

            <details class="designer-step-fold">
              <summary>Mehr Layout- und Druckoptionen</summary>
              <div class="designer-config-grid designer-config-grid--compact section-gap">
              <div class="sci-input-group"><label>Background</label><div class="color-input-inline"><input id="label-canvas-background-picker" class="color-picker compact" type="color" value="{{ template_config.canvas.background }}"><input id="label-canvas-background" class="sci-input" type="text" value="{{ template_config.canvas.background }}"></div></div>
              <div class="sci-input-group"><label>Border</label><div class="color-input-inline"><input id="label-canvas-stroke-picker" class="color-picker compact" type="color" value="{{ template_config.canvas.stroke }}"><input id="label-canvas-stroke" class="sci-input" type="text" value="{{ template_config.canvas.stroke }}"></div></div>
              <div class="sci-input-group"><label>Border Opacity</label><input id="label-canvas-stroke-opacity" class="sci-input" type="number" min="0" max="1" step="0.01" value="{{ template_config.canvas.stroke_opacity }}"></div>
              <div class="sci-input-group"><label>Seitenrand PDF</label><input id="label-pdf-margin" class="sci-input" type="number" min="2" max="25" step="0.1" value="{{ template_config.pdf.margin_mm }}"></div>
              <label class="check-line full"><input id="label-snap-toggle" type="checkbox" checked> Legacy: Snap to grid (synchronisiert mit Ribbon)</label>
              </div>
            </details>
            </div>
            <div class="designer-section-panel" data-section-owner="document" data-section-panel="presets">
            <section class="designer-preset-browser designer-preset-browser--compact">
              <div class="designer-preset-browser-head">
                <div>
                  <strong>Designer Presets</strong>
                  <p class="muted">Komplette Layoutvorlagen fuer Wiederverwendung laden und spaeter aktualisieren.</p>
                </div>
                <div class="designer-preset-browser-actions">
                  <div class="designer-preset-browser-status">
                    <span class="designer-status-label">Ausgewaehlt</span>
                    <strong id="label-active-preset-name">Kein Preset</strong>
                  </div>
                  <button type="button" class="sci-btn subtle small" data-preset-modal-open>
                    <iconify-icon icon="mdi:view-grid-outline" aria-hidden="true"></iconify-icon>
                    Browser
                  </button>
                </div>
              </div>
              <select id="label-preset-select" class="sci-input" hidden aria-hidden="true">
                {% for preset in label_presets %}
                <option value="{{ preset.key }}">{{ preset.name }}</option>
                {% endfor %}
              </select>
              <div id="label-preset-cards" class="label-preset-cards"></div>
            </section>
            </div>
            <div class="workflow-step-actions">
              <button type="button" class="sci-btn small" data-tab-target="layers"><iconify-icon icon="mdi:arrow-right" aria-hidden="true"></iconify-icon> Weiter</button>
            </div>
          </div>
        </section>
      </aside>

      <section class="designer-work-area">
        <nav class="designer-work-tabs" aria-label="Designer Arbeitsansichten">
          <button type="button" class="work-tab-btn active" data-work-tab="design">Editor</button>
          <button type="button" class="work-tab-btn" data-work-tab="preview">Druckvorschau</button>
        </nav>

        <section class="designer-work-panel active" data-work-panel="design">
          <div class="label-stage-shell">
            <div class="label-stage-head">
              <div class="designer-stage-caption">
                <strong>Arbeitsflaeche</strong>
                <div class="muted">Drag & Drop direkt auf dem Canvas, Pfeiltasten fuer exakte Positionierung.</div>
              </div>
              <div class="designer-stage-meta">
                <div class="designer-stage-meta-item">
                  <span>Profil</span>
                  <strong id="label-stage-format-summary">Freies Layout</strong>
                </div>
                <div class="designer-stage-meta-item">
                  <span>Druckrand</span>
                  <strong id="label-safe-zone-summary">0 mm</strong>
                </div>
              </div>
            </div>
            <div class="label-stage-scroll">
              <div id="label-stage-canvas" class="label-stage-canvas">
                <div id="label-stage" class="label-stage" tabindex="0" aria-label="Label Stage"></div>
              </div>
            </div>
          </div>
        </section>

        <section class="designer-work-panel" data-work-panel="preview">
          <div class="preview-panel-head">
            <strong>Weisse Druckvorschau</strong>
            <div class="muted">Die Vorschau bleibt bewusst auf heller Flaeche, damit Aenderungen wie in Inkscape sauber beurteilbar sind.</div>
          </div>
          <iframe id="label-designer-preview" class="label-preview-frame" title="Label Designer Preview" scrolling="no"></iframe>
        </section>
      </section>
    </div>

    <datalist id="label-preview-spool-list">
      {% for spool in spools %}
      <option value="{{ spool.id }}">{{ spool.id }} | {{ spool.brand }} | {{ spool.material }} | {{ spool.color_name }}</option>
      {% endfor %}
    </datalist>

    <datalist id="label-placeholder-list">
      {% for key in placeholder_keys %}
      <option value="{{ key }}"></option>
      {% endfor %}
    </datalist>

    <div id="label-asset-modal" class="modal hidden" aria-hidden="true">
      <div class="modal-backdrop" data-asset-modal-close></div>
      <div class="modal-card modal-card--label-assets" role="dialog" aria-modal="true" aria-labelledby="label-asset-modal-title">
        <div class="modal-head">
          <div>
            <div id="label-asset-modal-title" class="modal-title">Asset Browser</div>
            <p class="muted">Assets hochladen, filtern und per Drag &amp; Drop auf das Label ziehen.</p>
          </div>
          <button type="button" class="modal-close-icon" data-asset-modal-close aria-label="Asset Browser schliessen">
            <iconify-icon icon="mdi:close-circle-outline" aria-hidden="true"></iconify-icon>
          </button>
        </div>
        <div class="label-asset-modal-grid">
          <div class="sci-input-group full-width">
            <label>Suche</label>
            <input id="label-asset-search" class="sci-input" type="text" placeholder="Dateiname oder Typ">
          </div>
          <form id="label-asset-upload-form" class="assets-upload-inline assets-upload-inline--modal" enctype="multipart/form-data">
            <div class="sci-input-group">
              <label>Datei</label>
              <input class="sci-input" type="file" name="asset" accept="image/*,.svg,.png,.jpg,.jpeg,.webp" required>
            </div>
            <div class="dialog-actions">
              <button class="sci-btn small" type="submit"><iconify-icon icon="mdi:upload-outline" aria-hidden="true"></iconify-icon> Upload</button>
            </div>
          </form>
        </div>
        <div class="designer-card-note designer-card-note--modal">
          <iconify-icon icon="mdi:drag-vertical" aria-hidden="true"></iconify-icon>
          <span>Ziehe ein Asset direkt auf die Arbeitsflaeche oder nutze den Platzieren-Button in der Karte.</span>
        </div>
        <div id="label-asset-list" class="label-asset-list section-gap"></div>
      </div>
    </div>

    <div id="label-preset-modal" class="modal hidden" aria-hidden="true">
      <div class="modal-backdrop" data-preset-modal-close></div>
      <div class="modal-card modal-card--label-presets" role="dialog" aria-modal="true" aria-labelledby="label-preset-modal-title">
        <div class="modal-head">
          <div>
            <div id="label-preset-modal-title" class="modal-title">Preset Browser</div>
            <p class="muted">Alle System- und Custom-Presets mit visueller Vorschau, Schnellladen und schneller Designer-Bearbeitung.</p>
          </div>
          <button type="button" class="modal-close-icon" data-preset-modal-close aria-label="Preset Browser schliessen">
            <iconify-icon icon="mdi:close-circle-outline" aria-hidden="true"></iconify-icon>
          </button>
        </div>
        <div class="label-preset-modal-head">
          <div class="designer-card-note designer-card-note--modal">
            <iconify-icon icon="mdi:eye-outline" aria-hidden="true"></iconify-icon>
            <span>Die Vorschau nutzt die aktuelle Test-Spule aus dem Designer, damit du Presets direkt realistisch vergleichen kannst.</span>
          </div>
          <div class="designer-preset-browser-status">
            <span class="designer-status-label">Aktiv</span>
            <strong id="label-preset-modal-active-name">Kein Preset</strong>
          </div>
        </div>
        <div id="label-preset-modal-grid" class="label-preset-modal-grid section-gap"></div>
      </div>
    </div>
  </article>
</section>
{% endblock %}
{% block data_blocks %}
<script id="label-template-json" type="application/json">{{ template_config|tojson }}</script>
<script id="label-template-default-json" type="application/json">{{ default_template|tojson }}</script>
<script id="label-assets-json" type="application/json">{{ assets|tojson }}</script>
<script id="label-designer-spools-json" type="application/json">{{ spools_json|tojson }}</script>
<script id="label-presets-json" type="application/json">{{ label_presets|tojson }}</script>
<script id="label-default-preset-json" type="application/json">{{ {'key': default_preset_key}|tojson }}</script>
<script id="label-requested-preset-json" type="application/json">{{ {'key': requested_preset_key, 'load': load_requested_preset}|tojson }}</script>
{% endblock %}