{% extends "web/base.html" %}
{% load static %}

{% block title %}Login - PassMCQ{% endblock title %}

{% block content %}
<!-- Include Alert Modal System -->
{% include "web/include/alert_modal.html" %}

<!-- Hidden messages for modal conversion -->
{% if messages %}
    {% for message in messages %}
    <div style="display:none;" 
         data-alert-message="{{ message }}" 
         data-alert-type="{% if message.tags %}{% if 'success' in message.tags %}success{% elif 'error' in message.tags %}error{% elif 'warning' in message.tags %}warning{% else %}info{% endif %}{% else %}error{% endif %}">
    </div>
    {% endfor %}
{% endif %}

<div class="min-h-screen bg-gradient-to-br from-gray-50 to-green-50 dark:from-slate-900 dark:to-slate-800 py-12">
    <div class="w-[95%] md:w-[85%] max-w-5xl mx-auto">
        <div class="bg-white dark:bg-slate-800 rounded-3xl shadow-xl overflow-hidden">
            <div class="flex flex-col lg:flex-row">
                <!-- Form Section -->
                <div class="flex-1 p-8 md:p-12">
                    <div class="max-w-md mx-auto">
                        <!-- Header -->
                        <div class="text-center mb-8">
                            <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-3">
                                Welcome Back
                            </h1>
                            <p class="text-gray-600 dark:text-gray-400">
                                Sign in to continue your learning journey
                            </p>
                        </div>

                        <!-- Login Form -->
                        <form method="POST" action="{% url 'login_user' %}" data-turbo="false" data-turbo-frame="_top" class="space-y-5">
                            {% csrf_token %}
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
                                <input type="email" 
                                       id="email"
                                       name="email" 
                                       placeholder="you@example.com" 
                                       required
                                       class="w-full px-5 py-3.5 rounded-xl border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all">
                            </div>
                            
                            <div>
                                <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
                                <input type="password" 
                                       id="password"
                                       name="password" 
                                       placeholder="••••••••" 
                                       required
                                       class="w-full px-5 py-3.5 rounded-xl border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all">
                            </div>
                            
                            <button type="submit" aria-label="Sign in" 
                                    data-turbo="false"
                                    class="w-full py-3.5 px-6 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-semibold rounded-xl shadow-lg shadow-green-500/30 transition-all duration-200 transform hover:scale-[1.02] focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900">
                                Sign In
                            </button>
                        </form>

                        <!-- Sign Up Link -->
                        <p class="text-center mt-6 text-gray-600 dark:text-gray-400">
                            Don't have an account? 
                            <a href="{% url 'signup_user' %}" data-turbo="false" class="text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 font-semibold hover:underline">
                                Sign Up
                            </a>
                        </p>

                        <!-- Divider -->
                        <div class="flex items-center gap-4 my-8">
                            <div class="flex-1 h-px bg-gray-200 dark:bg-slate-600"></div>
                            <span class="text-sm text-gray-500 dark:text-gray-400">or continue with</span>
                            <div class="flex-1 h-px bg-gray-200 dark:bg-slate-600"></div>
                        </div>
                        
                        <!-- Google OAuth -->
                        <a href="{% url 'social:begin' 'google-oauth2' %}?next={{ request.path }}" data-turbo="false" class="block focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900 rounded-xl" aria-label="Continue with Google">
                            <div class="flex items-center justify-center gap-3 w-full py-3.5 px-6 border-2 border-gray-200 dark:border-slate-600 rounded-xl hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all duration-200 group">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M24 12.2727C24 11.4218 23.9221 10.6036 23.7774 9.81818H12.2449V14.4655H18.8349C18.5455 15.96 17.6772 17.2255 16.3748 18.0764V21.0982H20.3488C22.6642 19.0036 24 15.9273 24 12.2727Z" fill="#4285F4"/>
                                    <path d="M12.2449 24C15.551 24 18.3228 22.9309 20.3488 21.0982L16.3748 18.0764C15.2839 18.7964 13.8924 19.2327 12.2449 19.2327C9.06122 19.2327 6.35622 17.1273 5.38776 14.2909H1.31354V17.3891C3.32839 21.3055 7.45826 24 12.2449 24Z" fill="#34A853"/>
                                    <path d="M5.38776 14.28C5.14286 13.56 4.99814 12.7964 4.99814 12C4.99814 11.2036 5.14286 10.44 5.38776 9.72V6.62182H1.31354C0.478664 8.23636 0 10.0582 0 12C0 13.9418 0.478664 15.7636 1.31354 17.3782L4.48609 14.9564L5.38776 14.28Z" fill="#FBBC05"/>
                                    <path d="M12.2449 4.77818C14.0482 4.77818 15.6512 5.38909 16.9314 6.56727L20.4378 3.13091C18.3117 1.18909 15.551 0 12.2449 0C7.45826 0 3.32839 2.69455 1.31354 6.62182L5.38776 9.72C6.35622 6.88364 9.06122 4.77818 12.2449 4.77818Z" fill="#EA4335"/>
                                </svg>
                                <span class="text-gray-700 dark:text-gray-200 font-medium group-hover:text-blue-600 dark:group-hover:text-blue-400">Continue with Google</span>
                            </div>
                        </a>
                    </div>
                </div>

                <!-- Illustration Section -->
                <div class="hidden lg:flex flex-1 bg-gradient-to-br from-green-500 to-green-600 p-12 items-center justify-center">
                    <div class="text-center text-white">
                        <img src="{% static 'img/auth/login.png' %}" alt="Login illustration" class="max-w-sm mx-auto mb-8 drop-shadow-2xl">
                        <h3 class="text-2xl font-bold mb-3">Start Learning Today</h3>
                        <p class="text-green-100 max-w-xs mx-auto">Practice thousands of MCQ questions and ace your exams with confidence.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}