{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/auth.css') }}">
{% endblock %}
{% block content %}
<div class="auth-page">
    <div class="auth-card">
        <a href="/auth/login" class="auth-back">&larr; Back to Login</a>
        <h2>Reset Password</h2>
        <p class="subtitle">Enter your email and we will send you a reset link</p>

        {% if sent %}
        <div class="auth-success" role="status">
            If an account with that email exists, a reset link has been sent. Check your email or server logs.
        </div>
        {% endif %}

        {% if errors %}
        <div class="auth-error" role="alert">
            <ul>
                {% for error in errors %}
                <li>{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        <form class="auth-form" method="POST" action="/auth/forgot-password">
            <div class="auth-field">
                <label for="email">Email address</label>
                <input type="email" id="email" name="email" required aria-required="true" maxlength="255" placeholder="you@example.com">
            </div>
            <button type="submit" class="auth-submit"><span class="icon">&#x1F4E7;</span> Send Reset Link</button>
        </form>

        <div class="auth-footer">
            Remember your password? <a href="/auth/login">Sign in</a>
        </div>
    </div>
</div>
{% endblock %}