<div id="compteModal" class="modal" tabindex="-1" aria-labelledby="compteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <span class="close" data-modal="compteModal">&times;</span>
            <h2 class="modal-header" id="compteModalLabel">Gestion Compte</h2>
            <div class="modal-body">
                <!-- Contenu de la modal Gestion Utilisateur -->
                <div id="InformationUser">
                    <div id="NomUser">
                        <span>Nom : {{ app.user.nom }}</span>
                    </div>
                    <div id="NomUser">
                        <span>Prenom : {{ app.user.prenom }}</span>
                    </div>
                    <div id="NomUser">
                        <span>Email : {{ app.user.userIdentifier }}</span>
                    </div>
                    <div id="NomUser">
                        <span>Roles : {{ app.user.getRolesAsString() }}</span>
                    </div>
                    <div class="btn-custom icon-container" data-bs-toggle="modal" data-bs-target="#modifModal">
                        <i class="icon-medium"> {{ ux_icon('fluent-emoji-high-contrast:ten-oclock') }}</i>
                        <span>Modifier</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Modification des Informations Utilisateur -->
<div id="modifModal" class="modal" tabindex="-1" aria-labelledby="modifModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modifModalLabel">Modifier Informations Utilisateur</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="newEmail" class="form-label">Nouvel Email</label>
                        <input type="email" class="form-control" id="newEmail" placeholder="Entrez votre nouvel email">
                    </div>
                    <div class="mb-3">
                        <label for="newNom" class="form-label">Nouveau Nom</label>
                        <input type="text" class="form-control" id="newNom" placeholder="Entrez votre nouveau nom">
                    </div>
                    <div class="mb-3">
                        <label for="newPrenom" class="form-label">Nouveau Prenom</label>
                        <input type="text" class="form-control" id="newPrenom" placeholder="Entrez votre nouveau prenom">
                    </div>
                    <button type="submit" class="btn btn-primary">Confirmer</button>
                </form>
            </div>
        </div>
    </div>
</div>
