{% extends 'base.html' %}
{% load static %}

{% block title %}Сброс пароля{% endblock %}

{# Раннее применение темы, синхронно с переключателем в base.html #}
{% block extra_css %}
<script src="{% static 'js/utils/themeInitializer.js' %}"></script>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-6">
    <div class="card shadow">
      <div class="card-header bg-primary text-white">
        <h3 class="mb-0">Сброс пароля</h3>
      </div>

      <div class="card-body">
        {# Общие ошибки формы #}
        {% if form.non_field_errors %}
        <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
          {% for error in form.non_field_errors %}
            <i class="bi bi-exclamation-triangle me-2"></i>{{ error }}
            {% if not forloop.last %}<br>{% endif %}
          {% endfor %}
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        {% endif %}

        <form method="post" novalidate>
          {% csrf_token %}

          <div class="mb-4 form-floating">
            <input
              type="email"
              name="{{ form.email.html_name }}"
              id="{{ form.email.auto_id|default:'id_email' }}"
              class="form-control {% if form.email.errors %}is-invalid{% endif %}"
              placeholder="Email"
              value="{{ form.email.value|default:'' }}"
              inputmode="email"
              autocomplete="email"
              required
            >
            <label for="{{ form.email.auto_id|default:'id_email' }}">Email</label>
            {% if form.email.errors %}
              <div class="invalid-feedback">
                {{ form.email.errors|striptags }}
              </div>
            {% else %}
              <div class="form-text">Мы отправим инструкции по сбросу на этот адрес.</div>
            {% endif %}
          </div>

          <button type="submit" class="btn btn-primary btn-lg w-100">
            <i class="bi bi-envelope-arrow-up me-2"></i>Отправить инструкции
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script type="module">
  import { focusField } from "{% static 'js/utils/focusFieldHandler.js' %}";
  focusField('{{ form.email.auto_id|default:"id_email" }}');
</script>
{% endblock %}