{% extends "base.html" %}

{% block title %}Forgot Password{% endblock %}

{% block header_css %}
<style>
.login-container {
    max-width: 450px;
    margin: 80px auto;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.login-container h2 {
    text-align: center;
    margin-bottom: 25px;
    color: #333;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #444;
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-link);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.btn {
    background: var(--color-link);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-secondary {
    background: #666;
}

.btn-secondary:hover {
    background: #555;
}

.button-row {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.button-row .btn {
    flex: 1;
    width: auto;
}

.btn:hover {
    background: var(--color-link-hover);
}

.alert {
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
}

.alert.success {
    background: var(--alert-success-bg);
    color: var(--alert-success-fg);
    border: 1px solid #c3e6cb;
}

.alert.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.back-link {
    text-align: center;
    margin-top: 20px;
}

.back-link a {
    color: #666;
    text-decoration: none;
}

.back-link a:hover {
    text-decoration: underline;
}
</style>
{% endblock %}

{% block content %}
<div class="login-container">
    <h2 data-i18n="forgot_page.title">Reset Your Password</h2>
    
    {% if message %}
    <div class="alert {{ message_type }}">
        {{ message }}
    </div>
    {% endif %}
    
    {% if success %}
    <p style="text-align: center; color: var(--alert-success-fg); line-height: 1.6;" data-i18n="forgot_page.sent">
        If an account exists with that email address, we have sent a password reset link.
        <br><br>
        The link will expire in 24 hours. Please check your inbox and spam folder.
    </p>

    <div class="button-row">
        <a href="{{ url_for(request, '/dashboard/login') }}" class="btn" style="text-decoration: none; text-align: center; width: 100%;" data-i18n="forgot_page.back_to_login">Back to Login</a>
    </div>
    {% else %}
    <p style="text-align: center; color: #666; margin-bottom: 25px;" data-i18n="forgot_page.intro">
        Enter your email address and we'll send you a link to reset your password.
    </p>

    <form method="POST">
        <div class="form-group">
            <label for="email" data-i18n="forgot_page.email">Email Address</label>
            <input type="email" id="email" name="email" required autofocus>
        </div>

        <div class="button-row">
            <button type="submit" class="btn" data-i18n="forgot_page.submit">Send Reset Link</button>
            <a href="{{ url_for(request, '/dashboard/login') }}" class="btn btn-secondary" style="text-decoration: none; text-align: center;" data-i18n="forgot_page.back_to_login">Back to Login</a>
        </div>
    </form>
    {% endif %}
</div>
{% endblock %}