{% extends 'registration/public_auth_base.html' %}
{% load dlux_tags %}
{% block title %}{{ DLUX_STRINGS.password_reset_title|default:'Reset your password' }}{% endblock %}
{% block public_auth_page_class %}dlux-public-auth-page--reset{% endblock %}

{% block public_auth_panel %}
<div class="dlux-public-auth-header">
    <div class="dlux-public-auth-icon"><i class="bi bi-key"></i></div>
    <h1>{{ DLUX_STRINGS.password_reset_title|default:'Reset your password' }}</h1>
    <p class="text-muted small">{{ DLUX_STRINGS.password_reset_intro|default:'Enter the email address for your account and we will send you a link to choose a new password.' }}</p>
</div>

<form method="post" novalidate class="dlux-public-auth-fields">
    {% csrf_token %}
    <div class="mb-3">
        <label for="{{ form.email.id_for_label }}">{{ DLUX_STRINGS.form_email|default:'Email Address' }}</label>
        <input type="email"
               class="login-input {% if form.email.errors %}is-invalid{% endif %}"
               id="{{ form.email.id_for_label }}"
               name="{{ form.email.html_name }}"
               autocomplete="email"
               autofocus
               required
               value="{{ form.email.value|default_if_none:'' }}">
        {% if form.email.errors %}
            <div class="invalid-feedback d-block">{% for error in form.email.errors %}{{ error }}{% endfor %}</div>
        {% endif %}
    </div>

    <button type="submit" class="w-100 btn btn-lg mt-3" id="submit" data-dlux-loading>
        <i class="bi bi-envelope-arrow-up me-2"></i>{{ DLUX_STRINGS.password_reset_submit|default:'Send reset link' }}
    </button>
    <div class="login-register-action mt-3">
        <a href="{% url 'login' %}" class="login-register-link">
            <i class="bi bi-arrow-{% if CURRENT_DIR == 'ltr' %}left{% else %}right{% endif %}-short"></i>
            <span>{{ DLUX_STRINGS.back_to_login|default:'Back to login' }}</span>
        </a>
    </div>
</form>
{% endblock %}