{% extends "admin/base-admin.html" %}
{% block title %}Reset 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 %}Set New Password{% endtrans %}</h3>
        <p class="text-gray-500 dark:text-gray-400 mt-2">{% trans %}Enter and confirm your new admin password{% endtrans %}</p>
    </div>
    <div class="max-w-md mx-auto">
        {% 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">
            <i class="fa fa-circle-exclamation mr-1"></i> {{ error }}
        </div>
        {% if not token %}
        <div class="text-center mt-4">
            <a href="/admin/forgot-password" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">
                <i class="fa fa-arrow-left mr-1"></i>{% trans %}Request a new reset link{% endtrans %}
            </a>
        </div>
        {% endif %}
        {% endif %}

        {% if token %}
        <form method="post" class="space-y-4">
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{% trans %}New Password{% endtrans %}</label>
                <input type="password" name="new_password" placeholder="{% trans %}At least 8 characters{% endtrans %}" required minlength="8" 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>
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{% trans %}Confirm New Password{% endtrans %}</label>
                <input type="password" name="confirm_password" placeholder="{% trans %}Repeat your new password{% endtrans %}" required
                    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-lock mr-2"></i>{% trans %}Set New Password{% endtrans %}
            </button>
        </form>
        {% endif %}
    </div>
</div>
{% endblock %}