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

{% block title %}Gestion User{% endblock %}

{% block body %}
    <style>
        body {
            width: 100%;
            height: 100%;
        }

        /* Style pour chaque élément d'information de l'utilisateur */
        .user-info-item {
            display: flex;
            padding: 10px 0;
            border-bottom: 1px solid #e0e0e0;
        }

        /* Dernier élément sans bordure */
        .user-info-item:last-child {
            border-bottom: none;
        }

        /* Style pour le label de chaque information (Nom, Prénom, etc.) */
        .user-info-label {
            font-weight: bold;
            color: #333;
            width: 7%;
        }

        /* Style pour la valeur de chaque information (la donnée de l'utilisateur) */
        .user-info-value {
            color: #555;
            text-align: left;
            width: 65%;
            word-wrap: break-word; /* Gère les débordements */
        }

        .password {
            display: flex;
            flex-direction: column;
            width: 100%;
            text-align: left;
        }

        /* Ajout d'un style pour rendre responsive */
        @media (max-width: 600px) {
            #InformationUser {
                padding: 15px;
            }

            .user-info-item {
                flex-direction: column;
                padding: 8px 0;
            }

            .user-info-label, .user-info-value {
                width: 100%;
            }
        }


    </style>


    <p>Test</p>

{#    {{ form_start(form) }}#}
{#    <div>        #}
{#        {{ form_row(form.UserIdentifier) }}#}
{#        {{ form_row(form.Password) }}#}
{#        {{ form_row(form.Nom) }}#}
{#        {{ form_row(form.Prenom) }}#}
{#        {{ form_row(form.Roles) }}#}
{#    </div>#}
{#    {{ form_end(form) }}#}

{#    <form id="UpdateUser" action="{{ path('update-user', { 'id': app.user.id }) }}" method="post">#}
{#        <div id="InformationUser">#}
{#            <div class="user-info-item">#}
{#                <span class="user-info-label">Nom :</span>#}
{#                <span class="user-info-value">{{ app.user.nom }}</span>#}
{#                <input type="text" id="nom" name="nom" value="{{ app.user.nom }}" class="user-info-input">#}
{#            </div>#}
{#            <div class="user-info-item">#}
{#                <span class="user-info-label">Prénom :</span>#}
{#                <span class="user-info-value">{{ app.user.prenom }}</span>#}
{#                <input type="text" id="prenom" name="prenom" value="{{ app.user.prenom }}" class="user-info-input">#}
{#            </div>#}
{#            <div class="user-info-item">#}
{#                <span class="user-info-label">Email :</span>#}
{#                <span class="user-info-value">{{ app.user.userIdentifier }}</span>#}
{#                <input type="text" id="email" name="email" value="{{ app.user.userIdentifier }}" class="user-info-input">#}
{#            </div>#}
{#            <div class="user-info-item">#}
{#                <div id="passwordConfirmDiv" class="password-confirm-div">#}
{#                    <label for="confirm_password" class="user-info-label">Confirmer ou modifier le mot de passe :</label>#}
{#                    <input type="password" id="confirm_password" name="confirm_password" class="user-info-input" placeholder="Mot de passe">#}
{#                </div>#}
{#            </div>#}
{#            <div class="user-info-item">#}
{#                <span class="user-info-label">Roles :</span>#}
{#                <span class="user-info-value">{{ app.user.getRolesAsString() }}</span>#}
{#                <input type="checkbox" id="roles" name="roles" value="{{ app.user.getRolesAsString() }}" class="user-info-input" readonly>#}
{#            </div>#}

{#            <div class="btn">#}
{#                <button type="submit" class="submit-button">Mettre à jour</button>#}
{#            </div>#}
{#        </div>#}
{#    </form>#}

{% endblock %}