{% extends "basis.html" %}
{# Assistent „Konto schützen“ (Konzept, Zweiter Faktor): Einstieg mit Wahl (1/3) · Passkey oder App (2/3) ·
   Wiederherstellungscodes (3/3) · Abschluss (S-15). Eine Aufgabe je Schritt; Fokus beim Laden auf der h1 (anmeldung.js), Fortschritt
   als Liste mit aria-current. Alle Formulare über den Settings-Vorschalter (Frische, „letzter Weg“, Häkchen bei den Codes).
   23.10.2026 – mit `ziel` (Positivliste, nur „speicher“): Sicherheitsschritt vor dem Onlinespeicher. Passkey oder App (1/2) ·
   Wiederherstellungscodes (2/2; nach einem Passkey überspringbar) · Abschluss „bereit“ OHNE strengen Schutz (der Mail-Code
   bleibt allein gültig). `zq` hängt `&ziel=…` an jeden Link und jedes versteckte weiter/hier-Feld. #}
{% set nr = ({"passkey": 1, "app": 1, "codes": 2, "bereit": 2, "einstieg": 1, "fertig": 2} if ziel else {"einstieg": 1, "passkey": 2, "app": 2, "codes": 3, "fertig": 3, "bereit": 3})[schritt] %}{% set von = 2 if ziel else 3 %}{% set schritt_text = ta.s_schritt_von | replace("{m}", von | string) %}
{% block titel %}{% if v and v.fehler %}{{ ta.fehler_praefix }}{% endif %}{% if nr and schritt not in ("fertig", "bereit") %}{{ schritt_text | replace("{n}", nr | string) }}: {% endif %}{{ ta.titel.sichern if ziel or schritt == "bereit" else ta.titel.schuetzen }} – Timbre{% endblock %}
{% block kopf %}<script src="/static/anmeldung.js" defer></script>{% if aussehen %}<script src="/static/aussehen.js" defer></script>{% endif %}{% endblock %}
{% block hauptklasse %} class="an-haupt"{% endblock %}
{% block inhalt %}{% set nr = ({"passkey": 1, "app": 1, "codes": 2, "bereit": 2, "einstieg": 1, "fertig": 2} if ziel else {"einstieg": 1, "passkey": 2, "app": 2, "codes": 3, "fertig": 3, "bereit": 3})[schritt] %}{% set von = 2 if ziel else 3 %}{% set schritt_text = ta.s_schritt_von | replace("{m}", von | string) %}
<div class="an-lava" aria-hidden="true"></div>
<section class="an-karte an-mittel an-buehne an-assistent" aria-labelledby="an-h1" data-fokus-titel>
  {% set titel = {"einstieg": ta.s_einstieg_titel, "passkey": ta.s_pk_titel, "app": ta.s_app_verbinden, "codes": ta.s_codes_titel,
                   "fertig": ta.s_fertig_titel, "bereit": ta.s_bereit_titel}[schritt] %}
  {% if schritt not in ("fertig", "bereit") %}
  <ol class="an-fortschritt{{ " zwei" if von == 2 else "" }}" aria-label="{{ ta.s_fortschritt }}">{% for i in range(1, von + 1) %}<li class="{{ 'ok' if i < nr else ('ist' if i == nr else '') }}"{% if i == nr %} aria-current="step"{% endif %}>{{ schritt_text | replace("{n}", i | string) }}{% if i < nr %}<span class="unsichtbar"> – {{ ta.erledigt }}</span>{% endif %}</li>{% endfor %}</ol>
  {% endif %}
  <h1 id="an-h1" class="an-titel" tabindex="-1">{{ titel }}</h1>{# S-21: Fehlerzusammenfassung wie überall direkt nach der h1 #}
  {% if v %}{% if v.fehler %}<div class="an-fehlerliste" id="fehlerliste" tabindex="-1" role="group" aria-labelledby="fehlerliste-h"><h2 id="fehlerliste-h">{{ ta.fehler_ueberschrift }}</h2>
    <ul>{% for f in v.fehler %}<li>{% if f.feld %}<a href="#{{ f.feld }}">{{ f.text }}</a>{% else %}{{ f.text }}{% endif %}</li>{% endfor %}</ul></div>{% endif %}
  {% for h in v.hinweise %}<p class="an-meldung {{ h.typ }}" role="status">{{ h.text }}</p>{% endfor %}{% endif %}
  {% if schritt == "einstieg" %}
    <p>{{ ta.s_einstieg_text }}</p><p class="klein">{{ ta.s_freiwillig }}</p>
    <form method="get" action="/konto/schuetzen" class="an-formular">{% if ziel %}<input type="hidden" name="ziel" value="{{ ziel }}">{% endif %}
      <fieldset class="an-wahl"><legend>{{ ta.s_wahl }}</legend>
        <label class="an-wahlkarte"><input type="radio" name="schritt" value="passkey" required><span><b>{{ ta.s_passkey_titel }}</b><span>{{ ta.s_passkey_text }}</span></span></label>
        <label class="an-wahlkarte"><input type="radio" name="schritt" value="app"><span><b>{{ ta.s_app_titel }}</b><span>{{ ta.s_app_text }}</span></span></label>
      </fieldset>
      <div class="an-gleich2"><button class="knopf voll" type="submit">{{ ta.s_weiter }}</button><a class="knopf" href="{{ '/quellen#speicher' if ziel else '/konto/anmeldewege' }}">{{ ta.s_spaeter }}</a></div>
    </form>
  {% elif schritt == "passkey" %}
    {% if wege.passkey %}<p>{{ ta.s_pk_da }}</p><p><a class="knopf voll" href="/konto/schuetzen?schritt=codes{{ zq }}">{{ ta.s_weiter }}</a></p>
    {% else %}<p>{{ ta.s_pk_text }}</p>
    <form method="post" action="{{ v.action }}" class="an-formular an-nurjs"><input type="hidden" name="csrf_token" value="{{ v.csrf }}"><input type="hidden" name="method" value="passkey">
      <input type="hidden" name="weiter" value="/konto/schuetzen?schritt=codes{{ zq }}"><input type="hidden" name="hier" value="/konto/schuetzen?schritt=passkey{{ zq }}">
      <input type="hidden" name="passkey_create_data" value="{{ v.passkey_create }}"><input type="hidden" name="passkey_settings_register" value="">
      <button class="knopf voll an-breit" type="button" data-passkey="anlegen" data-laeuft="{{ ta.passkey_laeuft }}" data-abgebrochen="{{ ta.passkey_abgebrochen }}"><span class="an-pk" aria-hidden="true"></span>{{ ta.s_pk_titel }}</button>
      <p class="klein an-passkey-stand" role="status" aria-live="polite"></p></form>
    <noscript><p class="klein">{{ ta.passkey_ohne_js }}</p></noscript>{% endif %}
  {% elif schritt == "app" %}
    {% if wege.totp %}<p>{{ ta.s_app_da }}</p><p><a class="knopf voll" href="/konto/schuetzen?schritt=codes{{ zq }}">{{ ta.s_weiter }}</a></p>
    {% else %}
    <ol class="an-anleitung">{% for s in ta.s_app_schritte %}<li>{{ s }}</li>{% endfor %}</ol>
    <div class="an-qrzeile">{% if v.totp_qr %}<figure class="an-qr"><img src="{{ v.totp_qr }}" alt="" width="180" height="180"><figcaption class="klein">{{ ta.s_qr_text }}</figcaption></figure>{% endif %}
      {% if v.totp_schluessel %}<div class="an-feld"><label for="f-schluessel">{{ ta.s_schluessel }}</label>
        <div class="an-kopierzeile"><input id="f-schluessel" readonly value="{{ v.totp_schluessel }}" class="an-mono" spellcheck="false">
        <button class="knopf klein an-nurjs" type="button" data-kopieren="f-schluessel" data-kopiert="{{ ta.kopiert }}" data-fehler="{{ ta.kopieren_fehler }}" data-status="kopier-stand-schluessel">{{ ta.kopieren }}</button></div>
        <p class="klein" role="status" id="kopier-stand-schluessel"></p>
        <a class="klein" href="otpauth://totp/Timbre:{{ nutzer.email | urlencode }}?secret={{ v.totp_schluessel | urlencode }}&amp;issuer=Timbre">otpauth://</a></div>{% endif %}</div>
    <form method="post" action="{{ v.action }}" class="an-formular" novalidate><input type="hidden" name="csrf_token" value="{{ v.csrf }}">
      <input type="hidden" name="weiter" value="/konto/schuetzen?schritt=codes{{ zq }}"><input type="hidden" name="hier" value="/konto/schuetzen?schritt=app{{ zq }}">
      {% set totp_fehler = v.fehler | selectattr('feld', 'equalto', 'f-totp') | list %}
      <div class="an-feld"><label for="f-totp">{{ ta.s_app_code }}</label>
        <input id="f-totp" class="an-codefeld" name="totp_code" inputmode="numeric" autocomplete="one-time-code" maxlength="12" aria-describedby="f-totp-hilfe{% if totp_fehler %} f-totp-fehler{% endif %}"{% if totp_fehler %} aria-invalid="true"{% endif %}>
        <span class="klein" id="f-totp-hilfe">{{ ta.s_app_hilfe }}</span>{% if totp_fehler %}<span class="an-feldfehler" id="f-totp-fehler">{{ totp_fehler[0].text }}</span>{% endif %}</div>
      <button class="knopf voll an-breit" type="submit" name="method" value="totp">{{ ta.s_app_pruefen }}</button></form>
    {% endif %}
  {% elif schritt == "codes" %}
    <p>{{ ta.s_codes_text }}</p>
    {# Sicherheitsschritt: nach einem Passkey sind die Codes ein Angebot (überspringbar); nach der App Pflicht – ohne Codes
       sperrt ein verlorenes Handy aus, sobald der strenge Schutz an ist #}
    {% set codes_frei = ziel and wege.passkey and not wege.totp %}
    {% if codes_frei %}<p class="klein">{{ ta.s_codes_angebot }}</p>{% endif %}
    {% if v.codes and v.codes_offen %}
      <ul class="an-codeliste an-mono" id="codes" data-dateiname="timbre-wiederherstellungscodes.txt">{% for c in v.codes %}<li>{{ c }}</li>{% endfor %}</ul>
      <div class="knopfreihe an-nurjs"><button class="knopf klein" type="button" data-codes="datei">{{ ta.s_datei }}</button><button class="knopf klein" type="button" data-codes="kopieren" data-kopiert="{{ ta.kopiert }}" data-fehler="{{ ta.kopieren_fehler }}" data-status="kopier-stand-codes">{{ ta.kopieren }}</button><button class="knopf klein" type="button" data-codes="drucken">{{ ta.s_drucken }}</button></div>
      <p class="klein" role="status" id="kopier-stand-codes"></p>
      <form method="post" action="{{ v.action }}" class="an-formular" novalidate><input type="hidden" name="csrf_token" value="{{ v.csrf }}"><input type="hidden" name="method" value="lookup_secret">
        <input type="hidden" name="weiter" value="/konto/schuetzen?schritt={{ 'bereit' if ziel else 'fertig' }}{{ zq }}"><input type="hidden" name="hier" value="/konto/schuetzen?schritt=codes{{ zq }}">
        {% set gs = v.fehler | selectattr('feld', 'equalto', 'f-gesichert') | list %}{# S-20: nur der eigene Fehler markiert das Häkchen #}
        <label class="an-check{% if gs %} fehlt{% endif %}" for="f-gesichert"><input type="checkbox" id="f-gesichert" name="schutz_bestaetigt" value="1"{% if gs %} aria-invalid="true" aria-describedby="f-gesichert-fehler"{% endif %}> <span>{{ ta.s_gesichert }}</span></label>
        {% if gs %}<span class="an-feldfehler" id="f-gesichert-fehler">{{ gs[0].text }}</span>{% endif %}
        <button class="knopf voll an-breit" type="submit" name="lookup_secret_confirm" value="true">{{ ta.s_codes_weiter }}</button></form>
    {% else %}
      <form method="post" action="{{ v.action }}" class="an-formular"><input type="hidden" name="csrf_token" value="{{ v.csrf }}"><input type="hidden" name="method" value="lookup_secret">
        <input type="hidden" name="weiter" value="/konto/schuetzen?schritt=codes{{ zq }}">
        <button class="knopf voll an-breit" type="submit" name="lookup_secret_regenerate" value="true">{{ ta.s_codes_erzeugen }}</button></form>
    {% endif %}
    {% if codes_frei %}<p><a class="knopf an-breit" href="/konto/schuetzen?schritt=bereit{{ zq }}">{{ ta.s_codes_ueberspringen }}</a></p>{% endif %}
  {% elif schritt == "bereit" %}
    {# Abschluss vor dem Speicher: ehrlich – eingerichtet ist ein Zusatzweg, der Mail-Code gilt weiter allein #}
    <p>{{ ta.s_bereit_text }}</p>
    {% if codes_da %}<p class="an-meldung info" role="status">{{ ta.s_codes_da }}</p>{% endif %}
    <ul class="an-vorteile">{% if wege.passkey %}<li>{{ ta.s_bereit_passkey }}</li>{% endif %}{% if wege.totp %}<li>{{ ta.s_bereit_app }}</li>{% endif %}{% if wege.lookup_secret %}<li>{{ ta.s_bereit_codes }}</li>{% endif %}</ul>
    {# Erst-Einrichtung (24.10.2026, Variante B): einmal je neuem Konto „Noch eins – So sieht Timbre bei dir aus“ statt des Links #}
    {% if aussehen %}{% import "aussehen_block.html" as ae with context %}{{ ae.block(t, "speicher", false, true) }}
    {% else %}<p><a class="knopf voll an-breit" href="/quellen#speicher">{{ ta.s_zum_speicher }}</a></p>{% endif %}
    <p class="klein">{{ ta.s_streng_text }} <a href="/konto/schuetzen">{{ ta.s_streng_link }}</a></p>
  {% elif schritt == "fertig" %}
    {% if codes_da %}<p class="an-meldung info" role="status">{{ ta.s_codes_da }}</p>{% endif %}
    {% if nutzer.schutz_an %}
    <p class="an-meldung gut" role="status">{{ ta.s_streng_ist_an }}</p>
    <p>{{ ta.s_fertig_text }}</p>
    {# S-16: „wie bisher mit Passkey“ nur, wenn es einen Passkey gibt; S-17: wartende Konten zurück zur Warteseite #}
    <ul class="an-vorteile">{% for s in ta.s_fertig_liste %}{% if not loop.first or wege.passkey %}<li>{{ s }}</li>{% endif %}{% endfor %}</ul>
    {% if gesperrt %}<p><a class="knopf voll" href="/freigabe">{{ ta.s_zur_freigabe }}</a></p>
    {% else %}<div class="an-gleich2"><a class="knopf voll" href="/bibliothek">{{ ta.s_zur_library }}</a><a class="knopf" href="/quellen">{{ ta.s_zu_quellen }}</a></div>{% endif %}
    {% else %}{# 25.10.2026: nie automatisch – bewusst per Knopf, „Später“ lässt alles, wie es ist #}
    <p>{{ ta.s_eingerichtet }}</p>
    <p>{{ ta.s_streng_erklaerung }}</p>
    <form method="post" action="/konto/schuetzen/einschalten" class="an-gleich2"><button class="knopf voll" type="submit">{{ ta.s_streng_link }}</button><a class="knopf" href="{{ '/freigabe' if gesperrt else '/konto/anmeldewege' }}">{{ ta.s_spaeter }}</a></form>
    {% endif %}
  {% endif %}
  {% if schritt not in ("einstieg", "fertig", "bereit") %}<p class="klein an-zeilelinks"><a href="{{ '/quellen#speicher' if ziel else '/konto/anmeldewege' }}">{{ ta.s_abbrechen }}</a></p>{% endif %}
  {% if schritt in ("einstieg", "fertig") %}<details class="an-auf"><summary>{{ ta.geraet_verloren }}</summary><p class="klein">{{ ta.geraet_verloren_text }}</p></details>{% endif %}
</section>
{% endblock %}