{% extends "basis.html" %}{% set seiten_module = ("dig",) %}{% block koerperklasse %} class="breit"{% endblock %}{% block hauptklasse %} class="breit"{% endblock %}{% block weich %} data-weich{% endblock %}{% block inhalt %}
{% set b = t.bib %}{% from "schalter.html" import schalter %}
<h1 class="unsichtbar">{{ t.demo.nav if demo else b.ueberschrift }}</h1>
{% if demo %}{% include "demo_band.html" %}{% endif %}
{# Hülle der Bibliothek: bibliothek.js füllt sie aus N13 und blendet dafür den Rückfall darunter aus. #}
<div id="bib" hidden>
  <div class="bibkopf" id="bib-kopf">
    {# Oktagon-Explorer (24.10.2026): die Library als Liste oder als Explorer – dieselbe Library, die Filter gehen als Crate mit #}
    {# Menü Variante C (10.11.2026, templates/menue.html): links Rein, dann Medium Alle · Digital · Vinyl und die Ansichten Liste · Regal ·
       Genres; Export steht rechts in den Werkzeugen (#bib-export-knopf). Explorer und Jukebox sind jetzt der Ort „Diggen“ im Kopf –
       #bib-explorer bleibt als Datenträger für die Wege „Filter als Crate“ und „Track im Explorer“ (bibliothek.js). Live-Demo: wie
       vorher Liste | Explorer. #}
    {% if demo or not menue_c %}<nav class="xp-lib xp-lib-bib" aria-label="{{ t.explorer.umschalter }}"><a href="{{ '/demo' if demo else '/bibliothek' }}" aria-current="true">{{ t.explorer.liste }}</a><a href="{{ '/demo/explorer' if demo else '/explorer' }}" id="bib-explorer" data-basis="{{ '/demo/explorer' if demo else '/explorer' }}" class="xp-lib-ex"><svg class="xp-lib-okt" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 3h6l6 6v6l-6 6H9l-6-6V9z"/><circle cx="12" cy="12" r="2"/></svg>{{ t.explorer.explorer }}{% if explorer_neu() %} <span class="ex-chip"><i class="ex-chipled" aria-hidden="true"></i>{{ t.nav.explore.neu }}</span>{% endif %}</a>{% if not demo %}<a href="/jukebox" class="xp-lib-jb" title="{{ t.jukebox.einstieg }}">{{ t.jukebox.kurz }}</a>{% endif %}</nav>
    {% else %}{% import "menue.html" as mk with context %}<div class="ort-kopf">{{ mk.rein(ue) }}{{ mk.medium(medium_wahl or "alle") }}{{ mk.ansicht("liste") }}</div>
    <span id="bib-explorer" data-basis="/explorer" hidden></span>{% endif %}
    <div class="bibsuche">
      <span class="suchfeld"><input id="bib-suche" type="search" aria-label="{{ b.suche_label }}" placeholder="{{ b.suche }}" maxlength="100" autocomplete="off" data-suche aria-keyshortcuts="/"><kbd aria-hidden="true">/</kbd></span>
      {# Mobil kompakt (25.10.2026): Sortieren und Werkzeuge bis 520 px in einer wischbaren Zeile, breiter display:contents #}
      {# Filter am Handy (27.10.2026): ein kompakter Knopf öffnet das Filterblatt (#bib-filter-sheet); ab 821 px steht die Leiste offen daneben #}
      <span class="bibwerkzeug"><button type="button" class="chip bibfknopf" id="bib-filter-knopf" aria-haspopup="dialog" aria-controls="bib-filter-sheet"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M2 4h12M4.5 8h7M7 12h2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg><span>{{ b.filter }}</span><small id="bib-filter-knopf-zahl"></small></button><span class="sortwahl"><label class="klein" for="bib-sort">{{ b.sortieren }}</label>
        <select id="bib-sort"></select><button type="button" class="chip" id="bib-richtung"></button></span>
      {# Spalten wie gewohnt (08.11.2026): Menü der Spalten für Tastatur und Touch – dasselbe wie Rechtsklick auf den Spaltenkopf; ab 744 px #}
      <button type="button" class="chip" id="bib-spalten-knopf" aria-haspopup="dialog" aria-expanded="false" aria-controls="bib-spalten-menue" hidden>{{ b.spx.knopf }}</button>
      <button type="button" class="chip" id="bib-karte-knopf" aria-expanded="false" aria-controls="bib-karte">{{ b.karte }}</button>
      <button type="button" class="chip" id="bib-export-knopf" aria-haspopup="dialog" aria-controls="bib-export" disabled{% if demo %} hidden{% endif %}>{{ b.export }}</button>
      {# Plattenregal: seit Variante C (10.11.2026) die Ansicht „Regal“ im Kopf (templates/menue.html); der Chip bleibt nur in App-Hüllen ohne native_leiste_playlists #}
      {# Store-Fassungen (11.11.2026, TP2 Befund 63): kein Knopf „Plattenregal“ – der Store-Build 1.0 hat weder Scanner noch Menü C #}
      {% if not menue_c and not store_app and not demo and not paket_seite and plattenregal_an() %}<a class="chip" id="bib-regal" href="/regal">{{ t.regal.nav }}</a>{% endif %}
      {# Aktualisieren: holt N13 neu; Filter, Sortierung, Rollstand und ein offenes Fly-in bleiben (bibliothek.js). #}
      <button type="button" class="chip neuknopf" id="bib-neu" aria-label="{{ t.neu.neu_knopf_hilfe }}" title="{{ t.neu.neu_knopf_hilfe }}"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M13.6 1.8v2.9h-2.9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span>{{ t.neu.neu_knopf }}</span></button>
      {# Upload in den eigenen Speicher (09.11.2026, E1): nur mit Schalter/Konto-Freigabe und verbundenem Speicher; am Handy nur „+“ #}
      {% if ue %}<button type="button" class="chip ue-knopf" id="ue-knopf" aria-haspopup="dialog" aria-label="{{ ue.texte.knopf }}" title="{{ ue.texte.knopf }}"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M8 3v10M3 8h10" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg><span class="ue-lang">{{ ue.texte.knopf }}</span></button>
      <input type="file" id="ue-eingabe" multiple accept="{% for e in ue.endungen %}.{{ e }},{% endfor %}audio/*" hidden>{% endif %}
      <a class="fragez" href="{{ t.hilfe.kontext.bibliothek.href }}" title="{{ t.hilfe.kontext.bibliothek.name }}" aria-label="{{ t.hilfe.kontext.bibliothek.name }}"><span aria-hidden="true">?</span></a></span>
    </div>
    {# Desktop v2 (Bitte 3): „Auf diesem Rechner“ – Musik hinzufügen, Nicht analysiert (n), Nur lokal; nur im App-Fenster (desktop_extras.js) #}
    {% if desktop_app %}<div class="dk-bib" id="dk-bib" role="group" hidden></div>{% endif %}
    {# Mac-App-Store-Fassung (Sandbox, 09.11.2026): „Musikordner freigeben …“ – einmal über der Liste, nur wenn das Ergebnis von
       einlesen.* nicht_freigegeben > 0 trägt; Knopf nur mit einlesen.ordner (desktop_extras.js zeigt es, sonst bleibt es verborgen) #}
    {% if desktop_app %}<div class="dk-freigabe" id="dk-freigabe" role="group" hidden></div>{% endif %}
    <div class="bibunter"><p class="klein" id="bib-anzahl" role="status"></p>
      <span class="klein neustatus" id="bib-neu-status" role="status" aria-live="polite"></span><span class="unsichtbar" id="bib-spalten-status" role="status"></span>
      {# P3 (07.11.2026): Ansagen der Tasten (Sprungsuche, Strg/Cmd+L) und Beschreibung passender Zeilen (aria-describedby) #}
      <span class="unsichtbar" id="bib-p3-status" role="status"></span><span id="bib-passt-text" hidden>{{ b.passend.passt }}</span>
      <span class="klein neuhinweis" id="bib-neu-hinweis" hidden>{{ t.neu.neu_waechst }}</span>
      <div class="bibchips" id="bib-chips" role="group" aria-label="{{ b.aktive_filter }}"></div>
      {# P3 (07.11.2026): „Passende Tonarten“ als DJ-Schalter, rechts über der Tonart-Spalte – nah an der Liste, die er hervorhebt; nur ab
         744 px (bibliothek.js nimmt hidden weg). Grün umrandet passt, der Rest blasser. #}
      <span class="bibpassend" id="bib-passend-ort" hidden>{{ schalter("KEY", b.passend.knopf, id="bib-passend", hilfe_id="bib-passend-satz") }}<span id="bib-passend-satz" hidden>{{ b.passend.hilfe }}</span></span></div>
  </div>
  {# Spalten je Ansicht (08.11.2026, static/spalten.js): data-spalten = erscheinungsbild.spalten des Kontos (null = Vorgabe) #}
  <div class="bib" id="bib-ansicht" data-spalten='{{ eb.spalten | tojson }}'>
    <details class="filterblatt" id="bib-filter"><summary><span>{{ b.filter }}</span><small id="bib-filter-zahl"></small></summary>
      <div class="filterleiste" id="bib-filterleiste"></div></details>
    <div class="bibrechts">
      {# Tag List (Paket 2): bei offenem Fly-in steht hier die eingeklappte Leiste (tagliste.js) #}
      <div id="tl-inline"></div>
      {# Genre-Landkarte der gefilterten Auswahl: zugeklappt, bis man sie über den Knopf im Kopf öffnet (je Gerät gemerkt). #}
      <section class="bibkarte" id="bib-karte" aria-label="{{ b.karte_titel }}" hidden><div id="bib-karte-ziel"></div><p class="klein">{{ b.karte_hinweis }}</p></section>
      {# Kopf der breiten Liste (08.11.2026): bibliothek.js macht daraus eine Tabelle mit einer Zeile (aria-sort), die Hülle bleibt display:contents #}
      {# Paket „Demo“ (11.11.2026): einmalige Führungszeile der Live-Demo – static/demo.js blendet sie beim ersten Besuch ein (Merker nur
         in diesem Browser) und nimmt sie weg, sobald ein Track läuft. Nichts startet von selbst. #}
      {% if demo_neu %}<p class="demotipp" id="demo-tipp" hidden>{{ t.demo.fuehrung }}</p>{% endif %}
      <div class="spxtab" id="bib-kopftab"><div class="kopfzeile" aria-hidden="true"><span data-spalte="titel"><span data-sortfelder="titel">{{ b.kopf.titel }}</span> · <span data-sortfelder="interpret">{{ b.sortfelder.interpret }}</span></span><span class="gm" data-spalte="gm" data-sortfelder="leitgenre leitanteil anteil">{{ b.kopf.genre }}</span><span class="bs" data-spalte="bs">{{ b.kopf.bass }}</span><span class="en" data-spalte="en" data-sortfelder="energie" title="{{ t.energie_legende }}"><span class="lang">{{ b.kopf.energie }}</span><span class="kurz">{{ t.energie_kurz }}</span></span><span class="rechts" data-spalte="bpm" data-sortfelder="bpm"><span class="lang">{{ b.kopf.bpm }}</span><span class="kurz">{{ b.kopf.bpm_kurz }}</span></span><span class="rechts" data-spalte="ton" data-sortfelder="tonart"><span class="lang">{{ b.kopf.tonart }} <span class="fest"><span class="wq wq-gemessen wq-ohne"><i class="wq-sym"></i></span> {{ b.kopf.tonart_gemessen }}</span></span><span class="kurz">{{ b.kopf.tonart_kurz }}</span></span></div></div>
      {# Spaltenbreiten (ab 1000 px): bibliothek.js setzt hier die Griffe auf die Grenzen der Köpfe darüber (role=separator). #}
      <div class="spgriffe" id="bib-spalten" hidden>
      {# „Spalten zurücksetzen“: nur ab 1000 px und mit gemerkten Breiten (bibliothek.js). Symbolknopf rechts in der Kopfzeile über der
           Spalte der Tag-List-Knöpfe – so bricht die Kopfleiste nie um; voller Name im Tooltip und für Screenreader. #}
        <button type="button" class="chip" id="bib-spalten-zurueck" title="{{ b.spalten.zurueck }}" hidden><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M2 2.5v11M14 2.5v11" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M5 8h6M6.8 5.8 4.6 8l2.2 2.2M9.2 5.8 11.4 8l-2.2 2.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="unsichtbar">{{ b.spalten.zurueck }}</span></button>
      </div>
      <span id="bib-spalten-hilfe" hidden>{{ b.spalten.hilfe }}</span>
      <div class="liste virtuell" id="bib-liste" role="list" aria-label="{{ b.liste }}" tabindex="-1"></div>
      <div class="bibstatus" id="bib-keine"></div>
    </div>
    {# Tag List (Paket 2): Paneel rechts, Liste : Paneel = 1,618 : 1 (ab 1200 px); schmaler Mini-Leiste und Sheet (tagliste.js) #}
    <aside class="tl" id="tl-paneel" hidden></aside>
  </div>
  {# data-n: Trackzahl für die Lade-Wörter (ab 8 s „Große Library – {n} Tracks …“), nur ohne Filter in der Adresse;
     data-marke: Marke von N13 – gleich der zuletzt geladenen heißt: die volle Fassung liegt im Cache, keine Etappe (bibliothek.js);
     data-worker: der Web Worker, der N13 entpackt, mit Inhaltskennung (bibliothek_worker.js) #}
  <div class="bibstatus" id="bib-status" role="status" data-worker="{{ statisch_url('bibliothek_worker.js') }}"{% if daten.gesamt and not (filter.values() | select | list) %} data-n="{{ daten.gesamt }}"{% if bib_marke %} data-marke="{{ bib_marke }}"{% endif %}{% endif %}{% if desktop_app or demo %} data-ohne-etappe{% endif %}></div>
  {# Fly-in mit dem Überblick eines Titels: breit ein Bereich neben der Liste, schmal ein Dialog (bibliothek.js stellt die Rolle um). #}
  {# Fly-in anpassbar (30.10.2026): data-flyin = erscheinungsbild.flyin des Kontos (null = Standard; ohne Konto gilt localStorage) #}
  <aside class="bibfeld" id="bib-feld" role="complementary" aria-label="{{ b.feld }}" tabindex="-1" data-flyin='{{ eb.flyin | tojson }}' hidden>
    <div class="feldkopf"><span class="feldgriff" aria-hidden="true"></span><a class="knopf klein" id="bib-feld-detail" href="/bibliothek">{{ b.feld_detail }}</a>
      <a class="knopf klein" id="bib-feld-explorer" href="{{ '/demo/explorer' if demo else '/explorer' }}" title="{{ t.explorer.weiter }}" aria-label="{{ t.explorer.weiter }}">{{ t.explorer.explorer }}</a>
      <button type="button" class="tlknopf" id="bib-feld-tag" data-tagliste-knopf="" hidden>+</button>
      <span class="fe-mehrort"><button type="button" class="chip" id="bib-feld-mehr" aria-label="{{ t.flyin.menue }}" title="{{ t.flyin.menue }}" aria-haspopup="true" aria-expanded="false" aria-controls="bib-feld-menue" hidden><span aria-hidden="true">⋯</span></button>
        <span class="fe-menue" id="bib-feld-menue" hidden><button type="button" class="knopf klein" id="bib-feld-anpassen">{{ t.flyin.anpassen }}</button></span></span>
      <button type="button" class="chip" id="bib-feld-zu" aria-label="{{ b.feld_zu }}" title="{{ b.feld_zu }}"><span aria-hidden="true">×</span></button></div>
    <div class="feldinhalt" id="bib-feld-inhalt"></div>
  </aside>
  {# Filterblatt am Handy (Maintainer 27.10.2026: „die filter müssen ähnlich wie beim oktagon überlagert werden … dann wird die gefilterte
     liste angezeigt“). Unter 821 px wandert #bib-filterleiste hier hinein (bibliothek.js); man stellt ein und wendet mit
     „N Tracks zeigen“ an. Schließen (×, Esc, Wisch nach unten, Tipp daneben) ändert nichts. Oben die vier wichtigsten Filter,
     der Rest unter „Mehr Filter“. #}
  <dialog class="xp-dialog xp-sheet bibfsheet" id="bib-filter-sheet" aria-labelledby="bib-filter-h">
    <div class="bibfsheet-griff" aria-hidden="true"><i></i></div>
    <div class="xp-dkopf bibfsheet-kopf"><h2 id="bib-filter-h">{{ b.filter }}</h2>
      <button type="button" class="chip leise" data-sheet-reset>{{ b.fsheet.reset }}</button>
      <button type="button" class="chip" data-sheet-zu aria-label="{{ b.fsheet.zu }}" title="{{ b.fsheet.zu }}"><span aria-hidden="true">×</span></button></div>
    <div class="bibfsheet-inhalt" id="bib-filter-sheet-inhalt"></div>
    <div class="bibfsheet-fuss"><button type="button" class="knopf voll" data-sheet-anwenden></button></div>
  </dialog>
  {# Export (N17): genau die gefilterte, sortierte Liste. Die festen Texte stehen hier, bibliothek.js füllt Zahl, Filter und Status. #}
  <dialog class="exportblatt" id="bib-export" aria-labelledby="bib-export-h">
    <div class="feldkopf"><h2 id="bib-export-h">{{ b.export_titel }}</h2>
      <button type="button" class="chip" id="bib-export-zu" aria-label="{{ b.feld_zu }}" title="{{ b.feld_zu }}"><span aria-hidden="true">×</span></button></div>
    <div class="exportinhalt">
      <div class="exportwas"><p id="bib-export-wird"></p>
        <p class="hinweis klein" id="bib-export-leer" hidden></p>
        <p class="klein">{{ b.export_hinweis }}</p>
        <p class="klein" id="bib-export-filter"></p><p class="klein" id="bib-export-sortiert"></p></div>
      {# Durchsicht S7: mobil stehen die Formatkarten untereinander, „Als Tag List speichern“ (Brückenschritt Library → Playlists)
         läge zwei Bildschirmhöhen tiefer – deshalb unter 600 px ein Sprunglink. Reihenfolge im DOM bleibt (Fokus = Lesefolge). #}
      <p class="tlsprung"><a class="textlink" href="#bib-export-tl-teil">{{ b.export_tl_speichern }} <span aria-hidden="true">↓</span></a></p>
      {# UX-Paket 1, Teil 4: Playlist-Name (Vorgabe aus den Filtern, bibliothek.js) für Rekordbox XML und M3U8; drei
         Hauptformate, CSV unter „Weitere Formate“. Rekordbox-Test 17.10.2026: Location je Track aus dem Musikordner des Geräts
         (localStorage, musikordner.js) – bibliothek.js füllt den Hinweis und zeigt die Pfadwahl der M3U8 nur mit Musikordner. #}
      <label class="feld" id="bib-export-pl">{{ b.export_playlist_feld }}
        <input type="text" id="bib-export-playlist" maxlength="120" autocomplete="off" spellcheck="false" aria-describedby="bib-export-pl-hilfe">
        <span class="klein" id="bib-export-pl-hilfe">{{ b.export_playlist_hilfe }}</span></label>
      {# Navigation 16.10. (E-N3): Die Library exportiert genau die gefilterte Liste – keine Wahl „Tag List / gefilterte Liste“
         mehr. Formate als 3er-Reihe: mit verbundenem Onlinespeicher Rekordbox XML · M3U8 · JSON (CSV unter „Weitere Formate“), ohne
         Speicher Rekordbox XML · JSON · CSV. Dazu „Als Tag List speichern“ (höchstens 1.000 Tracks) und der Weg nach Playlists. #}
      {% set karten = [] %}{% for f in b.export_formate %}{% if f[0] != "m3u8" or status_speicher %}{% set _ = karten.append(f) %}{% endif %}{% endfor %}
      {% if not status_speicher %}{% for f in b.export_weitere_formate %}{% set _ = karten.append(f) %}{% endfor %}{% endif %}
      {# Export-Editor (28.10.2026): dieselbe gefilterte, sortierte Liste geht über den sessionStorage des Tabs mit (bibliothek.js) #}
      <p class="ee-einstieg-zeile"><a class="knopf klein ee-einstieg" href="/export?quelle=auswahl" id="bib-export-editor">{{ export_texte[sprache].einstieg_library }} <span aria-hidden="true">→</span></a></p>
      <div class="exportwahl" id="bib-export-wahl">
        <div class="formate3">{% for kennung, name, text in karten %}
        <button type="button" class="exportkarte" data-export="{{ kennung }}"{% if kennung == "rekordbox" %} aria-describedby="bib-export-rb"{% elif kennung == "m3u8" %} aria-describedby="bib-export-m3u bib-export-ohne"{% endif %}><b>{{ name }}</b><span>{{ text }}</span></button>{% endfor %}
        </div>
        <p class="hinweis klein" id="bib-export-rb"><span id="bib-export-rb-text">{{ b.export_rb_ohne }}</span> <a href="/quellen#rk-ordner" id="bib-export-rb-link">{{ b.export_rb_link }}</a></p>
        {# Grid-Export (31.10.2026): „Beatgrid mitgeben“ für die Rekordbox XML, Vorgabe aus – static/grid_export.js, bibliothek.js #}
        <div class="bib-grid" id="bib-export-grid"></div>
        {# M3U8 nur mit verbundenem Onlinespeicher dieses Kontos – ohne gäbe es keine Datei, auf die eine Zeile zeigen könnte.
           Dieselbe Bedingung wie der Export-Modus in Playlists (`status_speicher`, Durchsicht S5). #}
        {% if status_speicher %}<p class="klein" id="bib-export-m3u">{{ b.export_m3u_hinweis }}</p>
        <p class="klein" id="bib-export-ohne" hidden></p>
        <fieldset class="exportquelle" id="bib-export-pfade" hidden><legend>{{ b.export_pfade }}</legend>
          <label><input type="radio" name="bib-export-pfade" value="relativ" checked> <span>{{ b.export_pfade_relativ }}</span></label>
          <label><input type="radio" name="bib-export-pfade" value="absolut"> <span id="bib-export-pfade-absolut">{{ b.export_pfade_absolut }}</span></label></fieldset>{% endif %}
        {# Store-Apps zeigen nichts Angekündigtes; die Desktop-App kann XML mit Dateien schon (TP2 0915, 09.11.2026) #}
        {% if not (store_app or desktop_app) %}<p class="kommtzeile">{{ b.export_eigene_xml }} <span class="n-kommt">{{ b.export_kommt }}</span></p>{% endif %}
        {% if status_speicher %}<details class="exportweitere"><summary>{{ b.export_weitere }}</summary>
          {% for kennung, name, text in b.export_weitere_formate %}
          <button type="button" class="exportkarte" data-export="{{ kennung }}"><b>{{ name }}</b><span>{{ text }}</span></button>
          {% endfor %}
        </details>{% endif %}
      </div>
      {# Desktop v2 (Bitte 3): Rekordbox XML / M3U8 mit echten Pfaden über die App – nur im App-Fenster (desktop_extras.js) #}
      {% if desktop_app %}<section class="dk-export" id="dk-bib-export" aria-labelledby="dk-bib-export-h" hidden></section>{% endif %}
      <div class="exporttl" id="bib-export-tl-teil" tabindex="-1">
        <p class="knopfreihe"><button type="button" class="knopf" id="bib-export-tl" aria-describedby="bib-export-tl-grenze">{{ b.export_tl_speichern }}</button></p>
        <p class="klein" id="bib-export-tl-grenze">{{ b.export_tl_grenze }}</p>
        <p class="klein" id="bib-export-tl-status" role="status"></p>
        <p class="klein"><a class="textlink" href="/playlists/export">{{ b.export_verweis }}</a></p>
      </div>
      <p class="klein" id="bib-export-status" role="status"></p>
    </div>
  </dialog>
</div>
<div id="bib-rueckfall">
{% if ue %}{% set ux = ue.texte %}{% set uz = ue.zustimmung_text %}
{# Upload in den eigenen Speicher: Fortschritt unter dem Kopf (dazu die Statuszeile oben), Ablegen-Fläche, Dialog in drei Schritten #}
<section class="ue-lauf" id="ue-lauf" aria-labelledby="ue-lauf-text" hidden>
  <p id="ue-lauf-text" class="ue-lauf-text"></p>
  <div class="balken" id="ue-lauf-balken" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-labelledby="ue-lauf-text"><i></i></div>
  <p class="klein" id="ue-lauf-meldung" role="status"></p><p class="klein ue-hinweis" id="ue-lauf-hinweis"></p>
  <div class="zeile"><button type="button" class="klein" id="ue-lauf-abbrechen">{{ ux.abbrechen }}</button><button type="button" class="klein" id="ue-lauf-zu" hidden>{{ ux.schliessen }}</button></div>
</section>
<div class="ue-ablage" id="ue-ablage" hidden><div class="ue-ablage-karte"><span aria-hidden="true">+</span><p>{{ ux.ablegen_aktiv }}</p></div></div>
<dialog class="ue-dialog" id="ue-dialog" aria-labelledby="ue-dialog-titel">
  <span class="unsichtbar" id="ue-dialog-titel">{{ ux.knopf }}</span>
  <section id="ue-erlauben" aria-labelledby="ue-erlauben-h" hidden><form id="ue-erlauben-form" class="ue-form">
    <h2 id="ue-erlauben-h">{{ ux.erlauben_titel }}</h2><p>{{ ux.erlauben_text }}</p>
    <ul class="ue-zusagen">{% for z in ux.zusagen %}<li><span aria-hidden="true">✓</span> {{ z }}</li>{% endfor %}</ul>
    <h3>{{ ux.ordner_titel }}</h3>
    <label class="feld">{{ ux.ordner_label }}<input type="text" id="ue-ordner" maxlength="1024" autocomplete="off" autocapitalize="none" spellcheck="false" list="ue-ordner-liste" aria-describedby="ue-beispiel ue-ordner-klein"></label>
    <datalist id="ue-ordner-liste"></datalist>
    <p class="klein mono" id="ue-beispiel"></p><p class="klein" id="ue-ordner-klein">{{ ux.ordner_klein }} {{ ux.probe_info }}</p>
    <p class="hinweis" id="ue-erlauben-meldung" role="status" hidden></p>
    <div class="zeile"><button type="submit" class="voll" id="ue-erlauben-knopf">{{ ux.erlauben_knopf }}</button><button type="button" data-ue-zu>{{ ux.abbrechen }}</button></div>
  </form></section>
  <section id="ue-zustimmung" aria-labelledby="ue-zustimmung-h" hidden><form id="ue-zustimmung-form" class="ue-form">
    <h2 id="ue-zustimmung-h">{{ uz.titel }}</h2>
    <ol class="ue-punkte">{% for p in uz.punkte %}<li><b>{{ p[0] }}</b> {{ p[1] }}</li>{% endfor %}</ol>
    <label class="ue-haken"><input type="checkbox" id="ue-haken" required> <span>{{ uz.haekchen }}</span></label>
    <details class="ue-details"><summary>{{ ux.zustimmung_details }}</summary><p class="klein">{{ uz.details }}</p>
      <p class="klein"><a href="/agb" target="_blank" rel="noopener">{{ t.agb }}</a> · <a href="/datenschutz" target="_blank" rel="noopener">{{ t.datenschutz }}</a></p></details>
    <p class="hinweis" id="ue-zustimmung-meldung" role="status" hidden></p>
    <div class="zeile"><button type="submit" class="voll" id="ue-zustimmen" disabled>{{ ux.zustimmung_knopf }}</button><button type="button" data-ue-zu>{{ ux.abbrechen }}</button></div>
  </form></section>
  <section id="ue-pruefung" aria-labelledby="ue-ziel" hidden>
    <h2 id="ue-ziel" class="ue-ziel"></h2>
    <ul class="ue-p-zeilen" id="ue-p-zeilen" role="status"></ul>
    <div class="zeile"><button type="button" class="voll" id="ue-start" hidden></button><button type="button" data-ue-zu>{{ ux.schliessen }}</button></div>
  </section>
</dialog>
<span class="unsichtbar" id="ue-live" role="status" aria-live="polite"></span>
<script type="application/json" id="ue-t">{{ ue | tojson }}</script>
<script src="/static/beta_hash.js" defer data-seite></script>
<script src="/static/upload_eigen.js" defer data-seite></script>
{% endif %}
<noscript><p class="hinweis klein">{{ b.ohne_js }}</p></noscript>
<form class="filter" method="get">
  <input name="suche" type="search" aria-label="{{ t.suche }}" placeholder="{{ t.suche }}" value="{{ filter.suche or '' }}" maxlength="100">
  {# Energie ohne JavaScript: zwei Auswahlen mit den vier Stufen; die Werte sind die internen Grenzen (1 · 5 · 6 · 7 bzw. 4 · 5 · 6 · 9) #}
  <label>{{ t.energie }} <select name="energie_min" aria-label="{{ t.energie }} ≥"><option value="">–</option>{% for z, w in (('o', 1), ('+', 5), ('++', 6), ('+++', 7)) %}<option value="{{ w }}"{% if filter.energie_min | string == w | string %} selected{% endif %}>{{ z }}</option>{% endfor %}</select>–<select name="energie_max" aria-label="{{ t.energie }} ≤"><option value="">–</option>{% for z, w in (('o', 4), ('+', 5), ('++', 6), ('+++', 9)) %}<option value="{{ w }}"{% if filter.energie_max | string == w | string %} selected{% endif %}>{{ z }}</option>{% endfor %}</select></label>
  <label>{{ t.tempo }} <input type="number" name="bpm_min" value="{{ filter.bpm_min or '' }}">–<input type="number" name="bpm_max" value="{{ filter.bpm_max or '' }}"></label>
  <button>{{ t.filtern }}</button>
</form>
{% if not daten.titel %}<p>{{ t.keine_titel | ohne_desktop if store_app else t.keine_titel }}</p>{% endif %}
<div class="tabelle"><table>
<thead><tr>{% for name in t.spalten %}<th scope="col"{% if loop.index in (3, 4, 8) %} class="zahl"{% endif %}>{{ name }}</th>{% endfor %}</tr></thead>
<tbody>
{% for z in daten.titel %}
  {% set cam = z.camelot %}{% set cam_stil = cam | camelot_stil %}{% set gem = z.camelot_gemessen %}{% set gem_stil = gem | camelot_stil %}
  <tr><td><a href="{{ titel_basis or '/titel/' }}{{ z.titel_id }}">{% if z.interpret or z.titel %}{{ z.interpret or '–' }} – {{ z.titel or '–' }}{% else %}<span class="leise">{{ b.ohne_namen }}</span>{% endif %}</a></td>
      <td>{{ z.leitgenre or '' }}</td>
      <td class="zahl">{{ z.bpm | bpm_liste if z.bpm else '' }}</td>
      <td class="zahl">{{ z.bpm_gemessen | bpm_liste if z.bpm_gemessen else '' }}</td>
      <td>{% if cam_stil %}<span class="cam" style="{{ cam_stil }}" title="{{ cam | tonart_titel(sprache, true) }}">{{ cam | tonart }}</span>{% elif cam %}{{ cam }}{% endif %}</td>
      <td>{% if gem_stil %}<span class="cam" style="{{ gem_stil }}" title="{{ gem | tonart_titel(sprache) }}">{{ gem | tonart }}</span>{% elif gem %}{{ gem }}{% endif %}</td>
      <td>{{ energie_felder(z.energie, t) }}</td>
      <td class="zahl">{% if z.dauer_s %}{{ '%d:%02d'|format(z.dauer_s // 60, z.dauer_s % 60) }}{% endif %}</td></tr>
{% endfor %}
</tbody>
</table></div>
</div>
{# labels: Anzeigenamen der Modell- und DJ-Labels (design/labels.json), dieselbe Tabelle wie im Titelblatt.
   blatt, herkunft: die Texte des Überblicks für das Fly-in (titelblatt.js zeichnet ihn wie auf der Detailseite). #}
{# gefuehl (Paket „Gefühl“, 11.11.2026): Texte für „Filter ohne Treffer“ und Tor für die Lade-Silhouetten – nur mit Menü C; App-Hüllen ohne die Fähigkeit bekommen den Schlüssel nicht (#t wie vorher).
   ort, abspielen: Texte zu „wo liegt die Datei“ und zum Abspielknopf – nur mit verbundenem Onlinespeicher (sonst zeigt die Seite weder Symbol noch Filter). #}
{# Store-Blocker B3 (08.11.2026): die iOS-App nennt die Desktop-App nicht – weder in der leeren Library noch am Ort „lokal“ #}
{% set lw = b.leer_wege if analyse_live else dict(b.leer_wege, analyse=none) %}{% if store_app %}{% set lw = dict(lw, app=none, ohne_speicher=t.store.leer_ohne_speicher) %}{% endif %}
<script type="application/json" id="t">{{ dict(dict(dict((dict(b, export_kommt=none) if store_app else b), handy=dict(t.plus.bib, schliessen=t.nav.schliessen), labels=t.blatt.labels, blatt=feld, flyin=dict(t.flyin, cues=t.cues), herkunft=t.herkunft, tracks=t.tracks, ort=(dict(t.ort, hinweis=(t.ort.hinweis if abspielen_an else t.ort.hinweis_ohne), lokal=(t.store.ort_lokal if ios_app else t.ort.lokal)) if (status_speicher or desktop_app) else none), abspielen=t.player.abspielen, leer_speicher=speicher_da, leer_abspielen=abspielen_live, leer_analyse=analyse_live, leer_wege=lw, als_intelligent=t.generator.bib_knopf, als_intelligent_hilfe=t.generator.bib_knopf_hilfe, explorer_graben=t.explorer.bib_knopf, explorer_graben_hilfe=t.explorer.bib_knopf_t, medium=(dict(digital=t.menue.digital, vinyl=t.menue.vinyl, anzahl=t.menue.medium_anzahl, anzahl_von=t.menue.medium_anzahl_von) if menue_c and not demo else none), rb_bewertung=(rekordbox_bewertung is defined and rekordbox_bewertung), **t.neu), **dict({"rekordbox": t.rekordbox.bib} if rekordbox_gespielt else {}, **({"demo_vorgabe": demo_vorgabe} if demo_neu and demo_vorgabe else {}))), **({"gefuehl": t.gefuehl.bib} if menue_c else {}))|tojson }}</script>
<script src="/static/diagramme.js" defer data-seite></script>
<script src="/static/titelblatt.js" defer data-seite></script>
<script src="/static/flyin_ansicht.js" defer data-seite></script>
<script type="application/json" id="gx-t">{{ export_texte[sprache].grid | tojson }}</script>
<script src="/static/musikordner.js" defer data-seite></script>
<script src="/static/grid_export.js" defer data-seite></script>
<script src="/static/spalten.js" defer data-seite></script>
{# menue.js vor bibliothek.js: die Library liest die Wahl des Medium-Schalters beim Start (TimbreMenue.start) #}
{% if not demo and menue_c %}<script src="/static/menue.js" defer data-seite></script>{% endif %}
<script src="/static/bibliothek.js" defer data-seite></script>
<script src="/static/plordnen.js" defer data-seite></script>
{% endblock %}