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

{% block title %}Connexion - Na+{% endblock %}

{% block body %}
<main id="contenu">
    <img src="/Logo.png" alt="Logo n-atypik" class="logo-central" />
    
    <h1 class="hero-title">Connexion</h1>

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

        <form method="post" class="card">
            <h2>Connectez-vous à votre compte</h2>
            
            <div class="form-group">
                <label for="username">Email <span class="req">*</span></label>
                <input type="email" 
                       id="username" 
                       name="_username" 
                       value="{{ last_username }}" 
                       autocomplete="email" 
                       required 
                       autofocus>
            </div>

            <div class="form-group">
                <label for="password">Mot de passe <span class="req">*</span></label>
                <div style="position: relative;">
                    <input type="password"
                           id="password" 
                           name="_password" 
                           autocomplete="current-password" 
                           required
                           style="padding-right: 45px;">
                    <button type="button" onclick="togglePassword()" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1.2rem; padding: 0; width: 30px; height: 30px;" title="Afficher le mot de passe" id="toggleBtn">
                        🙈
                    </button>
                </div>
            </div>

            <div class="consent-checkboxes">
                <label class="checkbox-label">
                    <input type="checkbox" name="_remember_me" checked>
                    <span>Se souvenir de moi</span>
                </label>
            </div>

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

            <div class="actions">
                <button type="submit">Se connecter</button>
                <a href="{{ path('app_home', {'_locale': app.request.locale}) }}" class="btn-secondary">
                    Retour
                </a>
            </div>

            <p class="form-note">
                Pas encore de compte ? 
                <a href="{{ path('app_inscription', {'_locale': app.request.locale}) }}">Inscrivez-vous ici</a>
            </p>
        </form>
    </div>
</main>

<script>
function togglePassword() {
    const field = document.getElementById('password');
    const btn = document.getElementById('toggleBtn');
    if (field.type === 'password') {
        field.type = 'text';
        btn.innerHTML = '👁️';
        btn.title = 'Masquer le mot de passe';
    } else {
        field.type = 'password';
        btn.innerHTML = '🙈';
        btn.title = 'Afficher le mot de passe';
    }
}
</script>
{% endblock %}