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

{% block title %}
Reset password
{% endblock %}

{% block content %}

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

    <p class="text-xs text-slate-500 text-center max-w-sm">
        Choose a new password for your account.
    </p>

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

    <input
        type="hidden"
        name="user_id"
        value="{{ user_id }}"
    >

    <input
        type="hidden"
        name="token"
        value="{{ token }}"
    >

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

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

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

        <input
            type="password"
            id="confirm_password"
            name="confirm_password"
            autocomplete="new-password"
            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"
    >
        Reset password
    </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 %}