{% load i18n %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% trans "Login - PX360" %}</title>
    <link rel="stylesheet" href="{% static 'dist/css/tailwind.css' %}">
    <script src="https://unpkg.com/lucide@latest"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'vendor/fonts/noto-kufi-arabic/arabic.css' %}">
    <style>
        body { font-family: 'Inter', 'Noto Kufi Arabic', sans-serif; }
        [dir="rtl"] body,
        [dir="rtl"] input,
        [dir="rtl"] textarea,
        [dir="rtl"] select,
        [dir="rtl"] button {
            font-family: 'Noto Kufi Arabic', sans-serif;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-navy via-blue to-light min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md">
        <!-- Login Card -->
        <div class="bg-white rounded-[2rem] shadow-2xl overflow-hidden">
            <!-- Header -->
            <div class="text-navy p-8 text-center">
                <div class="mb-4">
                    {% load static %}
                    <img src="{% static 'img/hh-logo.png' %}" alt="HH Logo" class="h-20 w-auto mx-auto bg-white/90 backdrop-blur-sm p-2 rounded-2xl inline-block">
                </div>
                <h1 class="text-2xl font-bold mb-2">{% trans "Welcome to PX360" %}</h1>
                <p class="text-navy text-sm">{% trans "Patient Experience Management System" %}</p>
            </div>

            <!-- Body -->
            <div class="p-8">
                <!-- Flash Messages -->
                {% if messages %}
                    <div class="mb-6 space-y-3">
                        {% for message in messages %}
                        <div class="{% if message.tags == 'error' or message.tags == 'danger' %}bg-red-50 border-red-200 text-red-700{% elif message.tags == 'warning' %}bg-amber-50 border-amber-200 text-amber-700{% elif message.tags == 'success' %}bg-green-50 border-green-200 text-green-700{% else %}bg-blue-50 border-blue-200 text-blue-700{% endif %} border rounded-xl px-4 py-3 flex items-start gap-3" role="alert">
                            {% if message.tags == 'error' or message.tags == 'danger' %}
                                <i data-lucide="alert-triangle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
                            {% elif message.tags == 'warning' %}
                                <i data-lucide="alert-circle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
                            {% elif message.tags == 'success' %}
                                <i data-lucide="check-circle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
                            {% else %}
                                <i data-lucide="info" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
                            {% endif %}
                            <p class="text-sm flex-1">{{ message }}</p>
                        </div>
                        {% endfor %}
                    </div>
                {% endif %}

                <!-- Login Form -->
                <form method="post">
                    {% csrf_token %}

                    <!-- Email -->
                    <div class="mb-5">
                        <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
                            <i data-lucide="mail" class="w-4 h-4 inline mr-1"></i> {% trans "Email Address" %}
                        </label>
                        <div class="relative">
                            <i data-lucide="at-sign" class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                            <input type="email"
                                   class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition"
                                   id="email"
                                   name="email"
                                   placeholder="{% trans 'Enter your email' %}"
                                   required
                                   autofocus>
                        </div>
                    </div>

                    <!-- Password -->
                    <div class="mb-5">
                        <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">
                            <i data-lucide="lock" class="w-4 h-4 inline mr-1"></i> {% trans "Password" %}
                        </label>
                        <div class="relative">
                            <i data-lucide="key" class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                            <input type="password"
                                   class="w-full pl-12 pr-12 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition"
                                   id="password"
                                   name="password"
                                   placeholder="{% trans 'Enter your password' %}"
                                   required>
                            <button type="button"
                                    id="togglePassword"
                                    class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-navy transition p-1">
                                <i data-lucide="eye" id="toggleIcon" class="w-5 h-5"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Remember Me & Forgot Password -->
                    <div class="flex items-center justify-between mb-6">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox"
                                   class="w-4 h-4 text-navy border-gray-300 rounded focus:ring-navy">
                            <span class="text-sm text-gray-600">{% trans "Remember me" %}</span>
                        </label>
                        <a href="{% url 'accounts:password_reset' %}"
                           class="text-sm text-navy font-medium hover:text-blue-600 transition">
                            {% trans "Forgot password?" %}
                        </a>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit"
                            class="w-full bg-navy hover:bg-blue text-white py-3.5 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center gap-2">
                        <i data-lucide="log-in" class="w-5 h-5"></i>
                        {% trans "Sign In" %}
                    </button>
                </form>

                <!-- Divider -->
                {% comment %} <div class="flex items-center gap-4 my-6">
                    <div class="flex-1 h-px bg-gray-200"></div>
                    <span class="text-sm text-gray-400">{% trans "or continue with" %}</span>
                    <div class="flex-1 h-px bg-gray-200"></div>
                </div>

                <!-- SSO Buttons (placeholder) -->
                <div class="grid grid-cols-2 gap-3">
                    <button class="flex items-center justify-center gap-2 py-3 px-4 border border-gray-200 rounded-xl hover:bg-gray-50 transition text-sm font-medium text-gray-700">
                        <i data-lucide="shield-check" class="w-4 h-4"></i>
                        <span>SSO</span>
                    </button>
                    <button class="flex items-center justify-center gap-2 py-3 px-4 border border-gray-200 rounded-xl hover:bg-gray-50 transition text-sm font-medium text-gray-700">
                        <i data-lucide="smartphone" class="w-4 h-4"></i>
                        <span>Mobile</span>
                    </button>
                </div> {% endcomment %}
            </div>

            <!-- Footer -->
            <div class="bg-gray-50 px-8 py-6 text-center border-t border-gray-100">
                <p class="text-sm text-gray-500 mb-2">
                    {% trans "Secure login powered by" %} <a href="https://tenhal.sa" target="_blank" class="text-navy font-medium hover:underline">tenhal.sa</a>
                </p>
                <p class="text-xs text-gray-400">
                    &copy; {% now "Y" %} Al Hammadi Hospital
                </p>
            </div>
        </div>

        <!-- Help Link -->
        {% comment %} <div class="mt-6 text-center">
            <a href="#" class="text-white/80 hover:text-white text-sm font-medium transition flex items-center justify-center gap-1">
                <i data-lucide="help-circle" class="w-4 h-4"></i>
                {% trans "Need help logging in?" %}
            </a>
        </div> {% endcomment %}
    </div>

    <script>
        // Initialize Lucide icons
        lucide.createIcons();

        // Password visibility toggle
        document.getElementById('togglePassword').addEventListener('click', function() {
            const passwordInput = document.getElementById('password');
            const toggleIcon = document.getElementById('toggleIcon');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleIcon.setAttribute('data-lucide', 'eye-off');
            } else {
                passwordInput.type = 'password';
                toggleIcon.setAttribute('data-lucide', 'eye');
            }
            lucide.createIcons();
        });

        // Auto-hide success messages after 5 seconds
        document.addEventListener('DOMContentLoaded', function() {
            const successMessages = document.querySelectorAll('.bg-green-50');
            successMessages.forEach(msg => {
                setTimeout(() => {
                    msg.style.opacity = '0';
                    msg.style.transform = 'translateY(-10px)';
                    msg.style.transition = 'all 0.3s ease-out';
                    setTimeout(() => msg.remove(), 300);
                }, 5000);
            });
        });
    </script>
</body>
</html>