{% extends "tesm_core/base.html" %}
{% from "tesm_core/macros.html" import field, alert, pill, empty_state %}

{% block page_title %}Sicherheit{% endblock %}
{% block page_sub %}Passwort, zweiter Faktor und aktive Sitzungen{% endblock %}

{% block breadcrumb %}
<nav class="breadcrumb">
  <span><a href="{{ url_for('account.overview') }}">Mein Konto</a></span><span>Sicherheit</span>
</nav>
{% endblock %}

{% block content %}
{% if recovery_codes %}
  <section class="card card--accent">
    <div class="card__header">
      <div class="flex-1">
        <div class="card__title">{{ icon('key', size=17) }} Wiederherstellungscodes</div>
        <div class="card__sub">
          Jetzt sichern &ndash; sie werden nur dieses eine Mal angezeigt. Jeder Code
          funktioniert genau einmal.
        </div>
      </div>
      <button class="btn btn--sm" type="button" data-copy="#recovery-codes"
              data-copy-message="Codes kopiert.">{{ icon('copy', size=14) }} Kopieren</button>
    </div>
    <div class="card__body">
      <pre class="code-block" id="recovery-codes">{% for code in recovery_codes %}{{ code }}
{% endfor %}</pre>
    </div>
  </section>
{% endif %}

