{% extends "basis.html" %}{% import "etiketten_bogen.html" as eb_ %}{% block titel %}{{ et.name }} – Timbre{% endblock %}{% block koerperklasse %} class="breit"{% endblock %}{% block hauptklasse %} class="breit"{% endblock %}{% block inhalt %}
{# Labeldrucker (09.11.2026, timbre_api/etiketten_web.py), Mockup B „Ein Blick“: Auswahl links, Bogen in der Mitte, Format + Inhalt
   rechts. Alles ist EIN GET-Formular – ohne JavaScript schickt jede Änderung ab (Startfeld = Knopf im Bogen, „Vorschau aktualisieren“
   im noscript). static/etiketten.js schickt bei jeder Änderung selbst ab und tauscht nur die Teile [data-teil]. Eigenes CSS
   (static/etiketten.css, static/etiketten_bogen.css aus werkzeuge/tokens_etiketten.py) – nur hier. Texte aus texte_etiketten.py. #}
<link rel="stylesheet" href="/static/etiketten.css">
<link rel="stylesheet" href="/static/etiketten_bogen.css">
<form class="et" id="et" action="/regal/etiketten" method="get" data-druck="/regal/etiketten/druck">
  <input type="hidden" name="o" value="1">
  <input type="hidden" name="start" value="{{ a.start }}" id="et-start">
  <header class="et-kopf">
    <p class="eyebrow">{{ et.eyebrow }}</p>
    <h1 class="et-titel">{{ et.name }}</h1>
    <p class="et-satz">{{ et.satz }}</p>
  </header>
  <div class="et-raum">
    {# ---------- links: Auswahl ---------- #}
    <section aria-labelledby="et-auswahl-h">
      <h2 id="et-auswahl-h">{{ et.auswahl }}</h2>
      <div data-teil="auswahl" id="et-teil-auswahl">
      {% if a.alle %}
        {% if a.listen %}<div class="et-tl">
          <label for="et-tl">{{ et.tl_label }}</label>
          <select name="tl" id="et-tl"><option value="">{{ et.tl_keine }}</option>
            {% for l in a.listen %}<option value="{{ l.id }}"{% if l.id == a.tl %} selected{% endif %}>{{ l.name }} · {{ l.anzahl }}</option>{% endfor %}</select>
          {% if a.tl_eintrag %}<button type="submit" class="knopf klein" name="alle_tl" value="1" id="et-alle-tl">{{ et.alle_aus_tl | replace('{liste}', a.tl_eintrag.name) }}</button>{% endif %}
        </div>{% endif %}
        <div class="et-reihe"><button type="submit" class="knopf klein" name="wahl" value="alle" id="et-wahl-alle">{{ et.alle }}</button>
          <button type="submit" class="knopf klein" name="wahl" value="keine" id="et-wahl-keine">{{ et.keine }}</button></div>
        <p class="klein leise">{{ et.einzeln }}</p>
        <ul class="et-liste">
        {% for p in a.alle %}<li><label><input type="checkbox" name="p" value="{{ p.id }}" id="et-p-{{ p.id }}"{% if p.id in a.gewaehlt %} checked{% endif %}>
          <span><b>{{ p.artist }}{% if p.artist and p.titel %} – {% endif %}{{ p.titel }}</b>
          <small>{{ tracks_text[p.id] }}{% if p.fach %} · {{ p.fach }}{% endif %}{% if a.tl and p.id not in a.in_tl %} · {{ et.nicht_in_tl }}{% endif %}</small></span></label></li>{% endfor %}
        </ul>
      {% else %}
        <div class="et-leer"><h3>{{ et.leer_titel }}</h3><p>{{ et.leer_text }}</p></div>
      {% endif %}
      </div>
    </section>

    {# ---------- Mitte: Bogen (Vorschau maßstäblich, Startfeld antippen) ---------- #}
    <section class="et-mitte" aria-labelledby="et-vorschau-h">
      <h2 class="unsichtbar" id="et-vorschau-h">{{ et.vorschau }}</h2>
      <div data-teil="vorschau" id="et-teil-vorschau">
        <div class="et-massstab"><span>{% if ist_beispiel %}<span class="et-beispiel">{{ et.beispiel }}</span>{% else %}<b>{{ zahl }}</b>{% endif %}</span><span>{{ fa.kompat }}</span></div>
        <div class="et-halter">
          {% for b in vorschau %}
            {% if vorschau_n > 1 %}<p class="et-bogenname">{{ et.bogen_von | replace('{i}', b.nr | string) | replace('{n}', vorschau_n | string) }}</p>{% endif %}
            {{ eb_.bogen(b, fa, et, interaktiv=true, start=a.start) }}
          {% endfor %}
          {% if weitere %}<p class="et-bogenname">{{ weitere }}</p>{% endif %}
        </div>
        <p class="klein leise">{{ et.start_hinweis }} <b>{{ et.start_jetzt | replace('{nr}', a.start | string) }}</b></p>
      </div>
    </section>

    {# ---------- rechts: Format, Inhalt, Drucken ---------- #}
    <section aria-labelledby="et-format-h">
      <h2 class="et-h3" id="et-format-h">{{ et.format }}</h2>
      <div class="et-formate" data-teil="formate" id="et-teil-formate">
        {% for k, f in formate.items() %}<label class="et-format">
          <input type="radio" class="unsichtbar" name="format" value="{{ k }}" id="et-format-{{ k }}"{% if k == a.format %} checked{% endif %}>
          <span class="et-musterplatz et-f-{{ k }}" aria-hidden="true"><span class="et-feld{% if f.rund %} et-rund{% endif %}">{{ eb_.etikett(muster[k]) }}</span></span>
          <span>{% if k == vorschlag %}<span class="et-vor">{{ et.vorschlag }}</span>{% endif %}<b>{{ f.name }}</b>
            <small>{{ f.kompat }}</small><small>{{ f.kurz }}</small>
            {% if not f.belegt %}<small class="et-unbelegt">{{ et.probedruck_kurz }}</small>{% endif %}</span>
        </label>{% endfor %}
      </div>
      <h2 class="et-h3">{{ et.inhalt }}</h2>
      <div class="et-opts" data-teil="optionen" id="et-teil-optionen">
        <label class="et-opt dj-schalter"><input type="checkbox" role="switch" name="kopf" value="1" id="et-o-kopf"{% if a.inhalt.kopf %} checked{% endif %}><span class="dj-taste" aria-hidden="true"><i class="dj-led"></i>{{ et.taste_kopf }}</span><span class="dj-name">{{ et.opt_kopf }}</span></label>
        <label class="et-opt dj-schalter"><input type="checkbox" role="switch" name="tracks" value="1" id="et-o-tracks"{% if a.inhalt.tracks %} checked{% endif %}><span class="dj-taste" aria-hidden="true"><i class="dj-led"></i>{{ et.taste_tracks }}</span><span class="dj-name">{{ et.opt_tracks }}</span></label>
        <label class="et-opt dj-schalter"><input type="checkbox" role="switch" name="fach" value="1" id="et-o-fach"{% if a.inhalt.fach %} checked{% endif %}><span class="dj-taste" aria-hidden="true"><i class="dj-led"></i>{{ et.taste_fach }}</span><span class="dj-name">{{ et.opt_fach }}</span></label>
        <label class="et-opt dj-schalter"{% if not fa.qr %} aria-disabled="true"{% endif %}><input type="checkbox" role="switch" name="qr" value="1" id="et-o-qr"{% if a.inhalt.qr %} checked{% endif %}><span class="dj-taste" aria-hidden="true"><i class="dj-led"></i>{{ et.taste_qr }}</span><span class="dj-name">{{ et.opt_qr }}<small class="leise">{{ et.qr_hinweis if fa.qr else et.qr_nur_rechteck }}</small></span></label>
      </div>
      <noscript><button type="submit" class="knopf">{{ et.aktualisieren }}</button></noscript>
      <div class="et-fuss" data-teil="fuss" id="et-teil-fuss">
        <button type="submit" class="knopf voll gross" id="et-drucken" formaction="/regal/etiketten/druck" formtarget="_blank"{% if ist_beispiel %} disabled aria-describedby="et-keine"{% endif %}>{{ et.drucken }}</button>
        {% if ist_beispiel %}<p class="klein leise" id="et-keine">{{ et.keine_auswahl }}</p>{% endif %}
        <p class="et-hinweis">{{ et.groesse }} {{ et.probe_allg }}</p>
        {% if not fa.belegt %}<p class="et-hinweis" data-art="warn">{{ et.probedruck }}</p>{% endif %}
      </div>
      <p class="et-status" id="et-status" role="status" aria-live="polite"></p>
    </section>
  </div>
</form>
<script type="application/json" id="et-t">{{ dict(laedt=et.laedt, fehler=et.fehler) | tojson }}</script>
<script src="/static/etiketten.js" defer></script>
{% endblock %}