{% extends 'workflows/base_shell.html' %}
{% load static i18n %}

{% block title %}{% trans "Anmeldung" %}{% endblock %}

{% block shell_header %}
{% include 'workflows/includes/app_header.html' with header_show_lang=1 header_inside_shell=1 %}
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'workflows/css/login.css' %}" />
{% endblock %}

{% block shell_body %}
<section class="login-shell-body">
  <div class="login-card">
    {% if login_step == 'totp' %}
    <h1>{% trans "Zwei-Faktor-Prüfung" %}</h1>
    <p>{% trans "Geben Sie Ihren TOTP-Code ein, um die Anmeldung abzuschließen." %}</p>
    {% if login_totp_user %}
    <div class="login-step-caption">
      <strong>{{ login_totp_user.get_full_name|default:login_totp_user.username }}</strong>
      <span>{{ login_totp_user.email|default:login_totp_user.username }}</span>
    </div>
    {% endif %}
    {% else %}
    <h1>{% trans "Anmeldung" %}</h1>
    <p>{{ portal_login_subtitle }}</p>
    {% endif %}

    <form method="post" action="{% if login_step == 'totp' %}/accounts/login/totp/{% else %}/accounts/login/{% endif %}">
      {% csrf_token %}
      {% if next %}
        <input type="hidden" name="next" value="{{ next }}" />
      {% endif %}
      {% if form.errors %}
        <div class="app-alert app-alert-error" role="alert" aria-live="assertive">
          <div class="app-alert-body">
            {% if login_step == 'totp' %}
            <strong>{% trans "Code ungültig" %}</strong><br />
            <span>{% trans "Der eingegebene TOTP- oder Recovery-Code ist nicht korrekt. Bitte versuchen Sie es erneut." %}</span>
            {% else %}
            <strong>{% trans "Anmeldung fehlgeschlagen" %}</strong><br />
            <span>{% trans "Benutzername oder Passwort sind nicht korrekt. Bitte versuchen Sie es erneut." %}</span>
            {% endif %}
          </div>
        </div>
      {% endif %}
      {% if login_step == 'totp' %}
      <div class="field{% if form.otp_code.errors or form.errors %} has-error{% endif %}">
        {{ form.otp_code.label_tag }}{{ form.otp_code }}
      </div>
      <div class="login-recovery-toggle-row">
        <button
          class="btn btn-secondary btn-inline-toggle"
          type="button"
          data-toggle-target="login-recovery-box"
          aria-expanded="{% if show_recovery_code %}true{% else %}false{% endif %}"
        >
          {% trans "Recovery-Code verwenden" %}
        </button>
      </div>
      <div class="login-recovery-box{% if not show_recovery_code %} is-hidden{% endif %}" id="login-recovery-box">
        <div class="field{% if form.recovery_code.errors %} has-error{% endif %}">
          {{ form.recovery_code.label_tag }}{{ form.recovery_code }}
          <div class="mini">{% trans "Nutzen Sie stattdessen einen einmaligen Recovery-Code." %}</div>
        </div>
      </div>
      <button class="btn btn-primary" type="submit">{% trans "Code prüfen" %}</button>
      <a class="login-back-link" href="/accounts/login/">{% trans "Zurück zur Anmeldung" %}</a>
      {% else %}
      <div class="field{% if form.username.errors or form.errors %} has-error{% endif %}">{{ form.username.label_tag }}{{ form.username }}</div>
      <div class="field{% if form.password.errors or form.errors %} has-error{% endif %}">{{ form.password.label_tag }}{{ form.password }}</div>
      <button class="btn btn-primary" type="submit">{% trans "Anmelden" %}</button>
      {% endif %}
    </form>
  </div>
</section>
<script>
  document.querySelectorAll('[data-toggle-target]').forEach((trigger) => {
    trigger.addEventListener('click', () => {
      const target = document.getElementById(trigger.getAttribute('data-toggle-target'));
      if (!target) return;
      const hidden = target.classList.toggle('is-hidden');
      trigger.setAttribute('aria-expanded', hidden ? 'false' : 'true');
    });
  });
</script>
{% endblock %}