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

{% block title %}Accueil | {{ parent() }}{% endblock %}

{% block body %}
    <div class="min-h-screen bg-bg-primaire py-8 w-full font-sora">

        {{ form_start(form, {'attr': {'class': 'max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-3 gap-8'}}) }}

        {# TODO: voir si c'est pertinent avec l'API et s'il y a l'utilité d'une photo de profil #}
         {# Gestion de la colone avec le choix de la photo de profil #}
        <div class="flex flex-col text-text items-center">

             {# Affichage de la photo de profil #}
            <div class="w-full md:w-64 flex-shrink-0 mt-20">
                <div class="border-2 border-black p-1 bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
                    {% if userData.photo %}
                        <img src="{{ asset('uploads/images/' ~ userData.photo) }}"
                             alt="Photo de profil"
                             class="w-full aspect-[4/3] object-cover">
                    {% else %}
                        <div class="w-full aspect-[4/3] bg-gray-50 flex items-center justify-center text-6xl">
                            👤
                        </div>
                    {% endif %}
                </div>
            </div>

            <p class="text-2xl text-title font-caveat mt-4"> Ma photo</p>

             {# Gestion du dépôt d'un fichier image #}
            <div class="w-full mt-2">
                {{ form_label(form.image, 'Choisir un fichier', {
                    'label_attr': {'class': 'block mb-2.5 text-sm font-medium text-gris-fonce'}
                }) }}
                {{ form_widget(form.image, {
                    'attr': {
                        'class': 'cursor-pointer bg-white border border-gris-clair text-text text-sm rounded-lg focus:outline-none focus:ring-1 focus:ring-bouton focus:border-bouton block w-full shadow-sm placeholder-gris-moyen file:mr-4 file:py-2.5 file:px-4 file:border-0 file:border-r file:border-gris-clair file:bg-gris-clair file:text-gris-fonce hover:file:bg-gris-moyen file:cursor-pointer transition-colors',
                        'aria-describedby': 'file_input_help'
                    }
                }) }}
                <p class="mt-1 text-sm text-gris-moyen" id="file_input_help">
                    JPG, JPEG ou PNG (Taille max : 2Mo).
                </p>
            </div>
        </div>

        {# Gestion de la colonne avec les "infos persos" #}
        <div class="md:col-span-2">
            <h1 class="text-4xl font-caveat text-text mb-6 text-center sm:text-center">Mon profil</h1>
            <h2 class="text-2xl font-caveat text-text mb-6 text-center sm:text-center">Mes informations personnelles</h2>

            {# Gestion du formulaire qui regroupe toutes les infos perso #}
            <div class="flex flex-col gap-6">

                {# Champ NOM et Prénom #}
                <div class="grid grid-cols-2 gap-4">
                    <div class="space-y-1">
                        {{ form_label(form.firstName, 'NOM :', {
                            'label_attr': {'class': 'block text-sm font-semibold text-text'}
                        }) }}
                        {{ form_widget(form.firstName, {
                            'attr': {'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}
                        }) }}
                        {# Implémentation d'un message d'errer en cas de problème #}
                        <div class="text-red-500 text-xs mt-1 italic font-sora">
                            {{ form_errors(form.firstName) }}
                        </div>
                    </div>

                    <div class="space-y-1">
                        {{ form_label(form.lastName, 'Prénom :', {
                            'label_attr': {'class': 'block text-sm font-semibold text-text'}
                        }) }}
                        {{ form_widget(form.lastName, {
                            'attr': {'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}
                        }) }}
                        {# Implémentation d'un message d'errer en cas de problème #}
                        <div class="text-red-500 text-xs mt-1 italic font-sora">
                            {{ form_errors(form.lastName) }}
                        </div>
                    </div>
                </div>

                {# Champ Téléphone #}
                <div class="space-y-1">
                    {{ form_label(form.telephone, 'Numéro de téléphone', {
                        'label_attr': {'class': 'block text-sm font-semibold text-text'}
                    }) }}
                    {{ form_widget(form.telephone) }}
                    {# Implémentation d'un message d'errer en cas de problème #}
                    <div class="text-red-500 text-xs mt-1 italic">
                        {{ form_errors(form.telephone) }}
                    </div>
                </div>

                {# Champ E-mail #}
                <div class="space-y-1">
                    {{ form_label(form.email, 'E-mail :', {
                        'label_attr': {'class': 'block text-sm font-semibold text-text'}
                    }) }}
                    {{ form_widget(form.email, {
                        'attr': {'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}
                    }) }}
                    {# Implémentation d'un message d'errer en cas de problème #}
                    <div class="text-red-500 text-xs mt-1 italic font-sora">
                        {{ form_errors(form.email) }}
                    </div>
                </div>

                {# Champ E-mail de secours #}
                <div class="space-y-1">
                    {{ form_label(form.alternateEmail, 'E-mail de secours :', {
                        'label_attr': {'class': 'block text-sm font-semibold text-text'}
                    }) }}
                    {{ form_widget(form.alternateEmail, {
                        'attr': {'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}
                    }) }}
                    {# Implémentation d'un message d'errer en cas de problème #}
                    <div class="text-red-500 text-xs mt-1 italic font-sora">
                        {{ form_errors(form.alternateEmail) }}
                    </div>
                </div>

                <div class="flex flex-col sm:flex-row gap-4 pt-2">
                    <button type="submit"
                            class="flex-1 py-3 bg-bouton hover:bg-bouton-hover text-text font-bold rounded-lg shadow transition-colors">
                        Valider
                    </button>
                </div>
            </div>
        </div>
        {{ form_end(form) }}
    </div>
{% endblock %}