{% extends 'base.html' %}
{% block title %}Label Designer{% endblock %}

{% block head_extra %}
<link rel="modulepreload" href="{{ url_for('static', filename='js/labels_designer.js') }}">
{% endblock %}

{% block body_class %}page-label-designer-modern {% if popup_mode %}is-popup{% endif %}{% endblock %}

{% block content %}
<section class="designer-container">
  
  <header class="designer-topbar">
    <div class="topbar-left">
      <h2 class="sci-h3">ThermalLabel <span class="muted">Editor</span></h2>
    </div>

    <div class="topbar-center">
      <div class="sci-input-group compact-inline">
        <iconify-icon icon="mdi:database-search-outline"></iconify-icon>
        <input id="label-preview-spool" class="sci-input" list="label-preview-spool-list" 
               value="{{ preview_spool_id }}" placeholder="Vorschau-Spule wählen...">
      </div>
    </div>

    <div class="topbar-right">
      <button type="button" class="sci-btn subtle" data-label-template-reset title="Zurücksetzen">
        <iconify-icon icon="mdi:restore"></iconify-icon>
      </button>
      <button type="button" class="sci-btn primary" data-label-template-save>
        <iconify-icon icon="mdi:content-save"></iconify-icon> Speichern
      </button>
      {% if not popup_mode %}
      <button type="button" class="sci-btn subtle" data-open-designer-window 
              data-designer-url="{{ url_for('web.labels_designer', popup='1') }}">
        <iconify-icon icon="mdi:open-in-new"></iconify-icon>
      </button>
      {% endif %}
    </div>
  </header>

  <main class="designer-workspace">
    
    <aside class="designer-tools-aside">
      <div class="tool-group">
        <span class="tool-group-label">Hinzufügen</span>
        <button class="tool-btn" data-add-element="text" title="Text"><iconify-icon icon="mdi:format-text"></iconify-icon></button>
        <button class="tool-btn" data-add-element="field" title="Feld"><iconify-icon icon="mdi:tag-outline"></iconify-icon></button>
        <button class="tool-btn" data-add-element="qr" title="QR Code"><iconify-icon icon="mdi:qrcode"></iconify-icon></button>
        <button class="tool-btn" data-add-element="barcode" title="Barcode"><iconify-icon icon="mdi:barcode"></iconify-icon></button>
        <button class="tool-btn" data-add-element="rect" title="Rechteck"><iconify-icon icon="mdi:square-outline"></iconify-icon></button>
        <button class="tool-btn" data-add-element="line" title="Linie"><iconify-icon icon="mdi:minus"></iconify-icon></button>
        <button class="tool-btn" data-add-element="logo" title="Bild"><iconify-icon icon="mdi:image-outline"></iconify-icon></button>
      </div>
      
      <div class="tool-sep"></div>

      <div class="tool-group">
        <span class="tool-group-label">Ansicht</span>
        <button class="tool-btn" data-stage-zoom="in"><iconify-icon icon="mdi:plus"></iconify-icon></button>
        <button class="tool-btn" data-stage-zoom="reset">1:1</button>
        <button class="tool-btn" data-stage-zoom="out"><iconify-icon icon="mdi:minus"></iconify-icon></button>
      </div>
    </aside>

    <section class="designer-canvas-area">
      <nav class="canvas-view-tabs">
        <button class="view-tab active" data-work-tab="design">Konstruktion</button>
        <button class="view-tab" data-work-tab="preview">Live-Vorschau</button>
      </nav>

      <div class="canvas-scroller">
        <div class="work-panel active" data-work-panel="design">
          <div id="label-stage" class="label-stage shadow-lg" tabindex="0"></div>
        </div>
        <div class="work-panel" data-work-panel="preview">
          <iframe id="label-designer-preview" class="label-preview-frame"></iframe>
        </div>
      </div>
    </section>

    <aside class="designer-inspector">
      <nav class="inspector-tabs">
        <button class="tab-btn active" data-tab-target="object"><iconify-icon icon="mdi:tune"></iconify-icon></button>
        <button class="tab-btn" data-tab-target="layers"><iconify-icon icon="mdi:layers"></iconify-icon></button>
        <button class="tab-btn" data-tab-target="document"><iconify-icon icon="mdi:file-cog"></iconify-icon></button>
        <button class="tab-btn" data-tab-target="assets"><iconify-icon icon="mdi:folder-image"></iconify-icon></button>
      </nav>

      <div class="inspector-content">
        <div class="tab-panel active" data-tab-panel="object">
          <div id="label-object-empty" class="muted-notice">Wähle ein Element aus</div>
          <form id="label-object-form" class="is-hidden">
             <div class="inspector-grid">
                <div class="grid-full"><label>ID</label><input id="obj-id" class="sci-input"></div>
                <div class="grid-full"><label>Inhalt</label><input id="obj-text" class="sci-input"></div>
                </div>
             <div class="inspector-actions">
               <button type="button" class="sci-btn subtle full" data-object-duplicate>Duplizieren</button>
               <button type="button" class="sci-btn danger-subtle full" data-object-delete>Löschen</button>
             </div>
          </form>
        </div>

        <div class="tab-panel" data-tab-panel="layers">
          <div id="label-layer-list"></div>
        </div>

        <div class="tab-panel" data-tab-panel="document">
           </div>
      </div>
    </aside>

  </main>
</section>

<script id="label-template-json" type="application/json">{{ template_config|tojson }}</script>
<script id="label-assets-json" type="application/json">{{ assets|tojson }}</script>
{% endblock %}