{{ form_start(form, {'action': path('admin.utilisateurs.new'), 'method': 'POST'}) }}
{{ alert_infos('NB!', 'Tous les champs comportant un (*) sont obligatoires.') }}
<ul class="nav nav-tabs nav-tabs-highlight">
    <li class="nav-item">
        <a href="#vertical-left-infos" class="nav-link active" data-toggle="tab">
            <i class="icon-info22 mr-2"></i> Infos basics
        </a>
    </li>
    <li class="nav-item">
        <a href="#vertical-left-password" class="nav-link" data-toggle="tab">
            <i class="icon-lock2 mr-2"></i> Mot de passe
        </a>
    </li>
    <li class="nav-item">
        <a href="#vertical-left-adresse" class="nav-link" data-toggle="tab">
            <i class="icon-map4 mr-2"></i> Adresse
        </a>
    </li>
    <li class="nav-item">
        <a href="#vertical-left-photo" class="nav-link" data-toggle="tab">
            <i class="icon-images2 mr-2"></i> Photo
        </a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade show active" id="vertical-left-infos">
        {% include 'admin/security/users/commons/_form_tab_general_account.html.twig' with {'user': utilisateur} %}
        <div class="row" style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
            <div class="col-md-12" style="text-align: left!important;">
                <button type="button" class="btn btn-sm btn-primary next-tab">Suivant <i class="icon-arrow-right"></i></button>
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="vertical-left-password">
        {% include 'admin/security/users/commons/_form_tab_password_account.html.twig' with {'user': utilisateur} %}
        <div class="d-flex justify-content-between mt-2">
            <button type="button" class="btn btn-sm btn-secondary prev-tab"><i class="icon-arrow-left"></i> Précédent</button>
            <button type="button" class="btn btn-sm btn-primary next-tab">Suivant <i class="icon-arrow-right"></i></button>
        </div>
    </div>

    <div class="tab-pane fade" id="vertical-left-adresse">
        {% include 'admin/security/users/commons/_form_tab_adresse_account.html.twig' %}
         <div class="d-flex justify-content-between mt-2">
            <button type="button" class="btn btn-sm btn-secondary prev-tab"><i class="icon-arrow-left"></i> Précédent</button>
            <button type="button" class="btn btn-sm btn-primary next-tab">Suivant <i class="icon-arrow-right"></i></button>
        </div>
    </div>

    <div class="tab-pane fade" id="vertical-left-photo">
        {% include 'admin/security/users/commons/_form_tab_images_account.html.twig' %}
        <div class="d-flex justify-content-between mt-2">
            <button type="button" class="btn btn-sm btn-secondary prev-tab"><i class="icon-arrow-left"></i> Précédent</button>
            
        </div>
    </div>
</div>

<div class="text-right mt-3">
    <button type="button" data-dismiss="modal" class="btn btn-sm btn-default">Annuler</button> &nbsp;
    <button type="submit" class="btn btn-sm btn-primary"><i class="icon-floppy-disk"></i> {{ button_label|default('Enregistrer') }}</button>
</div>
{{ form_end(form) }}

{# Script pour gérer la navigation entre tabs #}
<script>
    document.querySelectorAll('.next-tab').forEach(btn => {
        btn.addEventListener('click', () => {
            const activeTab = document.querySelector('.tab-pane.active');
            const nextTab = activeTab.nextElementSibling;
            if(nextTab){
                activeTab.classList.remove('show', 'active');
                nextTab.classList.add('show', 'active');
                const tabLink = document.querySelector(`a[href="#${nextTab.id}"]`);
                tabLink.classList.add('active');
                activeTab.previousElementSibling?.querySelector('a').classList.remove('active');
            }
        });
    });

    document.querySelectorAll('.prev-tab').forEach(btn => {
        btn.addEventListener('click', () => {
            const activeTab = document.querySelector('.tab-pane.active');
            const prevTab = activeTab.previousElementSibling;
            if(prevTab){
                activeTab.classList.remove('show', 'active');
                prevTab.classList.add('show', 'active');
                const tabLink = document.querySelector(`a[href="#${prevTab.id}"]`);
                tabLink.classList.add('active');
                activeTab.nextElementSibling?.querySelector('a').classList.remove('active');
            }
        });
    });
</script>
