{% 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">
    <h1>{% trans "Anmeldung" %}</h1>
    <p>{{ portal_login_subtitle }}</p>

    <form method="post" action="/accounts/login/">
      {% 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">
            <strong>{% trans "Anmeldung fehlgeschlagen" %}</strong><br />
            <span>{% trans "Anmeldedaten oder TOTP-Code sind nicht korrekt. Bitte versuchen Sie es erneut." %}</span>
          </div>
        </div>
      {% endif %}
      <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>
      <div class="field{% if form.otp_code.errors %} has-error{% endif %}">
        {{ form.otp_code.label_tag }}{{ form.otp_code }}
        <div class="mini">{% trans "Nur erforderlich, wenn TOTP für Ihr Konto aktiviert ist." %}</div>
      </div>
      <div class="field{% if form.recovery_code.errors %} has-error{% endif %}">
        {{ form.recovery_code.label_tag }}{{ form.recovery_code }}
        <div class="mini">{% trans "Alternativ können Sie einen einmaligen Recovery-Code verwenden." %}</div>
      </div>
      <button class="btn btn-primary" type="submit">{% trans "Anmelden" %}</button>
    </form>
  </div>
</section>
{% endblock %}