{% import '@SyliusShop/Common/Macro/messages.html.twig' as messages %}

{% if last_error %}
    {{ messages.error(last_error.messageKey|trans(last_error.messageData, 'security')) }}
{% endif %}

{{ form_row(form._username, sylius_test_form_attribute('login-username')) }}

<div class="mb-3 position-relative">
    {{ form_label(form._password) }}
    <div class="input-group">
        {{ form_widget(form._password, {
            'attr': {
                'id': 'password-field',
                'class': 'form-control',
                'autocomplete': 'current-password'
            }
        }) }}
        <button type="button"
                class="input-group-text"
                id="toggle-password-btn"
                aria-label="Afficher ou masquer le mot de passe"
                style="cursor: pointer;">
            <i class="bi bi-eye" id="toggle-icon"></i>
        </button>
    </div>
    {{ form_errors(form._password) }}
</div>

{{ form_row(form._remember_me, sylius_test_form_attribute('remember-me')) }}

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        console.log('DOMContentLoaded lancé');
    
        const toggleBtn = document.getElementById('toggle-password-btn');
        const passwordField = document.getElementById('_password'); // corrigé ici
        const toggleIcon = document.getElementById('toggle-icon');
    
        if (!toggleBtn || !passwordField || !toggleIcon) {
            console.warn('Un élément du DOM est introuvable, le script ne peut pas s’exécuter.');
            return;
        }
    
        toggleBtn.addEventListener('click', function () {
            console.log('Bouton cliqué');
            const isHidden = passwordField.type === 'password';
            passwordField.type = isHidden ? 'text' : 'password';
    
            toggleIcon.classList.toggle('bi-eye', !isHidden);
            toggleIcon.classList.toggle('bi-eye-slash', isHidden);
        });
    });
    </script>