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

{% block title %}Connexion - Emusic{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
    .register-btn-container {
    display: flex;
    justify-content: center;
}
        .login-container {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: calc(100vh - 100px);
        }

        .login-card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius-lg);
            width: 400px;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--border-light);
            position: relative;
        }

        .form-tabs {
            display: flex;
            border-bottom: 1px solid var(--border-light);
            position: relative;
        }

        .form-tab {
            flex: 1;
            text-align: center;
            padding: 1.2rem 0;
            font-weight: 600;
            cursor: pointer;
            color: var(--text-muted);
            transition: var(--transition);
            position: relative;
            z-index: 1;
        }

        .form-tab.active {
            color: var(--text-light);
        }

        .tab-slider {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50%;
            height: 3px;
            background-color: var(--primary-color);
            transition: var(--transition);
        }

        .tab-slider.right {
            left: 50%;
        }

        .form-section {
            padding: 2rem;
            transition: var(--transition);
        }

        .login-form {
            display: block;
        }

        .register-form {
            display: none;
        }

        .form-title {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            text-align: center;
            color: var(--text-light);
        }

        .alert {
            margin-bottom: 1.5rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
            position: relative;
        }

        .form-control {
            background-color: var(--input-bg);
            border: 1px solid var(--border-light);
            border-radius: var(--border-radius);
            padding: 0.8rem 1rem 0.8rem 2.8rem;
            width: 100%;
            color: var(--text-light);
            transition: var(--transition);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-transparent);
        }

        .form-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
        }

        .btn-login {
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            padding: 0.8rem 1rem;
            width: 100%;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            margin-top: 1rem;
            display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
        }

        .btn-login:hover {
            background-color: var(--primary-dark);
            box-shadow: var(--glow-primary);
            transform: translateY(-2px);
        }

        .btn-secondary {
            background-color: var(--card-hover);
            color: var(--text-light);
            border: 1px solid var(--border-light);
        }

        .btn-secondary:hover {
            background-color: var(--input-bg);
            box-shadow: var(--shadow-sm);
        }

        .form-footer {
            text-align: center;
            margin-top: 1.5rem;
        }

        .form-footer a {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
        }

        .form-footer a:hover {
            text-decoration: underline;
        }

        .btn-link {
            background: none;
            border: none;
            color: var(--primary-color);
            padding: 0;
            cursor: pointer;
            font-size: 0.9rem;
            text-decoration: underline;
        }

        .btn-link:hover {
            color: var(--primary-light);
        }

        @media (max-width: 576px) {
            .login-card {
                width: 320px;
            }
            
            .form-section {
                padding: 1.5rem;
            }
        }
    </style>
{% endblock %}

{% block content %}
    <div class="login-container">
        <div class="login-card">
            <div class="form-tabs">
                <div class="form-tab active" id="login-tab">Connexion</div>
                <div class="form-tab" id="register-tab">Inscription</div>
                <div class="tab-slider"></div>
            </div>
            
            <div class="form-section login-form" id="login-form">
                <h2 class="form-title">Bienvenue sur Emusic</h2>
                
                {% if error %}
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ error.messageKey|trans(error.messageData, 'security') }}
                    </div>
                {% endif %}

                {% if app.user %}
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        Vous êtes connecté en tant que {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Se déconnecter</a>
                    </div>
                {% endif %}
                
                <form method="post">
                    <div class="form-group">
                        <i class="fas fa-envelope form-icon"></i>
                        <input type="email" value="{{ last_username }}" name="_username" id="username" class="form-control" autocomplete="email" required autofocus placeholder="Adresse e-mail" />
                    </div>
                    
                    <div class="form-group">
                        <i class="fas fa-lock form-icon"></i>
                        <input type="password" name="_password" id="password" class="form-control" autocomplete="current-password" required placeholder="Mot de passe" />
                    </div>
                    
                    <div class="form-group" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
                        <div>
                            <input type="checkbox" id="remember_me" name="_remember_me" checked style="margin-right: 5px;">
                            <label for="remember_me" style="color: var(--text-muted); font-size: 0.9rem;">Se souvenir de moi</label>
                        </div>
                        <button type="button" class="btn-link">Mot de passe oublié ?</button>
                    </div>
                    
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                    
                    <button type="submit" class="btn-login">
                        <i class="fas fa-sign-in-alt" style="margin-right: 8px;"></i>Connexion
                    </button>
                </form>
                
                <div class="form-footer">
                    <p style="color: var(--text-muted); font-size: 0.9rem;">
                        Pas encore de compte ? <a href="#" id="switch-to-register">S'inscrire</a>
                    </p>
                </div>
            </div>
            
            <div class="form-section register-form" id="register-form">
                <h2 class="form-title">Créer un compte</h2>
                
                <div class="form-group">
                    <i class="fas fa-user form-icon"></i>
                    <div class="register-btn-container">
                         <a href="http://172.20.177.77/lilian31/public/register" class="btn-login">
        <i class="fas fa-user-plus"></i>Créer un compte
    </a>
</div>
                </div>
                
                <div class="form-footer">
                    <p style="color: var(--text-muted); font-size: 0.9rem;">
                        Déjà inscrit ? <a href="#" id="switch-to-login">Se connecter</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
	<script>
        document.addEventListener('DOMContentLoaded', function() {
            const loginTab = document.getElementById('login-tab');
            const registerTab = document.getElementById('register-tab');
            const tabSlider = document.querySelector('.tab-slider');
            const loginForm = document.getElementById('login-form');
            const registerForm = document.getElementById('register-form');
            const switchToRegister = document.getElementById('switch-to-register');
            const switchToLogin = document.getElementById('switch-to-login');
            
            function showRegisterForm() {
                loginTab.classList.remove('active');
                registerTab.classList.add('active');
                tabSlider.classList.add('right');
                loginForm.style.display = 'none';
                registerForm.style.display = 'block';
            }
            
            function showLoginForm() {
                registerTab.classList.remove('active');
                loginTab.classList.add('active');
                tabSlider.classList.remove('right');
                registerForm.style.display = 'none';
                loginForm.style.display = 'block';
            }
            
            registerTab.addEventListener('click', showRegisterForm);
            loginTab.addEventListener('click', showLoginForm);
            switchToRegister.addEventListener('click', function(e) {
                e.preventDefault();
                showRegisterForm();
            });
            switchToLogin.addEventListener('click', function(e) {
                e.preventDefault();
                showLoginForm();
            });
        });
    </script>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loginTab = document.getElementById('login-tab');
            const registerTab = document.getElementById('register-tab');
            const tabSlider = document.querySelector('.tab-slider');
            const loginForm = document.getElementById('login-form');
            const registerForm = document.getElementById('register-form');
            const switchToRegister = document.getElementById('switch-to-register');
            const switchToLogin = document.getElementById('switch-to-login');
            
            function showRegisterForm() {
                loginTab.classList.remove('active');
                registerTab.classList.add('active');
                tabSlider.classList.add('right');
                loginForm.style.display = 'none';
                registerForm.style.display = 'block';
            }
            
            function showLoginForm() {
                registerTab.classList.remove('active');
                loginTab.classList.add('active');
                tabSlider.classList.remove('right');
                registerForm.style.display = 'none';
                loginForm.style.display = 'block';
            }
            
            registerTab.addEventListener('click', showRegisterForm);
            loginTab.addEventListener('click', showLoginForm);
            switchToRegister.addEventListener('click', function(e) {
                e.preventDefault();
                showRegisterForm();
            });
            switchToLogin.addEventListener('click', function(e) {
                e.preventDefault();
                showLoginForm();
            });
        });
    </script>
{% endblock %}