
{% load i18n static %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% trans 'Log in' %} | {{ site_title }}</title>
     <link rel="stylesheet" href="{% static 'adminita/adminita-tailwind.css' %}">
    
    <script>
        // Dark mode handling
        if (localStorage.getItem('darkMode') === 'true' || 
            (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        }
    </script>
</head>

<body class="h-full bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
    
    <div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-md w-full">
            
            <!-- Logo/Header -->
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                    {{ site_header|default:_('Django administration') }}
                </h1>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    {% trans 'Sign in to your account' %}
                </p>
            </div>
            
            <!-- Login Form -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
                
                {% if form.errors %}
                <div class="bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 px-6 py-4">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-red-600 dark:text-red-400 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                        </svg>
                        <div>
                            <p class="text-sm text-red-800 dark:text-red-200">
                                {% if form.errors.items|length == 1 %}
                                    {% trans "Please correct the error below." %}
                                {% else %}
                                    {% trans "Please correct the errors below." %}
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <div class="px-8 py-10">
                    <form method="post" id="login-form">
                        {% csrf_token %}
                        
                        <input type="hidden" name="next" value="{{ next }}">
                        
                        <div class="space-y-6">
                            <!-- Username -->
                            <div>
                                <label for="id_username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    {{ form.username.label }}
                                    <span class="text-red-600 dark:text-red-400">*</span>
                                </label>
                                <input type="text" 
                                       name="username" 
                                       id="id_username"
                                       autocomplete="username"
                                       autofocus
                                       required
                                       class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors">
                                
                                {% if form.username.errors %}
                                <div class="mt-2 text-sm text-red-600 dark:text-red-400">
                                    {{ form.username.errors }}
                                </div>
                                {% endif %}
                            </div>
                            
                            <!-- Password -->
                            <div>
                                <label for="id_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    {{ form.password.label }}
                                    <span class="text-red-600 dark:text-red-400">*</span>
                                </label>
                                <input type="password" 
                                       name="password" 
                                       id="id_password"
                                       autocomplete="current-password"
                                       required
                                       class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors">
                                
                                {% if form.password.errors %}
                                <div class="mt-2 text-sm text-red-600 dark:text-red-400">
                                    {{ form.password.errors }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="mt-8">
                            <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                                {% trans 'Log in' %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Dark Mode Toggle -->
            <div class="mt-6 text-center">
                <button id="dark-mode-toggle" type="button" class="inline-flex items-center px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">
                    <svg class="w-5 h-5 mr-2 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/>
                    </svg>
                    <svg class="w-5 h-5 mr-2 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
                    </svg>
                    <span class="hidden dark:inline">{% trans 'Light mode' %}</span>
                    <span class="inline dark:hidden">{% trans 'Dark mode' %}</span>
                </button>
            </div>
        </div>
    </div>
    <!-- Footer -->
<footer class="mt-12 px-6 py-4 text-center text-sm text-gray-600 dark:text-gray-400">
    Powered by 
    <a href="https://adminita.todiane.com" 
       class="text-primary-600 dark:text-primary-400 hover:underline" 
       target="_blank">
       Adminita
    </a>
</footer>

     <script src="{% static 'adminita/adminita-tailwind.js' %}" defer></script>
</body>
</html>