{% extends "base.html" %}
{% load i18n %}

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

{% block breadcrumbs %}{% endblock %} {# Breadcrumbs bei Login-Seite ausblenden #}

{% block content %}
<section class="hero is-fullheight has-background-light">
  <div class="hero-body">
    <div class="container">
      <div class="columns is-centered">
        <div class="column is-4-widescreen is-5-desktop is-6-tablet">

          <div class="card">
            <header class="card-header">
              <p class="card-header-title">{% trans "Bitte anmelden" %}</p>
            </header>

            <div class="card-content">
              {% if form.non_field_errors %}
                <div class="notification is-danger is-light">
                  {% for error in form.non_field_errors %}
                    <p>{{ error }}</p>
                  {% endfor %}
                </div>
              {% endif %}

              <form method="post" action="{% url 'login' %}">
                {% csrf_token %}

                <!-- Benutzername -->
                <div class="field">
                  <label class="label" for="{{ form.username.id_for_label }}">{% trans "Benutzername" %}</label>
                  <div class="control has-icons-left">
                    <input
                      class="input{% if form.username.errors %} is-danger{% endif %}"
                      type="text"
                      name="{{ form.username.html_name }}"
                      id="{{ form.username.id_for_label }}"
                      value="{{ form.username.value|default:'' }}"
                      placeholder="z. B. maxmustermann"
                      autocomplete="username"
                      required>
                    <span class="icon is-left">👤</span>
                  </div>
                  {% for error in form.username.errors %}
                    <p class="help is-danger">{{ error }}</p>
                  {% endfor %}
                </div>

                <!-- Passwort -->
                <div class="field">
                  <label class="label" for="{{ form.password.id_for_label }}">{% trans "Passwort" %}</label>
                  <div class="control has-icons-left">
                    <input
                      class="input{% if form.password.errors %} is-danger{% endif %}"
                      type="password"
                      name="{{ form.password.html_name }}"
                      id="{{ form.password.id_for_label }}"
                      placeholder="••••••••"
                      autocomplete="current-password"
                      required>
                    <span class="icon is-left">🔒</span>
                  </div>
                  {% for error in form.password.errors %}
                    <p class="help is-danger">{{ error }}</p>
                  {% endfor %}
                </div>

                <input type="hidden" name="next" value="{{ next }}">

                <div class="field is-grouped is-justify-content-space-between is-align-items-center">
                  <div class="control">
                    <button type="submit" class="button is-primary">
                      {% trans "Anmelden" %}
                    </button>
                  </div>
                  <div class="control">
                    <a class="button is-text" href="{% url 'password_reset' %}">{% trans "Passwort vergessen?" %}</a>
                  </div>
                </div>
              </form>
            </div>

            <footer class="card-footer">
              <span class="card-footer-item">
                <span class="is-size-7 has-text-grey">© {% now "Y" %} – WIRA Risk Management</span>
              </span>
            </footer>
          </div>

        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}