{% extends "base.html" %}

{% block title %}Admin Login{% endblock %}

{% block body_class %}bg-gradient-to-br from-primary-50 via-white to-purple-50 min-h-screen flex items-center
justify-center p-4{% endblock %}

{% block content %}
<div class="w-full max-w-md">
    <!-- Logo/Brand -->
    <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-primary-600 rounded-2xl mb-4"
            style="background-color: #4f46e5; width: 64px; height: 64px; display: flex; align-items: center; justify-center: center; border-radius: 1rem;">
            <svg class="w-10 h-10 text-white" width="40" height="40" fill="none" stroke="currentColor"
                viewBox="0 0 24 24" style="color: white;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                </path>
            </svg>
        </div>
        <h1 class="text-3xl font-bold text-foreground">Admin Login</h1>
        <p class="text-muted-foreground mt-2">Sign in to access the admin panel</p>
    </div>

    <!-- Login Card -->
    <div class="bg-card rounded-2xl shadow-xl p-8">
        {% if error %}
        <div class="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
            <p class="text-red-600 text-sm">{{ error }}</p>
        </div>
        {% endif %}

        <form method="POST" action="{{ prefix }}/login" class="space-y-6">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
            <!-- Email Field -->
            <div>
                <label for="email" class="block text-sm font-medium text-foreground mb-2">
                    Email Address
                </label>
                <input type="email" id="email" name="email" required autofocus
                    class="w-full px-4 py-3 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all"
                    placeholder="admin@example.com" />
            </div>

            <!-- Password Field -->
            <div>
                <label for="password" class="block text-sm font-medium text-foreground mb-2">
                    Password
                </label>
                <input type="password" id="password" name="password" required
                    class="w-full px-4 py-3 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all"
                    placeholder="••••••••" />
            </div>

            <input type="hidden" name="next" value="{{ next_url }}" />

            <!-- Submit Button -->
            <button type="submit"
                class="w-full bg-primary-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all transform hover:scale-[1.02] active:scale-[0.98]">
                Sign In
            </button>
        </form>
    </div>

    <!-- Footer -->
    <div class="text-center mt-6">
        <p class="text-sm text-muted-foreground">
            Powered by Lexigram Admin
        </p>
    </div>
</div>
{% endblock %}