{% extends "admin/base-admin.html" %}
{% block title %}Forgot Password{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="text-center mb-8">
        <h3 class="text-2xl font-light text-gray-900 dark:text-white">{% trans %}Reset Admin Password{% endtrans %}</h3>
        <p class="text-gray-500 dark:text-gray-400 mt-2">{% trans %}Enter your admin email address to receive a reset link{% endtrans %}</p>
    </div>
    <div class="max-w-md mx-auto">
        {% if sent %}
        <div class="mb-4 px-4 py-4 rounded-xl bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 text-sm text-center">
            <i class="fa fa-circle-check text-lg mb-1"></i>
            <p class="font-semibold">{% trans %}Check your email{% endtrans %}</p>
            <p class="mt-1 text-green-600 dark:text-green-500">{% trans %}If that email matches our records, a password reset link has been sent.{% endtrans %}</p>
        </div>
        <div class="text-center mt-4">
            <a href="/admin/login" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">{% trans %}Back to login{% endtrans %}</a>
        </div>
        {% else %}
        {% if error %}
        <div class="mb-4 px-4 py-3 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 text-sm">
            {{ error }}
        </div>
        {% endif %}
        <form method="post" class="space-y-4">
            <div>
                <input type="email" name="email" placeholder="{% trans %}Admin email address{% endtrans %}" required autofocus
                    class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
            </div>
            <button type="submit" class="w-full px-6 py-3 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold shadow-lg shadow-accent/30 hover:shadow-xl transition-all duration-300">
                <i class="fa fa-paper-plane mr-2"></i>{% trans %}Send Reset Link{% endtrans %}
            </button>
        </form>
        <div class="text-center mt-4">
            <a href="/admin/login" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
                <i class="fa fa-arrow-left mr-1"></i>{% trans %}Back to login{% endtrans %}
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}