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

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

{% block login %}
    <div class="card shadow" style="width: 100%; max-width: 400px;">
        <div class="card-body p-4">
            <div class="text-center mb-3">
                <img src="{{ asset('alphavigie-logo.png') }}" alt="Alphavigie" style="max-height: 80px; max-width: 100%;">
            </div>
            <h1 class="h5 mb-4 text-center">Connexion à Alphavigie</h1>
            
            {% if app.environment == 'dev' %}
            <div class="alert alert-warning border-warning mb-4" style="background-color: #fff3cd;">
                <div class="text-center mb-2">
                    <small class="fw-bold text-dark">🔧 COMPTES DE TEST (MODE DEV)</small>
                </div>
                <div class="d-grid gap-2">
                    <button type="button" class="btn btn-sm btn-outline-primary text-start" onclick="autoLogin('admin@alphavigie.fr', 'admin')">
                        <i class="bi bi-shield-lock"></i> <strong>ADMIN</strong>
                        <small class="d-block text-muted">admin@alphavigie.fr - Accès complet</small>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-success text-start" onclick="autoLogin('agent@alphavigie.fr', 'agent')">
                        <i class="bi bi-person-badge"></i> <strong>AGENT</strong>
                        <small class="d-block text-muted">agent@alphavigie.fr - Agent de sécurité</small>
                    </button>
                </div>
            </div>
            {% endif %}
            
            {% if error %}
                <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
            {% endif %}
            
            <form method="post" action="{{ path('app_login') }}" id="loginForm">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                <div class="mb-3">
                    <label class="form-label">Email</label>
                    <input name="_username" type="email" class="form-control" value="{{ last_username }}" required autofocus>
                </div>
                <div class="mb-3">
                    <label class="form-label">Mot de passe</label>
                    <div class="input-group">
                        <input name="_password" id="passwordInput" type="password" class="form-control" required>
                        <button class="btn btn-outline-secondary" type="button" id="togglePassword" tabindex="-1">
                            <i class="bi bi-eye" id="toggleIcon"></i>
                        </button>
                    </div>
                </div>
                <div class="mb-3 form-check" style="padding-left: 0;">
                    <input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" checked style="margin-left: 0; margin-right: 0.5rem;">
                    <label class="form-check-label" for="remember_me" style="margin-left: 1.5rem;">Se souvenir de moi</label>
                </div>
                <button class="btn btn-primary w-100" type="submit">Se connecter</button>
            </form>
            
            <script>
                document.getElementById('togglePassword').addEventListener('click', function () {
                    const input = document.getElementById('passwordInput');
                    const icon  = document.getElementById('toggleIcon');
                    if (input.type === 'password') {
                        input.type = 'text';
                        icon.classList.replace('bi-eye', 'bi-eye-slash');
                    } else {
                        input.type = 'password';
                        icon.classList.replace('bi-eye-slash', 'bi-eye');
                    }
                });
            </script>

            {% if app.environment == 'dev' %}
            <script>
                function autoLogin(email, password) {
                    const form = document.getElementById('loginForm');
                    document.querySelector('input[name="_username"]').value = email;
                    document.querySelector('input[name="_password"]').value = password;
                    // Soumettre automatiquement le formulaire
                    form.submit();
                }
            </script>
            {% endif %}
        </div>
    </div>
{% endblock %}