<div class="grid grid--split">
  <div class="stack">
    <section class="card">
      <div class="card__header">
        <div class="flex-1"><div class="card__title">{{ icon('lock', size=17) }} Passwort aendern</div></div>
      </div>
      {% if current_user.is_directory_account %}
        <div class="card__body">
          {{ alert('Ihr Passwort wird im Verzeichnisdienst gepflegt und dort geaendert.', 'info') }}
        </div>
      {% else %}
        <form method="post" action="{{ url_for('account.change_password') }}">
          <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
          <div class="card__body stack">
            {{ field('current_password', 'Aktuelles Passwort', type='password', required=True,
                     autocomplete='current-password') }}
            {{ field('new_password', 'Neues Passwort', type='password', required=True,
                     autocomplete='new-password',
                     hint_text='Mindestens ' ~ policy.min_length ~ ' Zeichen und zwei verschiedene Zeichenarten.') }}
            {{ field('repeat_password', 'Neues Passwort wiederholen', type='password', required=True,
                     autocomplete='new-password') }}
            {{ alert('Nach der Aenderung werden alle anderen Sitzungen beendet.', 'info') }}
          </div>
          <div class="card__footer"><button class="btn btn--primary" type="submit">Passwort aendern</button></div>
        </form>
      {% endif %}
    </section>

    <section class="card">
      <div class="card__header">
        <div class="flex-1">
          <div class="card__title">{{ icon('shield', size=17) }} Zwei-Faktor-Authentisierung
            {% if totp_enabled %}{{ pill('aktiv', 'online') }}{% else %}{{ pill('inaktiv', 'warning') }}{% endif %}
          </div>
          <div class="card__sub">Zeitbasierte Einmalcodes (TOTP), kompatibel mit jeder Authenticator-App</div>
        </div>
      </div>
      <div class="card__body stack">
        {% if pending_secret %}
          {{ alert('Richten Sie den Eintrag in Ihrer App ein und bestaetigen Sie mit einem aktuellen Code. Erst dann wird die Anmeldung umgestellt.', 'warning') }}
          <dl class="kv fs-sm">
            <dt>Geheimnis</dt>
            <dd><span class="mono" id="totp-secret">{{ pending_secret_grouped }}</span>
              <button class="btn btn--sm btn--ghost" type="button" data-copy="#totp-secret">
                {{ icon('copy', size=13) }}</button></dd>
            <dt>Konto</dt><dd>{{ current_user.username }}</dd>
            <dt>Verfahren</dt><dd>TOTP, SHA-1, 6 Stellen, 30 Sekunden</dd>
          </dl>
          <details class="mt-2">
            <summary class="fs-sm muted">otpauth-URI anzeigen</summary>
            <pre class="code-block code-block--wrap mt-2">{{ pending_uri }}</pre>
          </details>
          <form method="post" action="{{ url_for('account.totp_confirm') }}" class="row row--tight">
            <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
            <input class="input input--mono" type="text" name="code" required maxlength="6"
                   inputmode="numeric" placeholder="123456" style="max-width:130px;text-align:center">
            <button class="btn btn--primary" type="submit">Bestaetigen</button>
          </form>
        {% elif totp_enabled %}
          <dl class="kv fs-sm">
            <dt>Aktiviert am</dt><dd>{{ profile.totp_confirmed_at | dt }}</dd>
            <dt>Unbenutzte Wiederherstellungscodes</dt>
            <dd>{{ recovery_remaining }}{% if recovery_remaining <= 2 %}
              <span class="warning-text">&nbsp;&ndash; bitte erneuern</span>{% endif %}</dd>
          </dl>
          <div class="row row--tight">
            <form method="post" action="{{ url_for('account.recovery_codes') }}" data-no-guard>
              <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
              <button class="btn btn--sm" type="submit"
                      data-confirm="Neue Codes erzeugen? Die bisherigen verlieren ihre Gueltigkeit."
                      data-confirm-title="Codes erneuern" data-confirm-ok="Erneuern" data-confirm-style="primary">
                Codes erneuern</button>
            </form>
            <form method="post" action="{{ url_for('account.totp_disable') }}" data-no-guard>
              <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
              <button class="btn btn--sm btn--ghost danger-text" type="submit"
                      data-confirm="Zwei-Faktor-Authentisierung wirklich deaktivieren?"
                      data-confirm-title="Zwei-Faktor deaktivieren" data-confirm-ok="Deaktivieren">
                Deaktivieren</button>
            </form>
          </div>
        {% else %}
          {% if require_totp_for_admins and current_user.is_admin %}
            {{ alert('In dieser Installation ist ein zweiter Faktor fuer Administratoren verpflichtend. Bitte jetzt einrichten.', 'danger') }}
          {% endif %}
          <p class="muted fs-sm">
            Ein zweiter Faktor schuetzt Ihr Konto auch dann, wenn Ihr Passwort bekannt wird.
          </p>
          <form method="post" action="{{ url_for('account.totp_start') }}" data-no-guard>
            <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
            <button class="btn btn--primary" type="submit">Einrichtung starten</button>
          </form>
        {% endif %}
      </div>
    </section>
  </div>

  <section class="card">
    <div class="card__header">
      <div class="flex-1">
        <div class="card__title">{{ icon('activity', size=17) }} Meine Sitzungen</div>
        <div class="card__sub">{{ sessions | length }} aktiv</div>
      </div>
      {% if sessions | length > 1 %}
        <form method="post" action="{{ url_for('account.revoke_other_sessions') }}" data-no-guard>
          <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
          <button class="btn btn--sm btn--ghost danger-text" type="submit"
                  data-confirm="Alle anderen Sitzungen beenden?"
                  data-confirm-title="Sitzungen beenden" data-confirm-ok="Beenden">
            Andere beenden</button>
        </form>
      {% endif %}
    </div>
    <div class="card__body--flush">
      {% if sessions %}
        <table class="table table--compact">
          <tbody>
            {% for entry in sessions %}
              <tr>
                <td>
                  <div class="fw-600 fs-sm">
                    {{ entry.ip or 'unbekannte Adresse' }}
                    {% if entry.id == current_sid %}{{ pill('diese Sitzung', 'online') }}{% endif %}
                  </div>
                  <div class="fs-xs faint truncate" style="max-width:280px">{{ entry.user_agent or '-' }}</div>
                  <div class="fs-xs faint">
                    aktiv <span data-relative-time="{{ entry.last_seen_at }}">{{ entry.last_seen_at | dt }}</span>
                  </div>
                </td>
                <td class="actions">
                  {% if entry.id != current_sid %}
                    <form method="post" action="{{ url_for('account.revoke_session', sid=entry.id) }}" data-no-guard>
                      <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
                      <button class="btn btn--sm btn--ghost" type="submit">Beenden</button>
                    </form>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% else %}
        {{ empty_state('Keine Sitzungen', '', 'activity') }}
      {% endif %}
    </div>
  </section>
</div>
{% endblock %}