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

{% block title %}Modifier son profil | {{ parent() }}{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/dynamicPicture.js') }}" defer></script>
{% endblock %}

{% block body %}
    <div class="max-w-xl mx-auto my-10 rounded-lg shadow-md p-5 text-light-primary dark:text-light-font dynamic-picture-container bg-light-card dark:bg-dark-card">
        <img src="{{ asset((user.profilePicture) ? 'uploads/' ~ user.profilePicture : 'profilDefault.png') | imagine_filter('profile') }}"
             class="w-56 h-56 rounded-full mx-auto" id="profilePicture"
             alt="Photo de profil de {{ user.pseudo }}">
        <p class="text-center my-2 text-2xl">@{{ user.pseudo }}</p>
        {{ form_start(form) }}
        <div class="my-2">
            <label for="UserSchool"
                   class="block overflow-hidden rounded-md border border-light-secondary/50 px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
                <span class="text-xs font-medium">Campus</span>
                {{ form_widget(form.site, { id:'UserSchool', attr: { class: 'mt-1 w-full border-none p-0 bg-transparent focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm'}}) }}
            </label>
        </div>
        <div class="my-2">
            <label for="firstname"
                   class="block overflow-hidden rounded-md border border-light-secondary/50 px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
                <span class="text-xs font-medium">Prénom</span>
                {{ form_widget(form.firstname, { id:'firstname', attr: { class: 'mt-1 w-full border-none p-0 bg-transparent focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm'}}) }}
            </label>
        </div>
        <div class="my-2">
            <label for="lastname"
                   class="block overflow-hidden rounded-md border border-light-secondary/50 px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
                <span class="text-xs font-medium">Nom</span>
                {{ form_widget(form.lastname, { id:'lastname', attr: { class: 'mt-1 w-full border-none p-0 bg-transparent focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm'}}) }}
            </label>
        </div>
        <div class="my-2">
            <label for="UserEmail"
                   class="block overflow-hidden rounded-md border border-light-secondary/50 px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
                <span class="text-xs font-medium">Email</span>
                {{ form_widget(form.email, { id:'UserEmail', attr: { class: 'mt-1 w-full border-none p-0 bg-transparent focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm'}}) }}
            </label>
        </div>
        <div class="my-2">
            <label for="UserTel"
                   class="block overflow-hidden rounded-md border border-light-secondary/50 px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
                <span class="text-xs font-medium">Téléphone</span>
                {{ form_widget(form.phone, { id:'UserTel', attr: { class: 'mt-1 w-full border-none p-0 bg-transparent focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm'}}) }}
            </label>
        </div>
        <div class="my-2">
            <div class="relative h-32 rounded-md border border-light-secondary/50 px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
                {{ form_widget(form.profilePicture, { id:'file-upload', attr: { class: 'hidden'}}) }}
                <label for="file-upload"
                       class="z-20 flex flex-col-reverse items-center justify-center w-full h-full cursor-pointer">
                    <p class="z-10 text-m font-light text-center text-light-primary dark:text-light-font">Glisser
                        déposer votre photo de profil</p>
                    <svg class="z-10 w-8 h-8 text-light-primary dark:text-dark-primary" fill="currentColor"
                         viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
                    </svg>
                </label>
            </div>
        </div>
        <div class="my-5 flex justify-center text-center">
            <button type="submit"
                    class="px-4 py-2 mx-4 text-white dark:text-light-font dark:hover:text-dark-primary uppercase bg-light-primary dark:bg-dark-primary border-2 border-transparent rounded-lg text-md hover:bg-light-secondary dark:hover:bg-dark-secondary">
                Valider
            </button>
        </div>
        {{ form_end(form) }}
    </div>
{% endblock %}