<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title|default("Annotation Platform") }} - Forgot Password</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body class="potato-page-center">
    <div style="width: 100%; max-width: 420px;">
        <div style="text-align: center; margin-bottom: 2rem;">
            <h1 class="potato-page-title">{{ title|default("Annotation Platform") }}</h1>
            <p class="potato-page-subtitle" style="margin-bottom: 0;">Reset your password</p>
        </div>

        <div class="potato-page-card">
            {% if error %}
            <div class="potato-alert potato-alert-error">
                <i class="fas fa-exclamation-circle me-1"></i> {{ error }}
            </div>
            {% endif %}

            {% if success %}
            <div class="potato-alert" style="background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; border-radius: 0.375rem; padding: 0.75rem 1rem; margin-bottom: 1rem;">
                <i class="fas fa-check-circle me-1"></i>
                If the username exists, a reset link has been generated.
            </div>
            {% if reset_link %}
            <div style="margin-bottom: 1rem;">
                <label class="potato-form-label">Reset Link</label>
                <div style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 0.75rem; word-break: break-all; font-size: 0.85rem;">
                    <a href="{{ reset_link }}">{{ reset_link }}</a>
                </div>
                <p style="font-size: 0.8rem; color: #6c757d; margin-top: 0.5rem;">
                    Share this link with the user or use it to reset your password. It expires in 24 hours.
                </p>
            </div>
            {% endif %}
            {% else %}
            <form method="POST" action="/forgot-password">
                <div class="potato-form-group">
                    <label for="username" class="potato-form-label">Username</label>
                    <input id="username" name="username" type="text" class="potato-form-input"
                           placeholder="Enter your username" required>
                </div>
                <button type="submit" class="potato-form-submit">Request Reset Link</button>
            </form>
            {% endif %}

            <div style="text-align: center; margin-top: 1rem;">
                <a href="/" style="color: #6c757d; font-size: 0.875rem; text-decoration: none;">
                    <i class="fas fa-arrow-left me-1"></i> Back to Sign In
                </a>
            </div>
        </div>
    </div>
</body>
</html>
