{% extends "admin/base-admin.html" %}
{% block title %}Login{% 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 %}Admin Panel{% endtrans %}</h3>
        <p class="text-gray-500 dark:text-gray-400 mt-2">{% trans %}Login below to continue{% 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">
            {{ error }}
        </div>
        {% endif %}

        <form method="post" class="space-y-4">
            <div>
                <input type="text" name="username" placeholder="{% trans %}Username{% endtrans %}" data-testid="input-username"
                    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>
                <input type="password" name="password" placeholder="{% trans %}Password{% endtrans %}" data-testid="input-password"
                    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 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" data-testid="button-login">{% trans %}Login{% endtrans %}</button>
        </form>
        <div class="text-center mt-4">
            <a href="/admin/forgot-password" class="text-sm text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" data-testid="link-forgot-password">
                {% trans %}Forgot your password?{% endtrans %}
            </a>
        </div>
    </div>
</div>
{% endblock %}