{% extends 'auth/base.html' %}
{% load static %}

{% block title %}Login - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
    .login-container {
        min-height: 100vh;
        background: linear-gradient(135deg, var(--primary-color, #667eea) 0%, var(--secondary-color, #764ba2) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
        position: relative;
        overflow: hidden;
    }
    
    .login-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
        opacity: 0.3;
    }
    
    .login-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        width: 100%;
        max-width: 550px;
        position: relative;
        z-index: 1;
        animation: slideUp 0.8s ease-out;
    }
    
    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .logo-container {
        text-align: center;
        margin-bottom: 2rem;
        position: relative;
    }
    
    .logo-container::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 70px;
        height: 5px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        border-radius: 2px;
    }
    
    .logo-img {
        max-width: 180px;
        height: auto;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
        transition: transform 0.3s ease;
    }
    
    .logo-img:hover {
        transform: scale(1.05);
    }
    
    .form-floating {
        position: relative;
        margin-bottom: 1.5rem;
    }
    
    .form-floating .form-control {
        height: 60px;
        border: 2px solid #e1e5e9;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.9);
        font-size: 16px;
        padding: 1rem 1rem 0.5rem;
        transition: all 0.3s ease;
    }
    
    .form-floating .form-control:focus {
        border-color: var(--primary-color, #667eea);
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        background: white;
    }
    
    .form-floating label {
        color: #6c757d;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .input-group-text {
        background: transparent;
        border: none;
        color: #6c757d;
        cursor: pointer;
        transition: color 0.3s ease;
    }
    
    .input-group-text:hover {
        color: var(--primary-color, #667eea);
    }
 
    
    .btn-login::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }
    
    .btn-login:hover::before {
        left: 100%;
    }
    
    .btn-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    }
    
    .form-check {
        margin: 1.5rem 0;
    }
    
    .form-check-input:checked {
        background-color: var(--primary-color, #667eea);
        border-color: var(--primary-color, #667eea);
    }
    
    .forgot-password {
        color: var(--primary-color, #667eea);
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        position: relative;
    }
    
    .forgot-password::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: #667eea;
        transition: width 0.3s ease;
    }
    
    .forgot-password:hover::after {
        width: 100%;
    }
    
    .divider {
        position: relative;
        text-align: center;
        margin: 2rem 0;
    }
    
    .divider::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: #e1e5e9;
    }
    
    .divider span {
        background: white;
        padding: 0 1rem;
        color: #6c757d;
        font-size: 14px;
    }
    
    .register-link {
        color: var(--primary-color, #667eea);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s ease;
    }
    
    .register-link:hover {
        color: var(--secondary-color, #764ba2);
    }
    
    .security-badge {
        background: rgba(102, 126, 234, 0.1);
        border: 1px solid rgba(102, 126, 234, 0.2);
        border-radius: 25px;
        padding: 0.75rem 1.5rem;
        margin-top: 1.5rem;
        color: var(--primary-color, #667eea);
        font-size: 14px;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }
    
    .loading-spinner {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: white;
        animation: spin 1s linear infinite;
        display: inline-block;
        margin-right: 0.5rem;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    .error-message {
        background: linear-gradient(135deg, #ff6b6b, #ee5a52);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        animation: shake 0.5s ease-in-out;
    }
    
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }
    
    @media (max-width: 576px) {
        .login-container {
            padding: 1rem;
        }
        
        .login-card {
            margin: 0;
            border-radius: 15px;
        }
        
        .logo-img {
            max-width: 150px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="login-container">
    <div class="login-card">
        <div class="p-4 p-md-5">
            <div class="logo-container">
                <img src="{% static 'images/dark.png' %}" alt="Adtlas Logo" class="logo-img mb-2">
                
                <p class="text-muted mb-0">Sign in to your account</p>
            </div>
                            
            <form method="post" id="loginForm" novalidate>
                {% csrf_token %}
                
                {% if form.non_field_errors %}
                    <div class="error-message">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        {{ form.non_field_errors.0 }}
                    </div>
                {% endif %}
                
                <div class="form-floating">
                    <input type="text" 
                        class="form-control {% if form.username.errors %}is-invalid{% endif %}" 
                        id="{{ form.username.id_for_label }}"
                        name="{{ form.username.name }}"
                        value="{{ form.username.value|default:'' }}"
                        placeholder="Email or Username"
                        autocomplete="username"
                        required>
                    <label for="{{ form.username.id_for_label }}">
                        <i class="fas fa-user me-2"></i>Email or Username
                    </label>
                    {% if form.username.errors %}
                        <div class="invalid-feedback">
                            {{ form.username.errors.0 }}
                        </div>
                    {% endif %}
                </div>
                
                <div class="form-floating">
                    <div class="input-group">
                        <input type="password" 
                            class="form-control {% if form.password.errors %}is-invalid{% endif %}" 
                            id="{{ form.password.id_for_label }}"
                            name="{{ form.password.name }}"
                            placeholder="Password"
                            autocomplete="current-password"
                            required>
                        <span class="input-group-text" id="togglePassword" tabindex="0" role="button" aria-label="Toggle password visibility">
                            <i class="fas fa-eye" aria-hidden="true"></i>
                        </span>
                    </div>
                    <label for="{{ form.password.id_for_label }}">
                        <i class="fas fa-lock me-2"></i>Password
                    </label>
                    {% if form.password.errors %}
                        <div class="invalid-feedback">
                            {{ form.password.errors.0 }}
                        </div>
                    {% endif %}
                </div>
                
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="rememberMe" name="remember_me">
                        <label class="form-check-label" for="rememberMe">
                            Remember me
                        </label>
                    </div>
                    <a href="{% url 'auth:password_reset' %}" class="forgot-password">
                        <i class="fas fa-key me-1"></i>Forgot password?
                    </a>
                </div>

                <div class="d-grid mb-4">
                    <button type="submit" class="btn btn-login" id="loginBtn">
                        <span class="btn-text">
                            <i class="fas fa-sign-in-alt me-2"></i>Sign In
                        </span>
                        <span class="btn-loading d-none">
                            <span class="loading-spinner"></span>Signing in...
                        </span>
                    </button>
                </div>
                
            </form>
            
            <div class="divider">
                <span>New to Adtlas?</span>
            </div>
            
            <div class="text-center">
                <p class="mb-0">
                    Don't have an account? 
                    <a href="{% url 'auth:register' %}" class="register-link">Create Account</a>
                </p>
            </div>
            
            <div class="text-center security-badge">
                <i class="fas fa-shield-alt me-2"></i>
                Your data is protected with enterprise-grade security
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.getElementById('loginForm');
    const loginBtn = document.getElementById('loginBtn');
    const togglePassword = document.getElementById('togglePassword');
    const passwordField = document.getElementById('{{ form.password.id_for_label }}');
    const usernameField = document.getElementById('{{ form.username.id_for_label }}');
    
    // Enhanced password visibility toggle with accessibility
    function togglePasswordVisibility() {
        const isPassword = passwordField.getAttribute('type') === 'password';
        const newType = isPassword ? 'text' : 'password';
        passwordField.setAttribute('type', newType);
        
        const icon = togglePassword.querySelector('i');
        icon.classList.toggle('fa-eye', !isPassword);
        icon.classList.toggle('fa-eye-slash', isPassword);
        
        // Update aria-label for accessibility
        togglePassword.setAttribute('aria-label', 
            isPassword ? 'Hide password' : 'Show password'
        );
    }
    
    // Add click and keyboard event listeners for password toggle
    togglePassword.addEventListener('click', togglePasswordVisibility);
    togglePassword.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            togglePasswordVisibility();
        }
    });
    
    // Enhanced form submission with better loading state
    loginForm.addEventListener('submit', function(e) {
        // Validate form before submission
        if (!loginForm.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
            loginForm.classList.add('was-validated');
            return;
        }
        
        const btnText = loginBtn.querySelector('.btn-text');
        const btnLoading = loginBtn.querySelector('.btn-loading');
        
        // Show loading state with smooth transition
        btnText.classList.add('d-none');
        btnLoading.classList.remove('d-none');
        loginBtn.disabled = true;
        loginBtn.style.cursor = 'not-allowed';
        
        // Add visual feedback to form
        loginForm.style.opacity = '0.7';
        loginForm.style.pointerEvents = 'none';
        
        // Re-enable after timeout (fallback)
        setTimeout(function() {
            resetFormState();
        }, 15000);
    });
    
    function resetFormState() {
        const btnText = loginBtn.querySelector('.btn-text');
        const btnLoading = loginBtn.querySelector('.btn-loading');
        
        btnText.classList.remove('d-none');
        btnLoading.classList.add('d-none');
        loginBtn.disabled = false;
        loginBtn.style.cursor = 'pointer';
        loginForm.style.opacity = '1';
        loginForm.style.pointerEvents = 'auto';
    }
    
    // Auto-focus with delay for better UX
    setTimeout(function() {
        if (usernameField && !usernameField.value) {
            usernameField.focus();
        }
    }, 500);
    
    // Enhanced form validation with real-time feedback
    const inputs = loginForm.querySelectorAll('input[required]');
    inputs.forEach(function(input) {
        // Real-time validation on input
        input.addEventListener('input', function() {
            validateField(this);
        });
        
        // Validation on blur
        input.addEventListener('blur', function() {
            validateField(this);
        });
        
        // Clear validation on focus
        input.addEventListener('focus', function() {
            this.classList.remove('is-invalid', 'is-valid');
        });
    });
    
    function validateField(field) {
        const value = field.value.trim();
        const isValid = field.checkValidity() && value !== '';
        
        field.classList.remove('is-invalid', 'is-valid');
        
        if (field.hasAttribute('data-touched')) {
            field.classList.add(isValid ? 'is-valid' : 'is-invalid');
        }
        
        // Mark field as touched after first interaction
        field.setAttribute('data-touched', 'true');
    }
    
    // Enhanced keyboard navigation
    loginForm.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            const activeElement = document.activeElement;
            
            // If on username field, move to password
            if (activeElement === usernameField) {
                e.preventDefault();
                passwordField.focus();
            }
            // If on password field or toggle button, submit form
            else if (activeElement === passwordField || activeElement === togglePassword) {
                e.preventDefault();
                if (loginForm.checkValidity()) {
                    loginForm.submit();
                } else {
                    // Focus first invalid field
                    const firstInvalid = loginForm.querySelector(':invalid');
                    if (firstInvalid) {
                        firstInvalid.focus();
                    }
                }
            }
        }
    });
    
    // Add smooth animations for form interactions
    inputs.forEach(function(input) {
        input.addEventListener('focus', function() {
            this.parentElement.style.transform = 'scale(1.02)';
            this.parentElement.style.transition = 'transform 0.2s ease';
        });
        
        input.addEventListener('blur', function() {
            this.parentElement.style.transform = 'scale(1)';
        });
    });
    
    // Add ripple effect to login button
    loginBtn.addEventListener('click', function(e) {
        const ripple = document.createElement('span');
        const rect = this.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = e.clientX - rect.left - size / 2;
        const y = e.clientY - rect.top - size / 2;
        
        ripple.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            left: ${x}px;
            top: ${y}px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: scale(0);
            animation: ripple 0.6s linear;
            pointer-events: none;
        `;
        
        this.appendChild(ripple);
        
        setTimeout(() => {
            ripple.remove();
        }, 600);
    });
    
    // Add CSS for ripple animation
    const style = document.createElement('style');
    style.textContent = `
        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }
        
        .btn-login {
            position: relative;
            overflow: hidden;
        }
    `;
    document.head.appendChild(style);
    
    // Error message auto-dismiss
    const errorMessage = document.querySelector('.error-message');
    if (errorMessage) {
        setTimeout(function() {
            errorMessage.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            errorMessage.style.opacity = '0';
            errorMessage.style.transform = 'translateY(-20px)';
            
            setTimeout(function() {
                errorMessage.remove();
            }, 500);
        }, 5000);
    }
});
</script>
{% endblock %}