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

{% block body %}
<div class="w-full flex flex-col min-h-full overflow-y-auto">
    <div class="flex flex-row justify-between items-center w-full p-3 border-b text-white bg-bungalow-yellow">
        <span class="text-white text-lg">
            <i class="{{ icon.get('user') }}" style="color: #FFFF;"></i>
            Mon compte
        </span>
    </div>

    <div class="p-4">
        {% include "./layouts/message_flash.html.twig" %}
    </div>

    <div class="h-full flex flex-col justify-between items-center">
        <div class="flex flex-col w-full text-2xl text-center justify-center">
            {% if not is_granted('ROLE_WIIFOR') %}
                <div class="mb-8">
                    <p class="underline text-bungalow-blue">Mon nom</p>
                    <p class="semibold">{{ user.nom }}</p>
                </div>
                <div class="mb-8">
                    <p class="underline text-bungalow-blue">Mon prénom</p>
                    <p class="semibold">{{ user.prenom }}</p>
                </div>
            {% endif %}
            <div class="mb-8">
                <p class="underline text-bungalow-blue">Mon adresse mail</p>
                <p class="semibold">{{ user.email }}</p>
            </div>
            {% if not is_granted('ROLE_REFERENT_FORMATION') %}
                <div class="mb-8">
                    <p class="underline text-bungalow-blue">Mon Poste</p>
                    <p class="semibold">{% if user.fonction %}{{ user.fonction }}{% endif %}</p>
                </div>
            {% endif %}
        </div>
        <a id="update-button" class="text-white m-5 w-fit bg-bungalow-yellow focus:outline-none focus:ring-4 focus:ring-green-300 font-medium rounded-full text-sm px-5 py-2.5 text-center cursor-pointer" data-infos-account="{{ user.toArray()|json_encode }}" data-modal-target="account">
            {% if not is_granted('ROLE_WIIFOR') %}
                Modifier mon compte
            {% else %}
                Modifier mon mot de passe
            {% endif %}
        </a>
    </div>
</div>
{% include "account/modal/account.html.twig" %}
{% endblock %}