{# Timbre-Speicher (Beta, 25.10.2026) unter Quellen – nur für freigeschaltete Konten (`beta` = beta_speicher.stand, sonst fehlt die
   Karte ganz). Gestaltung nach dem Prototyp .superpowers/sdd/2026-10-25-timbrecloud/prototypen/upload.html: Kopf mit Belegung,
   drei Leitsätze, Pflicht-Hinweis mit DJ-Schalter (ohne JavaScript nutzbar), danach Ablegen/Wählen, Prüfen, Upload mit Restzeit
   und Pause (static/beta_upload.js, Texte als JSON #beta-t), unten Beenden mit Rückfrage. Kein Inline-Skript. #}
{% from "schalter.html" import schalter %}
{# Bereich „Upload“ (Vorgabe Maintainer 27.10.2026): steht IMMER unter Quellen, mit Anker #upload und Sprungmarke oben auf der Seite.
   (a) freigeschaltet → Karte mit Ablage und „Nach neuer Musik suchen“; (b) Hinweis fehlt → Pflicht-Hinweis in der Karte;
   (c) nicht freigeschaltet → ehrlicher Satz mit Kontakt; (d) Verwaltung → zusätzlich „Timbre-Speicher für mich einrichten“
   (gleicher Ablauf wie Freischalten in der Verwaltung, als zweiter Speicher neben dem eigenen) und Link zur Verwaltung. #}
{% set up = t.tspeicher.upload %}
<section class="raster upload-bereich" id="upload" aria-labelledby="upload-h">
<h2 id="upload-h">{{ up.titel }}</h2>
{% if beta_hinweis == 'selbst' %}<p class="hinweis" role="status" id="upload-selbst-ok">{{ up.selbst_ok }}</p>{% endif %}
{% if beta_selbst_fehler %}<p class="hinweis" role="alert" id="upload-selbst-fehler">{{ up.selbst_fehler }}</p>{% endif %}
{% if not beta %}
<div class="karte raster upload-aus" id="upload-aus">
  <p>{{ up.aus }}</p>
  {% if verwaltung %}{% if beta_selbst %}
  <form method="post" action="/quellen/beta-speicher/selbst" class="raster upload-selbst" id="upload-selbst">
    <p class="klein">{{ up.selbst_text.replace("{g}", beta_selbst.vorgabe_gb | string) }}</p>
    <div class="zeile"><button type="submit" class="voll" id="upload-selbst-knopf">{{ up.selbst_knopf }}</button></div>
  </form>{% endif %}
  <p class="klein"><a href="/verwaltung/speicher" id="upload-verwaltung">{{ up.verwaltung_link }} <span aria-hidden="true">→</span></a></p>
  {% endif %}
</div>
{% endif %}
{% if beta %}{% set b = t.tspeicher %}{% set pz = beta.prozent %}
<section class="karte raster btk" id="beta-speicher" aria-labelledby="btk-h" data-zustand="{{ beta.zustand }}">
  <div class="btk-kopf">
    <div><p class="eyebrow">{{ b.eyebrow }}</p>
      <h3 id="btk-h" class="btk-titel">{{ b.titel }} <span class="chip btk-beta">{{ b.beta }}</span></h3></div>
    <p class="btk-zustand" id="btk-zustand"><i class="btk-led" aria-hidden="true"></i>{{ b.zustaende[beta.zustand] }}</p>
  </div>
  {% if beta_hinweis == 'beendet' %}<p class="hinweis" role="status">{{ b.loescht }}</p>{% endif %}
  <div class="btk-platz">
    <p><b class="zahl" id="btk-belegt">{{ beta.belegt | gb(sprache) }}</b> <span class="leise">{{ b.belegt.replace("{b}", "").replace("{k}", beta.kontingent | gb(sprache)) | trim }}</span>
      <span class="btk-frei zahl" id="btk-frei">{{ b.frei.replace("{f}", beta.frei | gb(sprache)) }}</span></p>
    <div class="balken ampel" data-stufe="{{ beta.stufe }}" role="progressbar" aria-label="{{ b.belegt.replace('{b}', beta.belegt | gb(sprache)).replace('{k}', beta.kontingent | gb(sprache)) }}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ pz }}" aria-valuetext="{{ b.platz.prozent.replace('{p}', pz | string) }}"><i class="zu" id="btk-balken" style="width:{{ pz }}%"></i></div>
    <p class="klein" id="btk-dateien"><span class="zahl">{{ b.platz.prozent.replace("{p}", pz | string) }}</span> · {{ b.datei_eins if beta.dateien == 1 else b.dateien.replace("{n}", beta.dateien | zahl(sprache)) }}</p>
    {% if beta.zustand == 'aktiv' %}{% if beta.voll %}<p class="hinweis btk-voll" role="status" id="btk-voll">{{ b.platz.voll }}</p>
    {% elif pz >= 80 %}<p class="hinweis btk-fast" id="btk-fast">{{ b.platz.fast_voll.replace("{f}", beta.frei | gb(sprache)) }}</p>{% endif %}{% endif %}
  </div>
  {% if beta.zustand in ('anlegen', 'wartet') %}<p class="hinweis" role="status">{{ b.einrichten }}</p>
  {% elif beta.zustand == 'fehler' %}<p class="hinweis" role="status">{{ b.hakt }}</p>
  {% elif beta.zustand == 'entziehen' %}<p class="hinweis" role="status">{{ b.loescht }}</p>
  {% else %}{% if not beta.zustimmung %}
  {# Pflicht-Hinweis vor dem ersten Upload: ohne den Schalter auf OK geht es nicht weiter (auch der Server lehnt ab). Mit
     JavaScript ohne Neuladen (beta_upload.js) – abgelegte Dateien bleiben gemerkt und werden danach geprüft. #}
  <form method="post" action="/quellen/beta-speicher/zustimmung" class="raster btk-hinweis" id="btk-hinweis" aria-labelledby="btk-hinweis-h">
    <h4 id="btk-hinweis-h">{{ b.hinweis_titel }}</h4>
    <ul class="btk-liste">{% for satz in b.hinweis %}<li>{{ satz }}</li>{% endfor %}</ul>
    {{ schalter(b.hinweis_taste, b.hinweis_schalter, name="ok", id="btk-ok", klasse="btk-legal", hilfe_id="btk-ok-hilfe") }}
    {% if beta_hinweis == 'zustimmung-fehlt' %}<p class="hinweis" role="alert" id="btk-ok-hilfe">{{ b.hinweis_fehlt }}</p>{% else %}<p class="klein" id="btk-ok-hilfe">{{ b.hinweis_fehlt }}</p>{% endif %}
    <p class="hinweis" id="btk-gemerkt" role="status" hidden></p>
    <div class="zeile"><button type="submit" class="voll">{{ b.hinweis_knopf }}</button></div>
  </form>
  {% endif %}
  <div class="raster btk-upload" id="btk-upload"{% if not beta.zustimmung or beta.voll %} hidden{% endif %} data-stueck="{{ beta.stueck }}" data-max="{{ beta.datei_max }}" data-endungen="{{ beta.endungen | join(',') }}">
    {# „Nach neuer Musik suchen“ (25.10.2026): Musikordner → Timbre-Speicher → Analyse. Chromium/Edge merken sich den Ordner
       (File System Access, Handle nur in diesem Browser); Safari/Firefox wählen ihn bei jedem Suchen neu. Pfade bleiben im Browser. #}
    <div class="raster btk-scan" id="btk-scan" aria-labelledby="btk-scan-h">
      <h4 id="btk-scan-h">{{ b.scan_titel }}</h4>
      <ol class="btk-weg" aria-label="{{ b.weg_name }}">{% for schritt in b.weg_schritte %}<li>{{ schritt }}</li>{% endfor %}</ol>
      <p class="mono klein" id="btk-ordner-name" hidden></p>
      <div class="zeile"><button type="button" class="voll" id="btk-suchen" disabled>{{ b.suchen }}</button>
        <button type="button" id="btk-verbinden" disabled hidden>{{ b.js.ordner_verbinden }}</button></div>
      <p class="klein" id="btk-hilfe-merken" hidden>{{ b.hilfe_merken }}</p>
      <p class="klein" id="btk-hilfe-ohne">{{ b.hilfe_ohne }}</p>
      <p class="hinweis" id="btk-ordner-meldung" role="status" hidden></p>
    </div>
    <div class="raster btk-pruef" id="btk-pruef" hidden>
      <p id="btk-pruef-stand"></p>
      <div class="btk-lade" id="btk-pruef-lade"></div>
      <div class="balken" role="progressbar" id="btk-pruef-balken" aria-label="{{ b.js.pruef_liste }}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" hidden><i class="zu"></i></div>
      <ul class="btk-drei btk-zahlen">
        <li class="gut"><span class="btk-sym" aria-hidden="true">✓</span><span id="btk-p-bereit"></span></li>
        <li><span class="btk-sym" aria-hidden="true">=</span><span id="btk-p-doppelt"></span></li>
        <li class="warn"><span class="btk-sym" aria-hidden="true">✕</span><span id="btk-p-draussen"></span></li>
      </ul>
      <p class="klein" id="btk-passt"></p>
      <details class="btk-details" id="btk-pruef-details" hidden><summary>{{ b.js.pruef_liste }}</summary>
        <ul class="btk-dateiliste" id="btk-pruef-liste" tabindex="0" aria-label="{{ b.js.pruef_liste }}"></ul></details>
      <div class="zeile"><button type="button" class="voll" id="btk-start" disabled hidden></button></div>
    </div>
    <div class="raster btk-lauf" id="btk-lauf" hidden>
      <h4><span id="btk-lauf-zustand"></span> <span class="zahl" id="btk-prozent">0 %</span></h4>
      <p class="mono klein" id="btk-lauf-zeile"></p>
      <div class="btk-lade" id="btk-lauf-lade"></div>
      <div class="balken dick" role="progressbar" id="btk-lauf-balken" aria-label="{{ b.js.balken_name }}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i class="zu"></i></div>
      <dl class="kennzahlen btk-werte">
        <div><dt>{{ b.js.wert_hochgeladen }}</dt><dd class="zahl" id="btk-gb"></dd></div>
        <div><dt>{{ b.js.wert_rest }}</dt><dd class="zahl" id="btk-rest"></dd></div>
      </dl>
      <div class="zeile"><button type="button" class="voll" id="btk-pause" aria-describedby="btk-pause-hilfe"></button>
        <button type="button" id="btk-abbrechen"></button>
        <button type="button" id="btk-neu" hidden></button></div>
      <p class="klein" id="btk-pause-hilfe">{{ b.js.pause_hilfe }}</p>
      <p class="btk-ende-text" id="btk-ende" hidden></p>
      <p class="klein" id="btk-analyse" hidden>{{ b.js.analyse }} <a href="/analysen">→</a></p>
      <details class="btk-details" id="btk-details" open><summary id="btk-details-sum">{{ b.js.zeilen_name }}</summary>
        <ul class="btk-dateiliste" id="btk-liste" tabindex="0" aria-label="{{ b.js.zeilen_name }}"></ul></details>
    </div>
    <p class="hinweis btk-meldung" id="btk-meldung" role="alert" hidden></p>
    <div class="btk-drop" id="btk-drop" tabindex="-1" aria-label="{{ b.fokus_ablage }}">
      <span class="btk-sym" aria-hidden="true">⇪</span>
      <p><b>{{ b.drop_titel }}</b><br><span class="leise">{{ b.drop_text }}</span></p>
      <div class="zeile"><button type="button" id="btk-ordner" disabled>{{ b.ordner }}</button><button type="button" id="btk-dateien-waehlen" disabled>{{ b.dateien_waehlen }}</button></div>
      <p class="klein">{{ b.formate }}</p>
      <input type="file" id="btk-eingabe-ordner" class="unsichtbar" webkitdirectory multiple tabindex="-1" aria-hidden="true">
      <input type="file" id="btk-eingabe-dateien" class="unsichtbar" multiple accept=".wav,.aif,.aiff,.flac,.mp3,.m4a,audio/*" tabindex="-1" aria-hidden="true">
    </div>
    <p class="btk-live unsichtbar" aria-live="polite" id="btk-live"></p>
  </div>
  {% if beta.zustimmung %}<noscript><p class="hinweis klein">{{ b.ohne_js }}</p></noscript>{% endif %}
  {% endif %}
  <ul class="btk-drei" aria-label="{{ b.hinweis_titel }}">{% for titel, text in b.drei %}<li><b>{{ titel }}</b> <span>{{ text }}</span></li>{% endfor %}</ul>
  <p class="klein">{{ b.weg }}</p>
  {# Beenden und Trennen nur durch die Verwaltung (Vorgabe Maintainer 25.10.2026); die Kontolöschung löscht den Speicher weiterhin #}
  <p class="klein btk-verwaltet" id="btk-verwaltet">{{ b.verwaltet }}</p>
  <script type="application/json" id="beta-t">{{ dict(b.js, sprache=sprache, konto=(nutzer | konto_merker), zustimmung=beta.zustimmung, rest_woerter=t.status.rest, frei=beta.frei, belegt=beta.belegt, kontingent=beta.kontingent) | tojson }}</script>
</section>
{% endif %}
</section>