{% extends "layouts/base.html" %}

{% block title %}Forgot Password - Retoor's Cloud Solutions{% endblock %}

{% block head %}
    <link rel="stylesheet" href="/static/css/components/form.css"> {# Reusing form.css for styling #}
{% endblock %}

{% block content %}
<div class="form-page-container">
    <h1>Forgot Your Password?</h1>
    <p class="subtitle">Enter your email address below and we'll send you a link to reset your password.</p>

    <section class="form-container">
        <h2>Reset Password</h2>
        {% if error %}
            <p class="error">{{ error }}</p>
        {% endif %}
        {% if message %}
            <p class="message">{{ message }}</p>
        {% endif %}
        <form action="/forgot_password" method="post">
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" required value="{{ data.email or '' }}">
                {% if errors.email %}
                    <p class="error">{{ errors.email }}</p>
                {% endif %}
            </div>
            <button type="submit" class="btn-primary">Send Reset Link</button>
        </form>
        <p class="login-link">Remember your password? <a href="/login">Log In</a></p>
    </section>
</div>
{% endblock %}