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

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

{% block content %}

<section class="flex w-full h-full items-center justify-center">
    <form
        method="POST"
        action="{{ url_for('auth_bp.forgot_password') }}"
        class="max-w-lg w-full flex flex-col items-center justify-evenly gap-3"
    >
        <h1 class="text-lg font-semibold">Forgot your password?</h1>

    <p class="text-xs text-slate-500 text-center max-w-sm">
        Enter your email address and, if an account exists, we'll send you a
        link to reset your password.
    </p>

    <input
        type="hidden"
        name="csrf_token"
        value="{{ csrf_token() }}"
    >

    <div class="w-full">
        <label
            for="email"
            class="block text-sm font-medium text-slate-700 mb-1"
        >
            Email
        </label>

        <input
            type="email"
            id="email"
            name="email"
            autocomplete="email"
            required
            class="w-full px-4 py-2 rounded-xl border border-stone-300 text-xs"
        >
    </div>

    <button
        type="submit"
        class="w-full bg-primary rounded-xl text-white text-xs px-4 py-2"
    >
        Send reset link
    </button>

    <a
        href="{{ url_for('auth_bp.login') }}"
        class="w-full flex items-center justify-center border border-zinc-700 rounded-xl text-xs px-4 py-2"
    >
        Back to login
    </a>
</form>

</section>
{% endblock %}