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

{% block title %}Connexion{% endblock %}

{% block body %}
<div class="d-flex justify-content-center align-items-center vh-100" style="background-color: #f3f4f6;">
    <div class="card shadow-lg p-4" style="width: 100%; max-width: 400px; border-radius: 1rem;">
        
        <h2 class="text-center text-primary fw-bold mb-4" style="font-size: 1.5rem;">Connexion Employeur</h2>

        {% if error %}
            <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
        {% endif %}

        {% if app.user %}
            <div class="alert alert-info text-center">
                Connecté en tant que {{ app.user.userIdentifier }}, 
                <a href="{{ path('app_logout') }}" class="link-primary">Déconnexion</a>
            </div>
        {% endif %}

        <!-- Boutons de connexion sociale -->
        <div class="d-flex flex-column gap-2 mb-3">
            <a href="{{ path('facebook_login') }}" type="button" class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2">
                <img src="/images/facebook-logo.jpg" alt="Facebook" style="height: 20px;"> Se connecter avec Facebook
            </a>
            <a href="{{ path('google_login')}}" type="button" class="btn btn-outline-secondary d-flex align-items-center justify-content-center gap-2">
                <img src="/images/google-logo.png" alt="Google" style="height: 20px;"> Se connecter avec Google
            </a>
        </div>

        <!-- Séparateur OU -->
        <div class="d-flex align-items-center text-secondary text-center mb-3">
            <hr class="flex-grow-1">
            <span class="px-2 small">ou</span>
            <hr class="flex-grow-1">
        </div>

        <!-- Formulaire -->
        <form method="post" action="{{ path('app_login') }}">
            <div class="mb-3">
                <label for="inputEmail" class="form-label">Email</label>
                <input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control form-control-lg" autocomplete="email" required autofocus>
            </div>

            <div class="mb-3">
                <label for="passwordInput" class="form-label">Mot de passe</label>
                <div class="input-group">
                    <input type="password" name="password" id="passwordInput" class="form-control" placeholder="Mot de passe" required>
                    <button type="button" class="btn btn-outline-secondary d-flex align-items-center" id="togglePassword" style="padding: 0 0.75rem;">
                        👁️
                    </button>
                </div>
            </div>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="form-check">
                    <input type="checkbox" name="remember" id="remember" class="form-check-input">
                    <label class="form-check-label" for="remember">Se souvenir de moi</label>
                </div>
                <a href="#" class="link-primary">Mot de passe oublié ?</a>
            </div>

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

            <button class="btn btn-primary btn-lg w-100" type="submit">Se connecter</button>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput = document.getElementById('passwordInput');

    togglePassword.addEventListener('click', () => {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
    });
});
</script>
{% endblock %}