{% extends 'bo/base.html.twig' %}

{% block title %}Connexion | Izibrick{% endblock %}

{% block stylesheets %}
<style>
    .login-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        position: relative;
        overflow: hidden;
    }

    .login-decorative-shape {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
    }

    .login-shape-1 {
        width: 300px;
        height: 300px;
        top: -100px;
        right: -100px;
        animation: float 8s ease-in-out infinite;
    }

    .login-shape-2 {
        width: 200px;
        height: 200px;
        bottom: -50px;
        left: -50px;
        animation: float 10s ease-in-out infinite reverse;
    }

    .login-shape-3 {
        width: 150px;
        height: 150px;
        top: 50%;
        left: 10%;
        animation: float 12s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(10deg); }
    }

    .login-card {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .login-input-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #667eea;
    }

    .login-input-with-icon {
        padding-left: 45px;
    }

    .login-card:hover {
        transform: translateY(-5px);
        transition: transform 0.3s ease;
    }
</style>
{% endblock %}

{% block body %}
<div class="login-container">
    {# Decorative shapes #}
    <div class="login-decorative-shape login-shape-1"></div>
    <div class="login-decorative-shape login-shape-2"></div>
    <div class="login-decorative-shape login-shape-3"></div>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-5 col-md-7">
                <div class="card login-card border-0 shadow-lg rounded-4" style="transition: transform 0.3s;">
                    {# Header with Logo #}
                    <div class="card-header border-0 bg-transparent text-center pt-5 pb-0">
                        <div class="mb-4">
                            <img src="{{ asset('assets/img/logo/logo-izibrick.png') }}" alt="izibrick" style="width: 70px; height: 70px;">
                        </div>
                        <h2 class="fw-bold mb-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
                            Connexion
                        </h2>
                        <p class="text-muted mb-0">Accédez à votre espace de création</p>
                    </div>

                    {# Card Body #}
                    <div class="card-body p-5">
                        {% if error %}
                            <div class="alert alert-danger d-flex align-items-center rounded-3 mb-4" role="alert">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <div>{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                            </div>
                        {% endif %}

                        <form action="{{ path('app_login') }}" method="post">
                            {# Email Input #}
                            <div class="mb-4">
                                <label for="username" class="form-label fw-semibold">
                                    <i class="fas fa-envelope me-2" style="color: #667eea;"></i>Email
                                </label>
                                <div class="position-relative">
                                    <i class="fas fa-user login-input-icon"></i>
                                    <input type="text"
                                           id="username"
                                           name="_username"
                                           value="{{ last_username }}"
                                           class="form-control form-control-lg login-input-with-icon rounded-3"
                                           placeholder="votre@email.com"
                                           required
                                           autofocus>
                                </div>
                            </div>

                            {# Password Input #}
                            <div class="mb-4">
                                <label for="password" class="form-label fw-semibold">
                                    <i class="fas fa-lock me-2" style="color: #667eea;"></i>Mot de passe
                                </label>
                                <div class="position-relative">
                                    <i class="fas fa-key login-input-icon"></i>
                                    <input type="password"
                                           id="password"
                                           name="_password"
                                           class="form-control form-control-lg login-input-with-icon rounded-3"
                                           placeholder="••••••••"
                                           required>
                                </div>
                            </div>

                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                            {# Remember Me #}
                            <div class="mb-4">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="form-check">
                                        <input type="checkbox"
                                               id="remember_me"
                                               name="_remember_me"
                                               class="form-check-input"
                                               style="border-color: #667eea;">
                                        <label class="form-check-label text-muted" for="remember_me">
                                            Se souvenir de moi
                                        </label>
                                    </div>
                                    <a href="{{ path('app_forgot_password_request') }}" class="text-decoration-none small" style="color: #667eea;">
                                        Mot de passe oublié ?
                                    </a>
                                </div>
                            </div>

                            {# Submit Button #}
                            <button type="submit" class="btn btn-lg w-100 text-white fw-semibold rounded-pill mb-3 py-3" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;">
                                <i class="fas fa-sign-in-alt me-2"></i>Se connecter
                            </button>

                            {# Divider #}
                            <div class="text-center my-4">
                                <span class="text-muted small">ou</span>
                            </div>

                            {# Create Account Link #}
                            <div class="text-center">
                                <p class="text-muted mb-2">Vous n'avez pas de compte ?</p>
                                <a href="{{ path('app_register') }}" class="btn btn-outline-primary btn-lg w-100 rounded-pill fw-semibold">
                                    <i class="fas fa-user-plus me-2"></i>Créer un compte
                                </a>
                            </div>
                        </form>
                    </div>

                    {# Footer #}
                    <div class="card-footer border-0 bg-transparent text-center pb-4">
                        <small class="text-muted">
                            <i class="fas fa-shield-alt me-1"></i>
                            Connexion sécurisée SSL
                        </small>
                    </div>
                </div>

                {# Back to Home Link #}
                <div class="text-center mt-4">
                    <a href="{{ path('index') }}" class="text-white text-decoration-none">
                        <i class="fas fa-arrow-left me-2"></i>Retour à l'accueil
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add hover effect to login card
        const card = document.querySelector('.login-card');
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-10px)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });

        // Focus effect on inputs
        const inputs = document.querySelectorAll('.login-input-with-icon');
        inputs.forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.querySelector('.login-input-icon').style.color = '#667eea';
            });
            input.addEventListener('blur', function() {
                this.parentElement.querySelector('.login-input-icon').style.color = '#999';
            });
        });
    });
</script>
{% endblock %}