{% extends "base.html" %}
{% block title %}Designer etichetă · {{ template.name }}{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/designer.css') }}">
{% endblock %}

{% block content %}
<div class="designer" id="designer"
     data-save-url="{{ url_for('label_templates.designer_save', template_id=template.id) }}"
     data-qr-url="{{ url_for('label_templates.designer_qr') }}">

  <header class="designer-head">
    <div class="designer-head-main">
      <form method="post" class="rename-form"
            action="{{ url_for('label_templates.rename', template_id=template.id) }}">
        <input type="hidden" name="next" value="designer">
        <input id="template-name" name="name" type="text" maxlength="80" required
               value="{{ template.name }}" class="title-input"
               aria-label="Nume șablon" title="Numele șablonului">
        <button class="btn ghost" type="submit">Redenumește</button>
      </form>
      <p class="subtitle">
        Trage elementele pe etichetă. Previzualizarea folosește date demo; la tipărire se folosesc datele reale.
      </p>
    </div>
    <div class="designer-actions">
      <span id="designer-state" class="badge off">nesalvat</span>
      <a class="btn ghost" target="_blank" rel="noopener"
         href="{{ url_for('label_templates.preview', template_id=template.id) }}">Previzualizare</a>
      <button class="btn primary" type="button" id="designer-save">Salvează</button>
    </div>
  </header>

  <div class="designer-toolbar">
    <div class="tool-group tool-grow">
      <h2>Adaugă element</h2>
      <div class="palette">
        <button class="palette-btn" type="button" data-add-picker="variable">Câmp variabil</button>
        <button class="palette-btn" type="button" data-add="text">Text</button>
        <button class="palette-btn" type="button" data-add="qr">Cod QR</button>
        <button class="palette-btn" type="button" data-add="line">Linie</button>
        <button class="palette-btn" type="button" data-add="image">Imagine</button>
      </div>
    </div>

    <div class="tool-group">
      <h2>Etichetă (mm)</h2>
      <div class="tool-fields">
        <div class="field">
          <label for="label-width">Lățime</label>
          <input id="label-width" type="number" min="10" max="500" step="0.5">
        </div>
        <div class="field">
          <label for="label-height">Înălțime</label>
          <input id="label-height" type="number" min="10" max="500" step="0.5">
        </div>
      </div>
    </div>

    <div class="tool-group">
      <h2>Zoom</h2>
      <input id="designer-zoom" class="zoom-slider" type="range" min="3" max="14" step="0.5">
    </div>

    <div class="tool-group tool-safe">
      <h2>Zonă sigură</h2>
      <label class="check"><input id="safe-toggle" type="checkbox" checked>
        Contur roșu</label>
      <p id="safe-hint" class="safe-hint muted">Zona sigură: {{ safe_mm }} mm de la fiecare margine.</p>
      <button id="safe-arrange" class="btn warn hidden" type="button"
              title="Mută elementele care ies din zona sigură în interiorul conturului roșu">
        Rearanjează în zona sigură
      </button>
    </div>
  </div>

  <div class="designer-grid">
    <aside class="designer-panel designer-elements">
      <h2>Elemente pe etichetă <span id="block-count" class="count">0</span></h2>
      <ul id="block-list" class="block-list"></ul>

      <form method="post" class="designer-clear"
            action="{{ url_for('label_templates.designer_reset', template_id=template.id) }}"
            onsubmit="return confirm('Resetezi designul la varianta implicită? Modificările nesalvate se pierd.');">
        <button class="link danger" type="submit">Resetează designul</button>
      </form>
    </aside>

    <section class="designer-canvas-wrap">
      <div class="canvas-scroll">
        <div class="canvas-stage">
          <div id="canvas" class="design-canvas">
            <div class="canvas-grid"></div>
            <div class="canvas-blocks" id="canvas-blocks"></div>
            <div class="canvas-safe" id="canvas-safe"><span>zonă sigură</span></div>
          </div>
        </div>
      </div>
      <p class="muted small">
        Trage de element pentru mutare, de colțul din dreapta-jos pentru redimensionare.
        Săgețile mută cu 0,5 mm (Shift: 2 mm). Delete șterge elementul.
      </p>
      <p class="muted small">
        Recomandat: păstrează toate elementele în interiorul conturului roșu — imprimantele
        termice nu pot tipări până la marginea hârtiei.
      </p>
    </section>

    <aside class="designer-panel" id="props">
      <h2>Proprietăți</h2>
      <p class="muted small" id="props-empty">Selectează un element.</p>
      <div id="props-body" class="hidden"></div>
    </aside>
  </div>

  <div id="field-picker" class="picker hidden" role="dialog" aria-modal="true"
       aria-labelledby="field-picker-title">
    <div class="picker-backdrop" data-picker-close></div>
    <div class="picker-card">
      <header class="picker-head">
        <h2 id="field-picker-title">Alege câmpul variabil</h2>
        <button class="picker-close" type="button" data-picker-close aria-label="Închide">×</button>
      </header>
      <input id="field-picker-search" type="search" autocomplete="off"
             placeholder="Caută un câmp…">
      <ul id="field-picker-list" class="picker-list"></ul>
      <footer class="picker-foot">
        <span class="muted small" id="field-picker-hint">Click pe un câmp pentru a-l adăuga pe etichetă.</span>
        <span class="picker-foot-actions">
          <a class="link" href="{{ url_for('fields.index') }}">Gestionează câmpurile</a>
          <button class="btn primary hidden" type="button" id="field-picker-confirm">Adaugă</button>
          <button class="btn ghost" type="button" data-picker-close>Anulează</button>
        </span>
      </footer>
    </div>
  </div>

  <div id="toast" class="toast" role="status" aria-live="polite"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
  window.DESIGNER = {
    design: {{ design|tojson }},
    fields: {{ fields|tojson }},
    demoFields: {{ demo_fields|tojson }},
    demoItems: {{ demo_items|tojson }},
    safeMm: {{ safe_mm }}
  };
</script>
<script src="{{ url_for('static', filename='js/designer.js') }}"></script>
{% endblock %}