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

{% block title %}Reset 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">Reset your password</h2>
                <p class="text-sm text-ink-muted">Choose a new password for your account.</p>
            </div>

            <form method="POST" action="{{ url_for('auth_bp.reset_user_password') }}" class="space-y-6">
                <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="space-y-2">
                    <label for="password" class="text-[13px] font-medium text-ink">New password</label>
                    <input
                        id="password"
                        name="password"
                        type="password"
                        autocomplete="new-password"
                        required
                        minlength="8"
                        class="w-full px-3.5 py-2.5 text-sm rounded-lg bg-raised border border-line focus:border-ink text-ink transition-colors"
                    />
                </div>

                <div class="space-y-2">
                    <label for="confirm_password" class="text-[13px] font-medium text-ink">Confirm password</label>
                    <input
                        id="confirm_password"
                        name="confirm_password"
                        type="password"
                        autocomplete="new-password"
                        required
                        minlength="8"
                        class="w-full px-3.5 py-2.5 text-sm rounded-lg bg-raised border border-line focus:border-ink 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"
                >
                    Reset password
                </button>
            </form>
        </div>
    </section>
</main>
{% endblock %}