{% extends 'auth/base.html' %}

{% block title %}Forgot password{% endblock %}

{% block content %}
<main class="min-h-[100dvh] w-full flex justify-center items-start p-4 sm:p-8 md:p-12">
    <section class="w-full max-w-md mt-2 sm:mt-8">
        <div class="rounded-2xl border border-line bg-surface shadow-sm p-8 md:p-10">
            <header class="mb-8 flex items-center justify-between">
                <a href="{{ url_for('core_bp.home') }}" class="flex items-center gap-1 text-xl font-semibold tracking-tight text-ink">
                    lombik<span class="text-brand">.</span>
                </a>
                <a href="{{ url_for('auth_bp.login') }}" class="text-sm text-ink-muted hover:text-ink transition-colors font-medium">
                    Log in &rarr;
                </a>
            </header>

            <div class="space-y-1 mb-8">
                <h2 class="text-2xl font-semibold text-ink tracking-tight">Forgot your password?</h2>
                <p class="text-sm text-ink-muted">
                    Enter your email and, if an account exists, we'll send you a reset link.
                </p>
            </div>

            <form method="POST" action="{{ url_for('auth_bp.forgot_password') }}" class="space-y-6">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />

                <div class="space-y-2">
                    <label for="email" class="text-[13px] font-medium text-ink">Email address</label>
                    <input
                        id="email"
                        name="email"
                        type="email"
                        autocomplete="email"
                        required
                        placeholder="you@company.com"
                        class="w-full px-3.5 py-2.5 text-sm rounded-lg bg-raised border border-line focus:border-ink placeholder:text-ink-muted/60 text-ink transition-colors"
                    />
                </div>

                <button
                    type="submit"
                    class="w-full py-2.5 px-4 rounded-lg bg-ink text-canvas font-medium text-sm hover:opacity-90 active:scale-[0.99] transition-all duration-150"
                >
                    Send reset link
                </button>

                <a href="{{ url_for('auth_bp.login') }}"
                   class="w-full flex items-center justify-center rounded-lg border border-line text-sm text-ink-muted hover:text-ink px-4 py-2.5 transition-colors">
                    Back to login
                </a>
            </form>
        </div>
    </section>
</main>
{% endblock %}