{% extends "base.html" %}

{% block title %}Forgot Password - Code of Conquest{% endblock %}

{% block content %}
<div class="auth-container">
    <h1 class="page-title">Forgot Password</h1>
    <p class="page-subtitle">Recover your account access</p>

    <div class="decorative-line"></div>

    <!-- Message display area -->
    <div id="forgot-password-messages"></div>

    <form
        id="forgot-password-form"
        hx-post="{{ api_base_url }}/api/v1/auth/forgot-password"
        hx-ext="json-enc"
        hx-target="#forgot-password-messages"
        hx-swap="innerHTML"
    >
        <div class="form-group">
            <label class="form-label" for="email">Email Address</label>
            <input
                type="email"
                id="email"
                name="email"
                class="form-input"
                placeholder="adventurer@realm.com"
                required
                autocomplete="email"
            >
            <span id="email-error" class="field-error"></span>
        </div>

        <button type="submit" class="btn btn-primary">
            Send Reset Link
            <span class="htmx-indicator loading-spinner"></span>
        </button>

        <button type="button" class="btn btn-secondary" onclick="window.location.href='{{ url_for('auth_views.login') }}'">
            Back to Login
        </button>
    </form>

    <div class="form-links">
        <div class="divider">or</div>
        <a href="{{ url_for('auth_views.register') }}" class="form-link">Don't have an account? Register here</a>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Handle form submission response
document.getElementById('forgot-password-form').addEventListener('htmx:afterSwap', function(event) {
    const response = event.detail.xhr.responseText;

    try {
        const data = JSON.parse(response);

        // Check if request was successful
        if (data.status === 200) {
            // Show success message
            document.getElementById('forgot-password-messages').innerHTML =
                '<div class="success-message">' +
                'If an account exists with this email, you will receive a password reset link shortly. ' +
                'Please check your inbox and spam folder.' +
                '</div>';

            // Clear form
            document.getElementById('forgot-password-form').reset();
        } else {
            // Display error message
            if (data.error && data.error.details && data.error.details.email) {
                document.getElementById('email-error').textContent = data.error.details.email;
            } else if (data.error && data.error.message) {
                document.getElementById('forgot-password-messages').innerHTML =
                    '<div class="error-message">' + data.error.message + '</div>';
            }
        }
    } catch (e) {
        console.error('Error parsing response:', e);
    }
});

// Clear errors when user starts typing
document.getElementById('email').addEventListener('input', function() {
    document.getElementById('email-error').textContent = '';
    document.getElementById('forgot-password-messages').innerHTML = '';
});
</script>
{% endblock %}
