{% extends "basis.html" %}{% block titel %}{{ be.titel }} – Timbre{% endblock %}
{% block kopf %}<link rel="stylesheet" href="/static/bass_eichung.css">{% endblock %}
{# /verwaltung/bass-eichung (29.10.2026): 40 Tracks der eigenen Library von Hand beschriften – Schritt 1 des Konzepts „Bassline-Matching“.
   Gerüst vom Server (alle Wahlen als echte Radio-Knöpfe in Fieldsets), static/bass_eichung.js setzt je Track Name, Wahl und Fortschritt,
   speichert jede Wahl sofort (POST /verwaltung/bass-eichung/label) und bedient die Tasten. Daten: #be-daten (Auswahl mit Labels),
   Texte: #be-t. Image Schemas: links → rechts = Zeit (Muster-Bilder, Überblick 1 … 40, Notenlänge kurz → lang), oben = höher
   (Mid-Bass über Sub), Mitte = jetzt (der aktuelle Track groß in der Karte), das Open-Key-Rad wie überall: 1m oben, im Uhrzeigersinn. #}
{% block inhalt %}
<div class="raster verwaltung be" id="be">
<div><div class="eyebrow">{{ be.eyebrow }}</div><h1>{{ be.titel }}</h1>
  <p class="leise be-lead">{{ be.lead }}</p>
  <nav class="vunternav klein" aria-label="{{ t.freigabe.verwaltung.titel }}"><a href="/verwaltung">← {{ t.freigabe.verwaltung.titel }}</a>
    <a href="/verwaltung/last">{{ t.vlast.titel }}</a><a href="/verwaltung/rechte">{{ t.vrechte.titel }}</a></nav>
  <noscript><p class="hinweis">{{ be.ohne_js }}</p></noscript></div>
{# App-Fenster (30.10.2026, an-client-20261030-*-paket-formulare.md): Die Eichung braucht eine starke Sitzung im Browser und schreibt
   über eine Cookie-Route (POST /verwaltung/bass-eichung/label), die die App nicht durchreicht – dort nur der Weg in den Browser. #}
{% if desktop_app %}
<p class="hinweis" id="be-nur-browser" role="status">{{ be.nur_browser }} <a href="{{ basis_url }}/verwaltung/bass-eichung" target="_blank" rel="noopener" data-extern>{{ be.im_browser }} ↗</a></p>
{% elif schema_fehlt %}
<p class="hinweis be-warnung" id="be-schema" role="status">{{ be.schema_fehlt | replace("{datei}", einmal_datei) }}</p>
{% elif not eintraege %}
<p class="hinweis" id="be-leer" role="status">{{ be.leer }}</p>
{% else %}
<script type="application/json" id="be-daten">{{ be_daten | tojson }}</script>
<script type="application/json" id="be-t">{{ dict(be, sprache=sprache) | tojson }}</script>
<section class="be-stand" aria-labelledby="be-fortschritt">
  <p class="be-zeile"><b id="be-fortschritt" class="mono">{{ be.fortschritt | replace("{n}", be_daten.fortschritt.fertig | string) | replace("{m}", be_daten.fortschritt.gesamt | string) }}</b>
    <span class="klein">{{ be.pause }}</span></p>
  <div class="balken be-balken" role="progressbar" aria-labelledby="be-fortschritt" aria-valuemin="0" aria-valuemax="{{ be_daten.fortschritt.gesamt }}"
       aria-valuenow="{{ be_daten.fortschritt.fertig }}"><i id="be-balken"></i></div>
  {% if eintraege | length < anzahl %}<p class="klein" id="be-weniger">{{ be.weniger | replace("{n}", eintraege | length | string) }}</p>{% endif %}
</section>

<article class="karte be-karte" id="be-karte" aria-labelledby="be-name">
  <div class="be-links">
    <div class="be-track">
      <p class="eyebrow mono" id="be-nr">–</p>
      <h2 id="be-name" class="be-name">–</h2>
      <p class="leise be-artist" id="be-artist"></p>
      <p class="klein mono be-meta"><span id="be-bpm"></span> <span id="be-genre"></span></p>
    </div>
    <div class="be-spielen">
      <button type="button" class="voll be-play" id="be-play" aria-pressed="false"><span class="be-play-zeichen" aria-hidden="true">▶</span><span id="be-play-text">{{ be.abspielen }}</span><kbd aria-hidden="true">␣</kbd></button>
      <button type="button" id="be-mitte">{{ be.mitte }}<kbd aria-hidden="true">M</kbd></button>
      <button type="button" id="be-drop" hidden><span id="be-drop-text">{{ be.drop }}</span><kbd aria-hidden="true">D</kbd></button>
    </div>
    <p class="klein be-hinweis" id="be-hinweis" role="status"></p>

    <fieldset class="be-feld be-ton">
      <legend>{{ be.grundton }}</legend>
      <p class="klein" id="be-ton-hilfe">{{ be.grundton_hilfe }}</p>
      <div class="be-rad" role="presentation">
        {% for r in rad %}<label class="be-ton-wahl be-r{{ r.platz }}"><input type="radio" name="grundton" value="{{ r.ton }}" aria-describedby="be-ton-hilfe"><span class="be-ton-n">{{ be.toene[r.ton] }}</span><span class="be-ton-ok mono">{{ r.ok }}</span></label>
        {% endfor %}<label class="be-ton-wahl be-ton-mitte"><input type="radio" name="grundton" value="-1"><span class="be-ton-n">{{ be.weiss_nicht }}</span></label>
      </div>
    </fieldset>
  </div>

  <div class="be-rechts">
    <fieldset class="be-feld be-muster">
      <legend>{{ be.muster_titel }}</legend>
      <p class="klein" id="be-muster-hilfe">{{ be.muster_hilfe }}</p>
      <div class="be-muster-liste">
        {% for m in muster %}<label class="be-wahl be-muster-wahl"><input type="radio" name="muster" value="{{ m }}" aria-describedby="be-muster-hilfe">
          <kbd aria-hidden="true">{{ loop.index }}</kbd><span class="be-wahl-text"><b>{{ be.muster[m] }}</b><span class="klein">{{ be.muster_lang[m] }}</span></span>
          <span class="be-bild" aria-hidden="true">{% for z in bild[m] %}<i class="{% if z == 'x' %}an{% elif z == 'h' %}an h{% endif %}{% if loop.index0 % 4 == 0 %} k{% endif %}"></i>{% endfor %}</span></label>
        {% endfor %}
      </div>
    </fieldset>

    <div class="be-zwei">
      <fieldset class="be-feld be-lage">
        <legend>{{ be.lage }}</legend>
        <div class="be-stapel">
          {% for l in lagen %}<label class="be-wahl be-lage-{{ l }}"><input type="radio" name="lage" value="{{ l }}"><span class="be-wahl-text"><b>{{ be.lagen[l] }}</b><span class="klein">{{ be.lagen_lang[l] }}</span></span></label>
          {% endfor %}
        </div>
      </fieldset>
      <fieldset class="be-feld be-laenge">
        <legend>{{ be.laenge }}</legend>
        <div class="be-reihe">
          {% for l in laengen %}<label class="be-wahl be-laenge-{{ l }}"><input type="radio" name="laenge" value="{{ l }}"><span class="be-wahl-text"><b>{{ be.laengen[l] }}</b><span class="be-strich" aria-hidden="true"></span></span></label>
          {% endfor %}
        </div>
      </fieldset>
    </div>

    <div class="be-notiz">
      <label for="be-notiz-feld">{{ be.notiz }}</label>
      <textarea id="be-notiz-feld" maxlength="280" rows="2" aria-describedby="be-notiz-hilfe"></textarea>
      <p class="klein" id="be-notiz-hilfe">{{ be.notiz_hilfe }}</p>
    </div>
  </div>

  <nav class="be-schritte" aria-label="{{ be.schritte }}">
    <button type="button" id="be-zurueck"><span aria-hidden="true">←</span> {{ be.zurueck }}<kbd aria-hidden="true">{{ be.taste_zurueck }}</kbd></button>
    <p class="klein be-status" id="be-status" role="status" aria-live="polite"></p>
    <button type="button" class="voll" id="be-weiter">{{ be.weiter }}<kbd aria-hidden="true">N</kbd> <span aria-hidden="true">→</span></button>
  </nav>
</article>

<details class="aufklapp be-alle">
  <summary>{{ be.alle_n | replace("{m}", eintraege | length | string) }}</summary>
  <ol class="be-uebersicht" id="be-uebersicht"></ol>
</details>

<section class="be-fuss" aria-labelledby="be-export">
  <p><a class="knopf" href="/verwaltung/bass-eichung/export" download id="be-export">{{ be.export }}</a></p>
  <p class="klein">{{ be.export_hilfe }}</p>
  <details class="aufklapp be-tasten-k">
    <summary>{{ be.tasten }}</summary>
    <dl class="be-tasten">{% for k, w in be.tastenliste %}<div><dt><kbd>{{ k }}</kbd></dt><dd>{{ w }}</dd></div>{% endfor %}</dl>
  </details>
</section>
<script src="/static/bass_eichung.js" defer></script>
{% endif %}
</div>
{% endblock %}