{% extends "base.html" %}

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

{% block body %}
<div class="flex min-h-screen items-center justify-center px-4">
    <div class="w-full max-w-sm">
        <h1 class="text-2xl font-bold text-center text-gray-900 mb-8">
            Set a new password
        </h1>

        {% if invalid_token %}
        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-6" role="alert">
            This password reset link is invalid or has expired.
        </div>
        <p class="mt-4 text-center text-sm text-gray-600">
            <a href="/forgot-password" class="at-link">Request a new reset link</a>
        </p>

        {% elif success %}
        <div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded mb-6">
            Your password has been reset. You can now log in with your new password.
        </div>
        <p class="mt-4 text-center text-sm text-gray-600">
            <a href="/login" class="at-link">Log in</a>
        </p>

        {% else %}

        {% if error %}
        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-6" role="alert">
            {{ error }}
        </div>
        {% endif %}

        <form method="post" action="/auth/reset-password" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <input type="hidden" name="token" value="{{ token }}">

            <div>
                <label for="new_password" class="block text-sm font-medium text-gray-700 mb-1">
                    New password
                </label>
                <input type="password" id="new_password" name="new_password"
                       required autocomplete="new-password"
                       class="w-full rounded border border-gray-300 px-3 py-2 at-input-focus">
            </div>

            <div>
                <label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-1">
                    Confirm new password
                </label>
                <input type="password" id="confirm_password" name="confirm_password"
                       required autocomplete="new-password"
                       class="w-full rounded border border-gray-300 px-3 py-2 at-input-focus">
            </div>

            <button type="submit"
                    class="at-btn-primary w-full rounded px-4 py-2 text-white font-medium
                           focus:outline-none focus:ring-2 focus:ring-offset-2">
                Reset password
            </button>
        </form>

        {% endif %}
    </div>
</div>
{% endblock %}