{% extends "base.html" %}

{% block title %}Password Reset - Mimir{% endblock %}

{% block content %}
<div class="row justify-content-center mt-5">
    <div class="col-md-6 col-lg-5">
        <div class="card shadow">
            <div class="card-body">
                <h2 class="card-title text-center mb-4">
                    <i class="fa-solid fa-key"></i> Reset Password
                </h2>
                
                {% if success %}
                <div class="alert alert-success" role="alert" data-testid="reset-success-message">
                    <i class="fa-solid fa-check-circle me-2"></i>
                    <strong>Email sent!</strong> If an account exists with this email, you will receive password reset instructions.
                </div>
                <div class="text-center mt-4">
                    <a href="{% url 'login' %}" class="btn btn-primary">
                        <i class="fa-solid fa-sign-in-alt"></i> Return to Login
                    </a>
                </div>
                {% else %}
                <p class="text-muted text-center mb-4">
                    Enter your email address and we'll send you instructions to reset your password.
                </p>
                
                <form method="post" data-testid="password-reset-form">
                    {% csrf_token %}
                    
                    <div class="mb-4">
                        <label for="id_email" class="form-label">Email Address</label>
                        <input 
                            type="email" 
                            name="email" 
                            id="id_email"
                            class="form-control {% if errors.email %}is-invalid{% endif %}"
                            data-testid="reset-email-input"
                            value="{{ email }}"
                            required
                            autofocus>
                        {% if errors.email %}
                        <div class="invalid-feedback d-block" data-testid="email-field-error">
                            <i class="fa-solid fa-circle-exclamation me-1"></i>
                            {{ errors.email.0 }}
                        </div>
                        {% endif %}
                    </div>
                    
                    <button 
                        type="submit" 
                        class="btn btn-primary w-100"
                        data-testid="reset-submit-button"
                        data-bs-toggle="tooltip"
                        title="Send password reset instructions to your email">
                        <i class="fa-solid fa-paper-plane"></i> Send Reset Link
                    </button>
                </form>
                {% endif %}
            </div>
        </div>
        
        <div class="text-center mt-3">
            <p class="text-muted">
                Remember your password? 
                <a href="{% url 'login' %}" class="text-decoration-none">
                    <i class="fa-solid fa-sign-in-alt"></i> Sign In
                </a>
            </p>
        </div>
    </div>
</div>
{% endblock %}