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

{% block content %}
<section class="hero-bw text-center">
    <div class="container">
        <div class="hero-content text-start" style="max-width: 450px; width: 100%;">
            <h1 class="h2 mb-4">RESET_PASSWORD</h1>
            <p class="font-mono small opacity-75 mb-4">ENTER_EMAIL_TO_RECEIVE_INSTRUCTIONS</p>
            
            <form method="post">
                {% csrf_token %}
                {% for field in form %}
                    <div class="mb-3">
                        <label for="{{ field.id_for_label }}" class="form-label font-mono small">{{ field.label|upper }}</label>
                        <input type="{{ field.field.widget.input_type }}" 
                               name="{{ field.name }}" 
                               id="{{ field.id_for_label }}" 
                               class="form-control font-mono rounded-0 border-2" 
                               placeholder="{{ field.label|upper }}"
                               required>
                        {% for error in field.errors %}
                            <div class="text-danger font-mono small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>
                {% endfor %}
                <div class="d-grid gap-3 mt-4">
                    <button type="submit" class="btn btn-bw w-100">SEND_RESET_LINK</button>
                    <div class="text-center">
                        <a href="{% url 'login' %}" class="btn btn-bw-outline w-100">BACK_TO_LOGIN</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
{% endblock %}