{% extends "basis.html" %}{% set seiten_module = ("dig",) if modus in ('ansehen', 'export', 'erzeugen', 'regeln') else () %}{% block titel %}{{ (liste.name ~ ' – ' if liste else '') ~ t.playlists.titel }} – Timbre{% endblock %}{% block koerperklasse %} class="breit plweit"{% endblock %}{% block hauptklasse %} class="breit"{% endblock %}{% block weich %} data-weich{% endblock %}{% block inhalt %}
{% set p = t.playlists %}{% set x = t.tagliste %}{% set g = t.generator %}
{# Set bauen (23.10.2026): Menü „+ Playlist ▾“ (Set bauen · Intelligente Playlist · Leere Playlist). Ohne Skript verborgen wie
   früher „+ Neue Playlist“; setbau.js öffnet und schließt es (Enter, ↑/↓, Esc mit Fokus zurück). #}
{% macro plusmenue(ort) %}<div class="pg-plus" data-pg-plus hidden>
  <button type="button" class="knopf pg-plus-knopf" aria-expanded="false" aria-haspopup="true" aria-controls="pg-menue-{{ ort }}"><span>{{ g.plus }}</span><span class="pg-pfeil" aria-hidden="true">▾</span></button>
  <ul class="pg-menue" id="pg-menue-{{ ort }}" aria-label="{{ g.plus_label }}" hidden>
    <li><a class="pg-menue-p" href="/playlists/neu"><b>{{ g.menue.erzeugen }}</b><span>{{ g.menue_kurz.erzeugen }}</span></a></li>
    <li><a class="pg-menue-p" href="/playlists/neu/regeln"><b>{{ g.menue.regeln }}</b><span>{{ g.menue_kurz.regeln }}</span></a></li>
    <li><button type="button" class="pg-menue-p" data-tl-neu><b>{{ g.menue.leer }}</b><span>{{ g.menue_kurz.leer }}</span></button></li>
  </ul></div>{% endmacro %}
{% macro zeichen(l) %}{% if l.art and l.art != 'fest' %}<svg class="pg-ikon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M8 1.5l1.6 4.1 4.4.3-3.4 2.8 1.1 4.3L8 10.6 4.3 13l1.1-4.3L2 5.9l4.4-.3z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="8" cy="7.8" r="1.4" fill="currentColor"/></svg>{% endif %}{% endmacro %}
{% macro unsichtbar_intelligent(l) %}{% if l.art and l.art != 'fest' %}<span class="unsichtbar"> ({{ g.intelligent }})</span>{% endif %}{% endmacro %}
{# Reiter „Playlists“ (16.10.2026, konzept.md R2.3): Werkbank. Links die Schiene mit drei Gruppen (Deine Tag Lists ·
   Geteilt mit dir *kommt* · Rekordbox-XML einlesen *kommt*), rechts je nach Adresse „Alle Listen“, „Welche Tag List?“ oder
   eine Tag List im Modus Ansehen · Export (je Modus eine URL; geordnet wird seit 24.10.2026 in Ansehen). Schiene, „Alle Listen“ und „Welche Tag List?“ stehen
   ohne Skript da; die Tag List selbst zeichnet tagliste.js (Werte aus N13). Unter 900 px wird die Schiene zur Zeile
   „Tag List: … ▾“, die ein Blatt mit denselben Einträgen öffnet. #}
{% macro schiene(kennung) %}
  <nav class="schiene" aria-label="{{ p.deine }}"{% if kennung %} id="{{ kennung }}"{% endif %}>
    <a class="alle" href="/playlists"{% if modus == 'alle' %} aria-current="page"{% endif %}><span>{{ p.alle }}</span><small>{{ listen | length }}</small></a>
    <h2>{{ p.deine }}</h2>
    <div class="schiene-listen" data-tl-schiene>{% for l in listen %}<a href="/playlists/{{ l.id }}"{% if l.id == tagliste_id %} aria-current="page"{% endif %}><span>{{ zeichen(l) }}{{ l.name }}{{ unsichtbar_intelligent(l) }}</span><small>{{ l.anzahl }}</small></a>{% else %}<p class="klein schiene-keine">{{ (store_mac_text(sprache, 'schiene_keine') or p.keine) if mac_store_app else p.keine }}</p>{% endfor %}</div>
    {{ plusmenue(kennung or "blatt") }}
  </nav>
  {# Store-Apps (iOS, Mac App Store) zeigen keine angekündigten Funktionen; die Mac-App kann XML schon einlesen (TP2 0915, 09.11.2026).
     „Die Platten zuerst“ (11.11.2026): mit Menü C stehen die „kommt“-Platzhalter auch im Web nicht mehr in der Arbeitsfläche. #}
  {% if not store_app and not menue_c %}<div class="schiene kommtgruppen">
    <h2>{{ p.geteilt }}</h2><p class="grp-kommt"><span>{{ p.geteilt_kurz }}</span> <span class="n-kommt">{{ p.kommt }}</span></p>
    {% if not desktop_app %}<h2>{{ p.einlesen }}</h2><p class="grp-kommt"><span>{{ p.einlesen_kurz }}</span> <span class="n-kommt">{{ p.kommt }}</span></p>{% endif %}
  </div>{% endif %}
{% endmacro %}
{# Live-Demo (24.10.2026): /demo/set-bauen zeigt nur Generator bzw. Baukasten – ohne Schiene (die Tag Lists der Demo liegen
   im Browser und öffnen sich in der Library), mit dem Band der Demo darüber. #}
{% if demo %}{% include "demo_band.html" %}{% endif %}
<div class="werkbank{% if demo %} demo-werkbank{% endif %}" id="tl-seite" data-tagliste="{{ tagliste_id or '' }}" data-modus="{{ modus }}">
  {% if not demo %}<div class="schienen">{{ schiene("tl-listen") }}</div>{% endif %}
  <div class="werkhaupt">
    {% if not demo %}<button type="button" class="listenwahl-mobil" id="tl-wahl-knopf" aria-haspopup="dialog" aria-controls="tl-wahl-blatt" hidden><span>{{ p.wahl_mobil | replace('{name}', '') }}<b>{{ liste.name if liste else p.alle }}</b> <small>{{ liste.anzahl if liste else listen | length }}</small></span><span aria-hidden="true">▾</span></button>{% endif %}
  {% if modus == 'alle' %}
    <div class="wkopf"><div><p class="eyebrow">{{ p.eyebrow }}</p><h1>{{ p.titel }}</h1></div>{{ plusmenue("kopf") }}</div>
    <p class="leise wsatz">{{ p.satz }}</p>
    {% if listen %}
    <div class="tabelle-scroll pl-tabelle"><table class="ltab alleliste"><caption>{{ p.caption_alle | replace('{n}', listen | length | string) | replace('{max}', max_listen | string) }}</caption>
      <thead><tr><th scope="col">{{ p.spalten.name }}</th><th scope="col" class="r">{{ p.spalten.tracks }}</th><th scope="col">{{ p.spalten.geaendert }}</th><th scope="col"><span class="unsichtbar">{{ p.spalten.aktionen }}</span></th></tr></thead>
      <tbody>{% for l in listen %}<tr data-liste="{{ l.id }}"><td class="n-name"><a href="/playlists/{{ l.id }}">{{ zeichen(l) }}{{ l.name }}{{ unsichtbar_intelligent(l) }}</a>{% if l.art and l.art != 'fest' %} <span class="pg-marke" aria-hidden="true">{{ g.intelligent }}</span>{% endif %} <span class="aktivmarke" hidden>{{ p.aktiv }}</span></td><td class="r zahl">{{ l.anzahl }}</td><td class="klein k">{{ l.geaendert_text }}</td>
        <td><span class="n-akt"><a class="knopf klein" href="/playlists/{{ l.id }}" aria-label="{{ p.oeffnen_label | replace('{name}', l.name) }}">{{ p.oeffnen }}</a>{% if l.anzahl %}<a class="knopf klein" href="/playlists/{{ l.id }}/export" aria-label="{{ p.exportieren_label | replace('{name}', l.name) }}">{{ p.exportieren }}</a>{% else %}<button class="knopf klein" type="button" aria-disabled="true" aria-describedby="grund-{{ l.id }}">{{ p.exportieren }}</button>{% endif %}</span></td></tr>{% endfor %}</tbody></table></div>
    {# Handy schlank, Phase 3b (07.11.2026): am Handy statt der Tabelle eine Liste – Name, Anzahl · Datum; Tipp auf die Zeile öffnet,
       „Exportieren“ und „Als Ziel für +“ stecken im „…“ (tagliste.js alleMenue, Blatt wie in der Listenansicht). Breit verborgen. #}
    {% set hl = t.plus.liste %}
    <ul class="pl-handy" aria-label="{{ p.caption_alle | replace('{n}', listen | length | string) | replace('{max}', max_listen | string) }}">{% for l in listen %}<li class="pl-zeile" data-liste="{{ l.id }}" data-anzahl="{{ l.anzahl }}" data-art="{{ l.art or 'fest' }}">
      <a class="pl-auf" href="/playlists/{{ l.id }}"><span class="pl-name">{{ zeichen(l) }}<span>{{ l.name }}</span>{{ unsichtbar_intelligent(l) }}<span class="aktivmarke" hidden>{{ p.aktiv }}</span></span><span class="pl-meta">{{ hl.anzahl_eins if l.anzahl == 1 else hl.anzahl | replace('{n}', l.anzahl | string) }} · {{ l.geaendert_text }}</span></a>
      <button type="button" class="pl-mehr" data-pl-mehr aria-haspopup="dialog" aria-label="{{ hl.optionen | replace('{name}', l.name) }}" hidden><svg class="ws-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12h.01M12 12h.01M19 12h.01"/></svg></button></li>{% endfor %}</ul>
    {% for l in listen if not l.anzahl %}<p class="grund-aus" id="grund-{{ l.id }}">{{ p.leer_grund | replace('{name}', l.name) }}</p>{% endfor %}
    {% if not store_app and not menue_c %}<p class="kommtzeile">{{ p.zusammenfassung_kommt }} <span class="n-kommt">{{ p.kommt }}</span></p>{% endif %}
    {% else %}
    <div class="akarte leerkarte"><p class="eyebrow">{{ p.eyebrow }}</p><h2>{{ p.leer_titel }}</h2><p class="leise">{{ p.leer_text }}</p>
      <div class="knopfreihe"><a class="knopf voll" href="/bibliothek">{{ x.zur_library }}</a><button type="button" class="knopf" data-tl-neu hidden>{{ p.leer_anlegen }}</button></div>
      <details class="tlhilfe"><summary>{{ p.wie }}</summary><ul class="wege">{% for w in x.leer_wege %}<li>{{ w }}</li>{% endfor %}</ul></details></div>
    {% endif %}
  {% elif modus == 'welche' %}
    <div class="wkopf"><div><p class="eyebrow">{{ p.eyebrow_export }}</p><h1>{{ p.welche }}</h1></div></div>
    {% if listen | selectattr('anzahl') | list %}
    <form method="get" action="/playlists/export" class="welche">
      <fieldset class="n-wahl"><legend>{{ p.exportieren_aus }}</legend>
        {% set erste = (listen | selectattr('anzahl') | first).id %}
        {% for l in listen %}<label><input type="radio" name="liste" value="{{ l.id }}"{% if not l.anzahl %} disabled{% elif l.id == erste %} checked{% endif %}> {{ l.name }} <span class="klein">({{ p.leer_marke if not l.anzahl else l.anzahl }})</span></label>{% endfor %}
      </fieldset>
      <p class="knopfreihe"><button class="knopf voll" type="submit">{{ p.weiter_export }}</button></p>
    </form>
    {% else %}<p class="leise">{{ p.keine_liste }}</p><p class="knopfreihe"><a class="knopf voll" href="/bibliothek">{{ x.zur_library }}</a></p>{% endif %}
  {% elif modus in ('erzeugen', 'regeln') %}
    {# Set bauen bzw. Regel-Baukasten: setbau.js zeichnet die Seite aus N13 und der Konfiguration (setbau-daten). #}
    <div id="pg-app" class="pg" data-art="{{ modus }}">
      <div class="wkopf"><div><p class="eyebrow">{{ g.g_eyebrow if modus == 'erzeugen' else g.r_eyebrow }}</p><h1 tabindex="-1">{% if modus == 'erzeugen' %}{{ g.g_titel_bearbeiten if setbau.liste else g.g_titel }}{% else %}{{ g.r_titel_bearbeiten if setbau.liste else g.r_titel }}{% endif %}</h1></div></div>
      {# Lade-Wörter (static/lade_woerter.js): setbau.js startet sie hier, erst nach 500 ms sichtbar #}
      <div class="pg-lade" id="pg-lade" role="status"></div>
      <noscript><p class="hinweis klein">{{ t.bib.ohne_js }}</p></noscript>
    </div>
    <script type="application/json" id="setbau-daten">{{ setbau | tojson }}</script>
  {% else %}
    <div class="tlhaupt" id="tl-haupt">
      {# „Die Platten zuerst“ (11.11.2026): mit Menü C ein Kopf in einer Zeile, ohne Eyebrow (tagliste.js listenKopf) #}
      <div class="wkopf{% if menue_c %} pl-kopf1{% endif %}"><div>{% if not menue_c %}<p class="eyebrow">{{ p.eyebrow_liste }}</p>{% endif %}<h1 id="tl-titel">{{ liste.name if liste else '' }}</h1></div>
        <nav class="modusgruppe" aria-label="{{ p.modus_name }}">{% for m in ('ansehen', 'export') %}<a href="/playlists/{{ tagliste_id or '' }}{{ '' if m == 'ansehen' else '/' ~ m }}"{% if m == modus %} aria-current="page"{% endif %}>{{ p.modus[m] }}</a>{% endfor %}</nav></div>
      <p class="klein" role="status">{{ t.bib.laedt }}</p>
      <noscript><p class="hinweis klein">{{ t.bib.ohne_js }}</p></noscript>
    </div>
    {# Export-Editor (28.10.2026): außerhalb von #tl-haupt – tagliste.js zeichnet den Kopf dort neu #}
    {# Plattenregal (10.11.2026): dieselbe Tag List als Kofferliste – Platten nach Fächern, Dateien als USB-Stick #}
    {# Variante C (10.11.2026): Raus steht an der Liste – Export und (mit Plattenregal) Etiketten und Koffer, rechts = später (Zeit) #}
    {# Store-Builds ohne Menü C (11.11.2026): weder Koffer noch Export/Etiketten an der Liste – Aufbau wie am 09.11. #}
    {% if not menue_c %}{% if not store_app and modus == "ansehen" and not demo and not paket_seite and tagliste_id and plattenregal_an() %}<p class="ee-einstieg-zeile"><a class="knopf klein" href="/regal/koffer/{{ tagliste_id }}">{{ t.regal.koffer }} <span aria-hidden="true">→</span></a></p>{% endif %}
    {% elif modus == "ansehen" and not demo and not paket_seite and tagliste_id %}<p class="ee-einstieg-zeile ort-raus"><a class="knopf klein" href="/playlists/{{ tagliste_id }}/export">{{ t.menue.export }}</a>{% if plattenregal_an() %}<a class="knopf klein" href="/regal/etiketten?tl={{ tagliste_id }}">{{ t.menue.etiketten }}</a><a class="knopf klein" href="/regal/koffer/{{ tagliste_id }}">{{ t.regal.koffer }} <span aria-hidden="true">→</span></a>{% endif %}</p>{% endif %}
    {% if modus == "export" and not demo %}<p class="ee-einstieg-zeile"><a class="knopf klein ee-einstieg" href="/export?liste={{ tagliste_id }}">{{ export_texte[sprache].einstieg_liste }} <span aria-hidden="true">→</span></a></p>{% endif %}
  {% endif %}
  </div>
</div>
{% if not demo %}<dialog class="mehrblatt wahlblatt" id="tl-wahl-blatt" aria-labelledby="tl-wahl-h">
  <span class="griff" aria-hidden="true"></span><h2 id="tl-wahl-h">{{ p.wahl_titel }}</h2>
  {{ schiene(none) }}
  <form method="dialog"><button class="knopf klein zu" type="submit">{{ t.nav.schliessen }}</button></form>
</dialog>{% endif %}
{# Ohne verbundenen Onlinespeicher nennt die Seite ihn nirgends (wie die Library): die M3U8-Sätze fehlen dann. #}
{# Rekordbox-Test 17.10.2026: Hinweis und Pfadwahl der M3U8 aus denselben Texten wie der Library-Dialog (bib.export_rb_*,
   bib.export_pfade*); tagliste.js füllt {ordner} aus musikordner.js (nur im Browser). Ohne verbundenen Speicher trägt keine
   Location einen echten Pfad – dann nur die Aufforderung (rb_ohne), kein Wort vom Speicher. #}
{% set ex = dict(t.plexport, rb_ohne=t.bib.export_rb_ohne, rb_mit=t.bib.export_rb_mit, rb_link=t.bib.export_rb_link,
   pfade=t.bib.export_pfade, pfade_relativ=t.bib.export_pfade_relativ, pfade_absolut=t.bib.export_pfade_absolut) %}
{# Live-Demo: „zurück“ führt in die Demo, der Speichern-Dialog sagt ehrlich, wo das Set bleibt und dass Export ein Konto braucht #}
{% set gd = dict(zurueck_alle=t.demo.credits_zur_demo, sp_export=(t.demo.setbau_export_neu if demo_neu else t.demo.setbau_export), sp_los=(t.store.los_klein if neutral else t.demo.setbau_los_neu if demo_neu else t.demo.setbau_los), sp_los_href="/registrieren") if demo else {} %}
<script type="application/json" id="setbau-t">{{ dict(g, ampel=x.ampel, gewagt=x.gewagt, tonart=x.tonart, e_gleich=x.e_gleich, e_schritt=x.e_schritt, halb=x.halb, bpm_fehlt=x.bpm_fehlt, heute=p.heute, **gd) | tojson }}</script>
<script type="application/json" id="playlists-t">{{ dict((dict(p, kommt=none, zusammenfassung_kommt=none) if store_app else p), platten_zuerst=(menue_c and not demo), handy=t.plus.liste, intelligent=g.intelligent, sort=dict(t.plsort, breiten=t.bib.spalten), export=(ex if status_speicher else dict(ex, m3u_alle=none, ohne=none, ohne_eine=none, rb_mit=none, pfade=none, pfade_relativ=none, pfade_absolut=none))) | tojson }}</script>
{# Desktop-Paket (08.11.2026): Kennung aus der Adresse, „Alle Playlists“ aus GET /api/v1/taglisten (desktop_paket.py rendert ohne Konto) #}
{% if paket_seite %}<script src="/static/paket_listen.js" defer data-seite></script>{% endif %}
{% if modus in ('ansehen', 'export') %}
{# Grid-Export (31.10.2026): Texte für den Schalter „Beatgrid mitgeben“ (static/grid_export.js, tagliste.js exportTeil) #}
<script type="application/json" id="gx-t">{{ export_texte[sprache].grid | tojson }}</script>
<script src="/static/grid_export.js" defer data-seite></script>
<script src="/static/musikordner.js" defer data-seite></script>
<script src="/static/diagramme.js" defer data-seite></script>
<script src="/static/titelblatt.js" defer data-seite></script>
<script src="/static/bibliothek.js" defer data-seite></script>
<script src="/static/plordnen.js" defer data-seite></script>
{% elif modus in ('erzeugen', 'regeln') %}
<script src="/static/diagramme.js" defer data-seite></script>
<script src="/static/bibliothek.js" defer data-seite></script>
{% endif %}
<script src="/static/generator.js" defer data-seite></script>
<script src="/static/setbau-rechner.js" defer data-seite></script>
<script src="/static/setbau.js" defer data-seite></script>{% if modus == 'erzeugen' and energiekurve() %}
<script type="application/json" id="ek-t">{{ t.energiekurve | tojson }}</script>
<script src="/static/energiekurve_haken.js" defer data-seite></script>{% endif %}
{% if modus in ('ansehen', 'export') %}<script src="/static/rebuild.js" defer data-seite></script>{% endif %}
{% endblock %}