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

{% block title %}{% trans "Password Reset" %}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">

        <div class="col-lg-5 col-md-7">

            <div class="card shadow-lg border-0 rounded-4">

                <div class="card-body p-5">

                    <!-- Header -->
                    <div class="text-center mb-4">

                        <div class="mb-3">
                            <i class="bi bi-envelope-lock-fill display-3 text-primary"></i>
                        </div>

                        <h2 class="fw-bold">
                            {% trans "Forgot Password?" %}
                        </h2>

                        <p class="text-muted">
                            {% trans "Enter your email address and we'll send you instructions to reset your password." %}
                        </p>

                    </div>

                    {% if user.is_authenticated %}
                        {% include "account/snippets/already_logged_in.html" %}
                    {% endif %}

                    <!-- Reset Form -->
                    <form method="post" action="{% url 'account_reset_password' %}" novalidate>

                        {% csrf_token %}

                        {{ form|crispy }}

                        {{ redirect_field }}

                        <div class="d-grid mt-4">

                            <button type="submit" class="btn btn-primary btn-lg">

                                <i class="bi bi-send-fill me-2"></i>

                                {% trans "Send Reset Link" %}

                            </button>

                        </div>

                    </form>

                    <hr class="my-4">

                    <div class="text-center">

                        <a href="{% url 'account_login' %}"
                           class="text-decoration-none">

                            <i class="bi bi-arrow-left me-1"></i>

                            {% trans "Back to Sign In" %}

                        </a>

                    </div>

                </div>

            </div>

            <!-- Help Card -->
            <div class="text-center mt-4">

                <small class="text-muted">

                    {% blocktrans %}
                    Having trouble resetting your password? Please contact our support team for assistance.
                    {% endblocktrans %}

                </small>

            </div>

        </div>

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