{% extends "basis.html" %}{% set j = t.jukebox %}{% set b = t.bib %}{% block titel %}{{ j.name }} – Timbre{% endblock %}{% block koerperklasse %} class="breit"{% endblock %}{% block hauptklasse %} class="breit jb-main"{% endblock %}{% block weich %} data-weich{% endblock %}{% block inhalt %}
{# Jukebox 2.0 (08.11.2026, timbre_api/jukebox_web.py): alle Tracks der eigenen Library, die zu den gedrückten Knöpfen passen.
   static/jukebox.js rechnet im Browser aus N13 mit dem Filtermodell der Library (TimbreBibliothek) und füllt das Gerüst; ohne
   JavaScript bleibt der Hinweis. Eigenes CSS (static/jukebox.css, werkzeuge/tokens_jukebox.py) – lädt nur hier, auch beim weichen
   Wechsel (der Link steht in <main>). Der sichtbare Name kommt nur aus texte_jukebox.py. #}
<link rel="stylesheet" href="/static/jukebox.css">
<div class="jb" id="jb" data-laedt>
  <header class="jb-kopf">
    {# Variante C (10.11.2026): Jukebox ist eine Ansicht beim Diggen – Umschalter Explorer · Jukebox #}
    {% if menue_c %}{% import "menue.html" as mk with context %}{{ mk.diggen("jukebox") }}{% endif %}
    <p class="eyebrow jb-eyebrow">{{ j.einstieg }}</p>
    <h1 class="jb-titel">{{ j.name }}</h1>
    <p class="jb-satz">{{ j.satz }}</p>
    <p class="jb-satz2 leise">{{ j.satz2 }}</p>
  </header>
  <div class="jb-raum" id="jb-raum">
    {# Knöpfe: breit die linke Spalte (1 : φ zur Bühne), schmal wandern die Gruppen ins Blatt von unten (#jb-blatt) #}
    <aside class="jb-tasten" id="jb-tasten" aria-labelledby="jb-tasten-h">
      <div class="jb-tasten-kopf"><h2 id="jb-tasten-h">{{ j.tasten }}</h2>
        <button type="button" class="chip leise" id="jb-loesen" disabled>{{ j.loesen }}</button></div>
      <p class="klein leise jb-tasten-hilfe">{{ j.tasten_hilfe }}</p>
      <div class="jb-gruppen" id="jb-gruppen"></div>
    </aside>
    <section class="jb-buehne" id="jb-buehne" aria-labelledby="jb-zahl-h">
      {# Zahlenfenster: die Zahl rollt beim Wechsel (aria-hidden), für Screenreader ein ruhiger Satz daneben #}
      <div class="jb-fenster" id="jb-fenster"><h2 class="unsichtbar" id="jb-zahl-h">{{ j.liste }}</h2>
        <div class="jb-zahl" id="jb-zahl" aria-hidden="true"></div>
        <div class="jb-einheit"><span id="jb-einheit"></span><span class="jb-dauer" id="jb-dauer"></span></div>
        <p class="unsichtbar" id="jb-sr" role="status" aria-live="polite"></p></div>
      <div class="jb-rezept" id="jb-rezept" role="group" aria-label="{{ j.rezept }}"><p class="leise klein">{{ j.rezept_leer }}</p></div>
      <div class="jb-streifen" id="jb-streifen" role="group" aria-label="{{ j.streifen }}"></div>
      <div class="jb-listenkopf"><h3 class="jb-h3">{{ j.liste }}</h3>
        <span class="jb-sortwahl"><label class="klein" for="jb-sort">{{ j.sortieren }}</label><select id="jb-sort"></select>
          <button type="button" class="chip" id="jb-richtung"></button></span>
        <a class="textlink klein" id="jb-library" href="/bibliothek">{{ j.in_library }}</a></div>
      <div class="jb-liste" id="jb-liste" role="list" aria-label="{{ j.liste }}"></div>
      <div class="jb-leer" id="jb-leer" hidden></div>
      <p class="jb-status leise" id="jb-status" role="status">{{ b.laedt }}</p>
      <noscript><p class="hinweis klein">{{ b.ohne_js }}</p></noscript>
      <div class="jb-fuss" id="jb-fuss">
        <button type="button" class="knopf jb-haupt" id="jb-speichern" disabled>{{ j.speichern }}</button>
        <button type="button" class="knopf zweit" id="jb-abspielen" disabled>{{ j.abspielen }}</button>
        <button type="button" class="knopf zweit" id="jb-zufall" disabled>{{ j.zufaellig }}</button>
        <button type="button" class="knopf zweit" id="jb-export" disabled>{{ j.exportieren }}</button>
        <p class="klein jb-fuss-status" id="jb-fuss-status" role="status" aria-live="polite"></p>
      </div>
      <p class="klein leise jb-datenschutz">{{ j.datenschutz }}</p>
    </section>
  </div>
  {# Schmal (iPhone, iPad hoch): Knopf unten öffnet das Blatt mit den Gruppen als wischbare Karten; der Zähler bleibt oben im Blatt #}
  <button type="button" class="jb-tastenknopf" id="jb-tastenknopf" aria-haspopup="dialog" aria-controls="jb-blatt" hidden><span>{{ j.tasten_knopf }}</span><b id="jb-tastenknopf-zahl"></b></button>
  <dialog class="jb-blatt" id="jb-blatt" aria-labelledby="jb-blatt-h">
    <div class="jb-blatt-griff" aria-hidden="true"><i></i></div>
    <div class="jb-blatt-kopf"><h2 id="jb-blatt-h">{{ j.tasten }}</h2><span class="jb-blatt-zahl" id="jb-blatt-zahl"></span>
      <button type="button" class="knopf klein" id="jb-blatt-zu">{{ j.tasten_zu }}</button></div>
    <p class="klein leise jb-blatt-hilfe">{{ j.karten_hilfe }}</p>
    <div class="jb-blatt-inhalt" id="jb-blatt-inhalt"></div>
  </dialog>
  <dialog class="jb-dialog" id="jb-speichern-blatt" aria-labelledby="jb-speichern-h">
    <form method="dialog" class="jb-speichern-form" id="jb-speichern-form">
      <h2 id="jb-speichern-h">{{ j.speichern_titel }}</h2>
      <label class="feld">{{ j.speichern_name }}<input type="text" id="jb-speichern-name" maxlength="120" autocomplete="off" spellcheck="false" required></label>
      <p class="klein leise" id="jb-speichern-was"></p>
      <p class="klein" id="jb-speichern-status" role="status"></p>
      <p class="knopfreihe"><button type="submit" class="knopf" id="jb-speichern-los" value="los">{{ j.speichern_los }}</button>
        <button type="button" class="knopf zweit" id="jb-speichern-abbrechen">{{ j.abbrechen }}</button></p>
    </form>
  </dialog>
</div>
{# Texte: die der Jukebox und – für dieselben Begriffe – Gruppennamen, UND/ODER, Sterne/Farben und Sortierfelder der Library #}
<script type="application/json" id="jb-t">{{ dict(j, felder=b.felder, tf=b.tf, sortfelder=b.sortfelder, labels=t.blatt.labels, merkmale=b.merkmale,
  ort=(t.ort.filter if (status_speicher or desktop_app) else none), laedt=b.laedt, fehler=b.fehler, nochmal=b.nochmal,
  energie_legende=t.energie_legende, abspielen_t=t.player.abspielen, ohne_titel=b.ohne_titel, ohne_interpret=b.ohne_interpret,
  rb=rekordbox_bewertung, export_grenze=1000) | tojson }}</script>
<script src="/static/diagramme.js" defer data-seite></script>
<script src="/static/bibliothek.js" defer data-seite></script>
<script src="/static/jukebox.js" defer data-seite></script>
{% endblock %}