{% extends "porto-corporate-layout.html.twig" %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('utilisateur-mon-compte-style') }}
{% endblock %}

{% block pageheader %}
    {{ parent() }}
{% endblock %}

{% block container_class %} container py-2 {% endblock %}

{% block pagecontent %}

    <div class="row justify-content-center">

        {% if app.user and app.user == user %}

            <div class="col-lg-3 mt-4 mt-lg-0">
            
                {% set lienActif = 'photo-profil' %}
                {% include "utilisateur/mon-compte-menu-gauche.include.html.twig" %}
            
            </div>

        {% endif %}

        <div class="col-lg-6">

            <div class="row">
                <div class="col-md-12">
                    {% for flashMessage in app.session.flashbag.get('error') %}
                        <div class="alert alert-danger alert-dismissible" >
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            {{ flashMessage|trans|raw }}
                        </div>
                    {% endfor %}
                    {% for flashMessage in app.session.flashbag.get('notice') %}
                        <div class="alert alert-success alert-dismissible" >
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            {{ flashMessage|trans|raw }}
                        </div>
                    {% endfor %}
                </div>
           </div>

            <div class="overflow-hidden mb-1">
                <h2 class="font-weight-normal text-7 mb-0">
                    {% if app.user == user %}
                        {{'Ma photo de profil'|trans}}
                    {% else %}
                        {{'Photo de profil de'|trans}} {{user.nom}} {{user.prenom}}
                    {% endif %}
                </h2>
            </div>

            <div class="overflow-hidden mt-3 mb-4 pb-3">
                {% if photoProfil is not null %}
                    <div class="row">
                        <div class="col-md-10 text-center">
                            <img src="data:image/png;base64, {{photoProfil}}" />
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-10 text-center">
                            <a
                                class="text-4 color-silver hover-grey"
                                href="{{path('attitudepatrimoine_utilisateur_photo_profil_suppression', {userId: user.id})}}"
                                onClick="return confirm('{{'Vous allez supprimer la photo de profil, continuer ?'|trans}}');"
                            >
                                <i class="fas fa-times-circle me-1"></i>{{'Supprimer'|trans}}
                            </a>
                        </div>
                    </div>
                {% else %}
                    {% if app.user == user %}
                        <p class="mb-0">{{'Vous n\'avez pas encore de photo de profil'|trans}}</p>
                    {% else %}
                        <p class="mb-0">{{'Photo de profil non enregistrée'|trans}}</p>
                    {% endif %}
                {% endif %}
            </div>

            <div class="overflow-hidden mb-1">
                <h2 class="font-weight-normal text-7 mb-0">
                    {% if app.user == user %}
                        {{'Créer/Modifier ma photo de profil'|trans}}
                    {% else %}
                        {{'Créer/Modifier la photo de profil'|trans}}
                    {% endif %}
                </h2>
            </div>

            <h4>{{'1. Télécharger une photo'|trans}}</h4>
            <div class="row mb-4">
                <div class="col-md-12">
                    <p class="color-777 font-italic mb-0">{{'Sélectionner un fichier sur votre ordinateur'|trans}}
                    <div class="demo-wrap upload-demo">
                        <div class="actions">
                            <a class="file-btn">
                                <input type="file" id="upload" value="{{'Choisir un fichier'|trans}}" accept="image/*">
                            </a>
                        </div>
                    </div>
                </div>
           </div>

            <h4 class="mb-3">{{'2. Ajuster le résultat'|trans}}</h4>
            <div class="row mb-2">
                <div class="col-md-12">
                    <div id="upload-demo"></div>
                </div>
           </div>

            <div class="row">
                <div class="col-md-12 text-center">
                    <button class="btn btn-client-primary-inverse  color-white hover-client upload-result p-3" onClick="enregistrerPhoto(userId);">
                        <h4 class="mb-0 color-inherit">
                            {% if app.user == user %}
                                {{'3. Enregistrer ma photo de profil'|trans}}
                            {% else %}
                                {{'3. Enregistrer la photo de profil'|trans}}
                            {% endif %}
                        </h4>
                    </button>
                </div>
           </div>

        </div>
    </div>


{% endblock %}

{% block javascript %}

    {{ parent() }}

    {{ encore_entry_script_tags('utilisateur-mon-compte-script') }}

    <script>

        var userId = {{user.id}};

        $(document).ready(function() {

        });

    </script>

{% endblock %}