{% extends "Includes/layout.html.twig" %}

{% block body %}
    <main id="userEdit" class="row main mx-0 fade-in" v-cloak>
        <section class="content-area p-r-l-6">
            <div class="cover-wrapper-overflow">
                <div class="col-12 py-5 px-5">
                    <div class="bg-white px-5 py-3 d-flex mb-2 justify-content-between mx-auto rounded-2" style="max-width: 650px;">
                        <div class="title my-auto">
                            <h6 class="font-700 text-primary mb-0"><i class="fal fa-user-alt mr-2"></i>{{ 'My account'|trans }}</h6>
                        </div>
                        <a href="{{ app.request.headers.get('referer') }}" class="btn btn-outline-primary px-5 py-2 rounded-30">{{ "Back"|trans }}</a>
                    </div>

                    <div class="form bg-white px-5 py-3 d-flex mb-2 justify-content-between mx-auto rounded-2" style="max-width: 650px;">
                        <div class="col-sm-12 py-4 px-0">
                            
                            <div class="col-12 mb-4">
                                <p class="text-primary font-700 mb-3">{{ 'Platform language'|trans }}</p>
                                
                                <div class="d-flex align-items-center" id="user-language">
                                    <a href="{{ path('user_locale_change', { 'locale': 'fr' }) }}"
                                       :class="[Translator.locale === 'fr' ? 'pointer-events-none' : '', 'text-decoration-none btn btn-sm btn-light d-flex align-items-center']"
                                    >
                                        <img src="{{ asset('Dashboard/img/fr.svg') }}" class="mr-2" alt="fr" height="20px" width="20px">
                                        {{ 'French'|trans }}
                                        <span v-if="Translator.locale === 'fr'" class="chips chips_green p-0 ml-2"><i class="fa fa-badge-check"></i></span>
                                    </a>
                                    <a href="{{ path('user_locale_change', { 'locale': 'en' }) }}"
                                       :class="[Translator.locale === 'en' ? 'pointer-events-none' : '', 'text-decoration-none btn btn-sm btn-light d-flex align-items-center ml-3']"
                                    >
                                        <img src="{{ asset('Dashboard/img/gb.svg') }}" class="mr-2" alt="gb" height="20px" width="20px">
                                        {{ 'English'|trans }}
                                        <span v-if="Translator.locale === 'en'" class="chips chips_green p-0 ml-2"><i class="fa fa-badge-check"></i></span>
                                    </a>
                                </div>
                            </div>
                            
                            <div class="col-12 mb-4">
                                <p class="text-primary font-700 mb-3">{{ 'Theme'|trans }}</p>
                                
                                <div class="d-flex align-items-center">
                                    <button type="button" :class="[!darkThemeSwitch ? 'pointer-events-none' : '', 'btn btn-sm btn-light mr-3 d-flex align-items-center']"
                                            @click="darkThemeSwitch = false">
                                        {{ 'Classic'|trans }}
                                        <span v-show="!darkThemeSwitch" class="chips chips_green p-0 ml-2"><i class="fa fa-badge-check"></i></span>
                                    </button>
                                    <button type="button" :class="[darkThemeSwitch ? 'pointer-events-none' : '', 'btn btn-sm btn-primary d-flex align-items-center']"
                                            @click="darkThemeSwitch = true">
                                        {{ 'Dark'|trans }}
                                        <span v-show="darkThemeSwitch" class="chips chips_green p-0 ml-2"><i class="fa fa-badge-check"></i></span>
                                    </button>
                                </div>
                            </div>
                            
                            {{ form_start(edit_acc, {'attr': {'class': 'form-horizontal'}}) }}

                            <div class="col-12">
    
                                {% for messages in app.flashes %}
                                    {% for message in messages %}
                                        <div class="alert alert-success text-center mb-5">{{ message|trans }}</div>
                                    {% endfor %}
                                {% endfor %}
                                
                                <p class="text-primary font-600 mb-3">{{ 'Reset your password'|trans }}</p>
                           
                                {# Password #}
                                <div class="form-group">
                                    {# Génération du label. #}
                                    {{ form_label(edit_acc.plainPassword.password, "Password", {'label_attr': {'class': 'col-12 px-0 font-size-12'}}) }}

                                    <div class="col-sm-12 px-0">
                                        {# Génération de l'input. #}
                                        {{ form_widget(edit_acc.plainPassword.password, {'attr': {'class': 'form-control col-12'}, 'required': ''}) }}
                                        <i class="fa-eye fal position-absolute span-icon py-0 cursor-pointer" id="remove-password-protect-recover" style="top: 10px; right: 10px;"></i>

                                        <div class="row text-danger mt-2">
                                            {# Affichage des erreurs pour ce champ précis. #}
                                            {{ form_errors(edit_acc.plainPassword.password, {'attr': {'class': 'text-danger'} }) }}
                                        </div>
                                    </div>
    
                                    <div class="col-sm-12 px-0 pt-4" id="password-contains" v-show="showPasswordContain">
                                        <span>{{ 'Your password must contains :'|trans }}</span>
                                        <ul class="list-unstyled mt-3 px-3">
                                            <li :class="{'text-success': inputPassword.length >= 8}" style="color: rgba(0, 0, 0, 0.5);"
                                                id="charLength">{{ 'At least 8 characters'|trans }}
                                                <i class="fa fa-check-circle text-success ml-4 position-relative" v-show="inputPassword.length >= 8"></i>
                                            </li>
                                            <li :class="{'text-success': regexLowercase.test(inputPassword)}" style="color: rgba(0, 0, 0, 0.5);"
                                                id="lowercase">{{ '1 lower letter'|trans }}
                                                <i class="fa fa-check-circle text-success ml-4 position-relative" v-show="regexLowercase.test(inputPassword)"></i>
                                            </li>
                                            <li :class="{'text-success': regexUppercase.test(inputPassword)}" style="color: rgba(0, 0, 0, 0.5);"
                                                id="uppercase">{{ '1 upper letter'|trans }}
                                                <i class="fa fa-check-circle text-success ml-4 position-relative" v-show="regexUppercase.test(inputPassword)"></i>
                                            </li>
                                            <li :class="{'text-success': regexSpecial.test(inputPassword)}" style="color: rgba(0, 0, 0, 0.5);"
                                                id="special">{{ '1 number or 1 special character'|trans }}
                                                <i class="fa fa-check-circle text-success ml-4 position-relative" v-show="regexSpecial.test(inputPassword)"></i>
                                            </li>
                                        </ul>
                                    </div>

                                    {{ form_label(edit_acc.plainPassword.confirm, "Confirm your password", {'label_attr': {'class': 'col-12 px-0 font-size-12 mt-3'}}) }}

                                    <div class="col-sm-12 px-0">
                                        {# Génération de l'input. #}
                                        {{ form_widget(edit_acc.plainPassword.confirm, {'attr': {'class': 'form-control col-12'}, 'required': ''}) }}
                                        <i class="fa-eye fal position-absolute span-icon py-0 cursor-pointer" id="remove-confirm-password-protect-recover" style="top: 10px; right: 10px;"></i>
                                        
                                        <div class="col-12 pl-0 mt-2" v-show="inputConfirmPassword.length > 0">
                                            <span id='message' class="text-danger" v-show="this.inputPassword !== this.inputConfirmPassword">{{ 'Passwords do not match'|trans }}</span>
                                            <span id='message' class="text-success" v-show="this.inputPassword === this.inputConfirmPassword">{{ 'Passwords match'|trans }}</span>
                                            <i id="icon-match" class="fa position-relative ml-4"
                                               :class="{'fa-check-circle': this.inputPassword === this.inputConfirmPassword,
                                                'text-success': this.inputPassword === this.inputConfirmPassword,
                                                'fa-times-circle': this.inputPassword !== this.inputConfirmPassword,
                                                'text-danger': this.inputPassword !== this.inputConfirmPassword}"></i>
                                        </div>
                                        
                                        <div class="row">
                                            {# Affichage des erreurs pour ce champ précis. #}
                                            {{ form_errors(edit_acc.plainPassword.confirm) }}
                                        </div>
                                    </div>
                                </div>

                                {# Pour le bouton, pas de label ni d'erreur, on affiche juste le widget #}
                                {{ form_widget(edit_acc.save, {'attr': {'class': 'btn btn-primary px-4 py-2 rounded-30 my-4 float-right'}}) }}

                                {# Génération automatique des champs pas encore écrits.
                                   Dans cet exemple, ce serait le champ CSRF (géré automatiquement par Symfony !)
                                   et tous les champs cachés (type « hidden »). #}
                                {{ form_rest(edit_acc) }}

                            </div>

                            {# Fermeture de la balise <form> du formulaire HTML #}
                            {{ form_end(edit_acc) }}
                        </div>
                    </div>
                    {% if is_granted('ROLE_BACKEND') %}
                        <div class="bg-white px-5 py-4 d-flex mb-2 justify-content-between mx-auto flex-column rounded-2" style="max-width: 650px;">
                            <div class="title mb-3 mr-auto">
                                <h6 class="font-700 text-primary">
                                    <i class="fal fa-ghost mr-2"></i>
                                    {{ 'Impersonate user'|trans }}
                                </h6>
                            </div>
                            <input-dropdown
                                id="user-selector"
                                :init-value="selectedUser"
                                :data-list="filteredList"
                                v-model="selectedUser"
                                props-displayed-value="username"
                                props-return-value="username"
                                ref="UserSelector"
                                @typing="filter"
                                :searchable="false"
                            >
                                <template v-slot:dropdown-header>
                                    <div class="row w-100 mx-0 mb-2 py-3 px-4" style="background-color: rgba(235, 239, 248, 0.55);margin-top: -1.5rem;">
                                        <div class="col-2 font-600">
                                            <b class="position-relative pr-4">ID</b>
                                        </div>
                                        <div class="col font-600">
                                            <b class="position-relative pr-4">Username</b>
                                        </div>
                                        <div class="col font-600 text-center">
                                            <b class="cursor-pointer">Email</b>
                                        </div>
                                        <div class="col font-600 text-center">
                                            <b class="cursor-pointer">Company</b>
                                        </div>
                                    </div>
                                </template>
                
                                <template v-slot:default="slotProps">
                                    <span class="row w-100 m-0 px-0 py-3">
                                        <span class="col-2 text-break">
                                            <% slotProps.listElement.id %>
                                        </span>
                                        <span class="col text-break">
                                            <% slotProps.listElement.username %>
                                        </span>
                                          <span class="col text-center text-break">
                                            <% slotProps.listElement.email %>
                                        </span>
                                          <span class="col text-center text-break">
                                            <% slotProps.listElement.company %>
                                        </span>
                                    </span>
                                </template>
                            </input-dropdown>
                            <a :class="{disabled: selectedUser === ''}" class="btn btn-primary px-4 py-2 rounded-30 mx-auto mt-3"
                               :href="redirectImpersonate">
                                {{ 'Impersonate'|trans }}
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </section>
        <span class="d-none invisible twig-data-users" data-users="{{ users|json_encode }}"></span>
        <span class="d-none invisible twig-data-redirect-impersonate" data-redirect-impersonate="{{ path('overview', {'_switch_user': ':user'}) }}"></span>
    </main>
    
{% endblock body %}

{% block specificJS %}
    {{ encore_entry_script_tags('user-edit-light') }}
{% endblock %}