{% extends "base.html" %}

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

{% block extra_css %}
<style>
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.login-container::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    top: -100px;
    right: -100px;
    animation: float 6s ease-in-out infinite;
    filter: blur(40px);
}

.login-container::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    bottom: -50px;
    left: -50px;
    animation: float 8s ease-in-out infinite reverse;
    filter: blur(40px);
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-30px); }
}

.login-card {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.3), 0 20px 60px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(139, 92, 246, 0.3);
    animation: scaleIn 0.5s ease-out;
    color: #ffffff;
}

.login-icon-wrapper {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.6), 0 10px 30px rgba(139, 92, 246, 0.4);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.form-control, .input-group-text {
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    transform: translateY(-2px);
}

.input-group-text {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
}
</style>
{% endblock %}

{% block content %}
<div class="login-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-5">
                <div class="login-card p-5">
                    <div class="text-center mb-4">
                        <div class="login-icon-wrapper">
                            <i class="bi bi-shield-check-fill text-white" style="font-size: 3rem;"></i>
                        </div>
                        <h2 class="mt-4 fw-bold" style="background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Welcome Back!</h2>
                        <p class="text-muted">Login to access your verification dashboard</p>
                    </div>

                    <div id="alertContainer"></div>

                    <form id="loginForm">
                        <div class="mb-4">
                            <label for="email" class="form-label fw-semibold">Email Address</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
                                <input type="email" class="form-control" id="email" placeholder="your@email.com" required>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="password" class="form-label fw-semibold">Password</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
                                <input type="password" class="form-control" id="password" placeholder="Enter your password" required>
                            </div>
                        </div>

                        <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-primary btn-lg" id="loginBtn" style="border-radius: 12px; padding: 0.8rem; font-weight: 600; box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);">
                                <i class="bi bi-box-arrow-in-right me-2"></i>Login to Dashboard
                            </button>
                        </div>
                    </form>

                    <div class="text-center mt-4">
                        <p class="text-muted mb-0">Don't have an account? <a href="/register" class="fw-bold" style="color: var(--primary-color); text-decoration: none;">Create Account</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    $('#loginForm').submit(function(e) {
        e.preventDefault();
        
        const email = $('#email').val();
        const password = $('#password').val();
        const btn = $('#loginBtn');
        
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Logging in...');
        
        $.ajax({
            url: '/api/auth/login',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ email, password }),
            success: function(response) {
                if (response.success) {
                    showAlert('success', 'Login successful! Redirecting...');
                    setTimeout(() => window.location.href = '/dashboard', 1000);
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON || {};
                showAlert('danger', response.message || 'Login failed');
                btn.prop('disabled', false).html('<i class="bi bi-box-arrow-in-right"></i> Login');
            }
        });
    });
});

function showAlert(type, message) {
    $('#alertContainer').html(`
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `);
}
</script>
{% endblock %}