{% extends "layout.html" %}

{% block title %}Forgot Password - Trade Signals{% endblock %}

{% block content %}
<div class="auth-page">
    <div class="container">
        <div class="auth-container fade-in-on-scroll">
            <div class="auth-header">
                <div class="auth-icon"><i data-lucide="key"></i></div>
                <h1>Forgot Password</h1>
                <p class="auth-subtitle">Enter your email address and we'll send you a link to reset your password.</p>
            </div>

            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    <div class="flash-messages">
                        {% for category, message in messages %}
                            <div class="alert alert-{{ category }}">
                                {{ message }}
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            {% endwith %}

            <form method="POST" action="{{ url_for('auth.forgot_password') }}" class="auth-form" id="forgotPasswordForm">
                <div class="form-group">
                    <label for="email">Email Address *</label>
                    <input 
                        type="email" 
                        id="email" 
                        name="email" 
                        required
                        placeholder="Enter your registered email"
                        value="{{ request.form.email if request.form }}"
                        autocomplete="email"
                    >
                </div>

                <button type="submit" class="btn btn-primary btn-block">
                    <i data-lucide="mail" class="inline-icon"></i>
                    Send Reset Link
                </button>
            </form>

            <div class="auth-footer">
                <p>Remember your password? <a href="{{ url_for('auth.login') }}">Login here</a></p>
                <p>Don't have an account? <a href="{{ url_for('auth.register') }}">Sign up</a></p>
            </div>
        </div>
    </div>
</div>
{% endblock %}