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

{% block body %}
    <div id="overview-app" v-cloak>
        <main class="row main mx-0 fade-in">

            <section class="content-area p-r-l-6">

                <!--############# FILTERS ###############-->
                <div class="px-3 py-4 rounded-2 bg-white position-relative row mx-0">
                    <div class="col-md-12 d-flex justify-content-between mb-2">
                        <h6 class="text-primary font-700">
                            {{ "Page filters"|trans }}
                        </h6>
                    </div>

                    <div class="col-md-7 d-flex flex-wrap align-items-center fade-in-02">
                        <input-dropdown
                                v-model="filterUserTeamName"
                                placeholder="{{ 'Chose a Team'|trans }}"
                                :data-list="userTeams"
                                :props-return-value="'name'"
                                id="teamSelector">
                        </input-dropdown>
                    </div>

                    <div class="col-md-5 d-flex flex-wrap align-items-center">
                        <button class="btn btn-primary text-white rounded-30 px-4 py-2 my-auto ml-auto"
                                @click="showUserDetails()">
                            {{ 'Create a user'|trans }}
                        </button>
                    </div>
                </div>

                {# PAGINATION #}

                <div class="col-12 main-data-table px-0 mt-4">
                    <div class="simple-data-headers bg-white py-3 rounded-2 mt-3 mb-2 row mx-0" id="pagination-top">
                        <div class="col-md-6 col-sm-12 text-left d-flex data-options align-items-center">
                            <div class="pagination pr-3 my-auto flex-wrap align-items-center">
                                <span class="mr-3">Page <b><% page %></b> {{ "page of"|trans }} <% nbrPages %></span>
                                <div class="fade-in-02 d-flex" v-if="nbrPages > 1">
                                    <i class="pr-2 fas fa-step-backward mr-2" :class="{disabled: page === 1 || loading}"
                                       @click="navigatePage('backward')"></i>
                                    <i class="pr-2 fal fa-chevron-left mr-2" :class="{disabled: page === 1 || loading}"
                                       @click="navigatePage('prev')"></i>
                                    <i class="pr-2 fal fa-chevron-right mr-2"
                                       :class="{disabled: page === nbrPages || loading}"
                                       @click="navigatePage('next')"></i>
                                    <i class="fas fa-step-forward" :class="{disabled: page === nbrPages || loading}"
                                       @click="navigatePage('forward')"></i>
                                </div>
                            </div>
                            <span class="mr-3">{{ "Rows by page"|trans }}:</span>
                            <input-dropdown v-model="pageLimit"
                                            :id="'pagination-page-limit'"
                                            :data-list="pageLimitOptions"
                                            :init-value="pageLimit"
                                            style="width: 100px">
                            </input-dropdown>
                            <p class="mb-0 ml-3">
                                <span>{{ "Total rows"|trans }}:</span>
                                <span class="chips chips_purple py-2"><% userList.length %></span>
                            </p>
                        </div>
                        <div class="col-md-6 section-search text-right mt-xs-3">
                            <div class="w-50 px-0 d-inline-block">
                                <div class="input-group">
                                    <input id="searchTable"
                                           type="search" class="form-control border"
                                           aria-controls="search-table"
                                           placeholder="{{ 'Search'|trans }}"
                                           v-model="filterUserData">
                                    <span class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button">
                                                <i class="fal fa-search"></i>
                                            </button>
                                        </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 main-data-table-content px-0 mt-4 mb-4">
                        <template>
                            {# data-table titles #}
                            <div class="main-data-table-line col-12 rounded-2 mt-2 py-4 sum-values"
                                 style="box-shadow: none; background-color: rgba(235, 239, 248, 0.55);transition: none">
                                <div class="col-12 row pr-0 justify-content-between">
                                    <div class="col-md-2 text-center">
                                        <span class="font-700">{{ 'Username'|trans }}</span>
                                    </div>
                                    <div class="col-md-2 text-center border-left">
                                        <span class="font-700">{{ 'Name'|trans }}</span>
                                    </div>
                                    <div class="col-md-3 text-center border-left">
                                        <span class="font-700">{{ 'Email'|trans }}</span>
                                    </div>
                                    <div class="col text-center border-left">
                                        <span class="font-700">{{ 'Company'|trans }}</span>
                                    </div>
                                    <div class="col text-center border-left">
                                        <span class="font-700">{{ 'Team'|trans }}</span>
                                    </div>
                                    <div class="col-md-1 text-center border-left">
                                        <span class="font-700">{{ 'Active'|trans }}</span>
                                    </div>
                                    <div class="col-md-1 text-center">
                                        <span class="font-700">{{ 'Action'|trans }}</span>
                                    </div>
                                </div>
                            </div>
                            {# data-table values #}
                            <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 line-animation"
                                 v-for="(userAccount, index) in userListPagination" :key="index"
                                 :id="'user-row-'+ user.id">
                                <div class="col-12 row pr-0 content-line text-decoration-none">
                                    <div class="col-md-2 text-center">
                                        <span class="m-auto"><% userAccount.username %></span>
                                    </div>
                                    <div class="col-md-2 text-center border-left">
                                        <span class="m-auto"><% userAccount.firstName %>&nbsp;<% userAccount.lastName %></span>
                                    </div>
                                    <div class="col-md-3 text-center border-left">
                                        <span class="m-auto"><% userAccount.email %></span>
                                    </div>
                                    <div class="col text-center border-left">
                                        <span class="my-auto"><% userAccount.company %></span>
                                    </div>
                                    <div class="col text-center border-left">
                                        <span class="my-auto"><% userAccount.teamName %></span>
                                    </div>
                                    <div class="col-md-1 d-flex justify-content-center align-items-center border-left">
                                            <span v-if="userAccount.enabled"
                                                  class="chips_green chips status-form my-auto">
                                                {{ "active"|trans }}
                                            </span>
                                        <span v-else class="chips_red chips status-form my-auto">
                                                {{ "inactive"|trans }}
                                            </span>
                                    </div>
                                    <div class="col-md-1 text-center">
                                        <div class="my-auto d-flex justify-content-around px-0 ml-auto">
                                            <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center"
                                                  data-tippy-content="{{ 'Modify user'|trans }}"
                                                  style="width: 30px; height: 30px"
                                                  @click="showUserDetails(userAccount.id)">
                                                <i class="fal fa-pen"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <!--############# BOTTOM PAGINATION ###############-->
                <div class="simple-data-headers bg-white py-3 rounded-2 row mx-0 my-4"
                     v-show="userList.length > 0 && nbrPages > 1">
                    <div class="col-md-6 col-sm-12 text-left d-flex data-options align-items-center">
                        <div class="pagination pr-3 my-auto flex-wrap align-items-center">
                            <span class="mr-3">Page <b><% page %></b> {{ "page of"|trans }} <% nbrPages %></span>
                            <div class="d-flex">
                                <i class="pr-2 fas fa-step-backward mr-2" :class="{disabled: page === 1 || loading}"
                                   @click="navigatePage('backward', true)"></i>
                                <i class="pr-2 fal fa-chevron-left mr-2" :class="{disabled: page === 1 || loading}"
                                   @click="navigatePage('prev', true)"></i>
                                <i class="pr-2 fal fa-chevron-right mr-2"
                                   :class="{disabled: page === nbrPages || loading}"
                                   @click="navigatePage('next', true)"></i>
                                <i class="fas fa-step-forward" :class="{disabled: page === nbrPages || loading}"
                                   @click="navigatePage('forward', true)"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        {# USER EDITION MODAL #}
        <transition name="slide-right">
            <div class="bg-white showUserDetails px-5 pt-4 pb-5 active" id="showCampaign"
                 v-if="showUserDetailsPanel">
                <div class="small-loader" style="display: none;"></div>
                <div class="cover-white bg-white h-100 w-100 position-fixed opacity-06"
                     style="z-index: 9998; display: none; overflow: unset;" id="cover-white"></div>
                <div class="w-100">
                    <div class="header d-flex flex-column pl-2 mb-5">
                        <div class="title mt-3">
                            <template v-if="user.id === null">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     width="21.429" height="15" viewBox="0 0 21.429 15">
                                    <path id="Icon_material-playlist-add"
                                          data-name="Icon material-playlist-add"
                                          d="M15.857,13.286H3v2.143H15.857Zm0-4.286H3v2.143H15.857Zm4.286,8.571V13.286H18v4.286H13.714v2.143H18V24h2.143V19.714h4.286V17.571ZM3,19.714h8.571V17.571H3Z"
                                          transform="translate(-3 -9)"
                                          fill="#1d446b"
                                          opacity="0.89"
                                    />
                                </svg>
                                <span class="ml-3 text-secondary">{{ 'New user'|trans }}</span>
                            </template>
                            <template v-else>
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     version="1.1"
                                     id="mdi-playlist-edit" width="21.429" height="22"
                                     viewBox="0 0 21.429 15">
                                    <path transform="translate(-3 -9)"
                                          fill="#1d446b"
                                          opacity="0.89"
                                          d="M2,6V8H14V6H2M2,10V12H14V10H2M20.04,10.13C19.9,10.13 19.76,10.19 19.65,10.3L18.65,11.3L20.7,13.35L21.7,12.35C21.92,12.14 21.92,11.79 21.7,11.58L20.42,10.3C20.31,10.19 20.18,10.13 20.04,10.13M18.07,11.88L12,17.94V20H14.06L20.12,13.93L18.07,11.88M2,14V16H10V14H2Z"/>
                                </svg>
                                <span class="ml-3 text-secondary">{{ 'Modify User'|trans }} : <b><% user.lastName %>&nbsp;<% user.firstName %></b></span>
                            </template>
                        </div>
                    </div>
                    <div class="body-form mt-2">
                        <div class="col pl-4 mt-4 d-flex justify-content-between">
                            <div class="form-label-group position-relative input-login col">
                                <label for="firstName"
                                       class="labelInput focusInput font-500">
                                    {{ 'First name'|trans }}
                                </label>
                                <div class="input-group">
                                    <input type="text"
                                           id="firstName"
                                           name="_firstName"
                                           class="form-control"
                                           placeholder="{{ 'First name'|trans }}" v-model="user.firstName">
                                </div>
                            </div>
                            <div class="form-label-group position-relative input-login col">
                                <label for="lastName"
                                       class="labelInput focusInput font-500">
                                    {{ 'Last name'|trans }}
                                </label>
                                <div class="input-group">
                                    <input type="text"
                                           id="lastName"
                                           name="_lastName"
                                           class="form-control"
                                           placeholder="{{ 'Last name'|trans }}" v-model="user.lastName">
                                </div>
                            </div>
                        </div>
                        <div class="col pl-4 mt-4 d-flex justify-content-between">
                            <div class="form-label-group position-relative input-login col">
                                <label for="username" class="labelInput focusInput font-500">
                                    {{ 'Username'|trans }}
                                </label>
                                <div class="input-group">
                                    <input type="text"
                                           id="username"
                                           name="_username"
                                           class="form-control no-placeholder"
                                           placeholder="{{ 'Username'|trans }}" v-model="user.username">
                                </div>
                            </div>
                            <div class="form-label-group position-relative input-login col">
                                <label for="email"
                                       class="labelInput focusInput font-500">
                                    {{ 'Email'|trans }}
                                </label>
                                <div class="input-group">
                                    <input type="text"
                                           id="email"
                                           name="_email"
                                           class="form-control no-placeholder"
                                           placeholder="{{ 'Email'|trans }}" v-model="user.email">
                                </div>
                            </div>
                        </div>
                        <div class="col pl-4 mt-4 d-flex justify-content-between">
                            <div class="form-label-group position-relative input-login col">
                                <input-dropdown
                                        v-model="user.userTeamId"
                                        label="{{ 'Team'|trans }}"
                                        :data-list="userTeams"
                                        :init-value="user.userTeamId"
                                        id="userTeamSelector"
                                >
                                </input-dropdown>
                            </div>
                            <div class="form-label-group position-relative input-login col">
                                <label for="company" class="labelInput focusInput font-500">
                                    {{ 'Company'|trans }}
                                </label>
                                <div class="input-group">
                                    <input type="text"
                                           id="company"
                                           name="_company"
                                           class="form-control no-placeholder"
                                           placeholder="{{ 'Company'|trans }}" v-model="user.company">
                                </div>
                            </div>
                        </div>
                        <div class="col pl-4 mt-4 d-flex justify-content-between">
                            <div class="form-label-group position-relative input-login col">
                                <input-dropdown
                                        v-model="user.lang"
                                        label="{{ 'Langue'|trans }}"
                                        :data-list="languages"
                                        :init-value="user.lang"
                                        :props-displayed-value="'name'"
                                        :props-return-value="'value'"
                                        id="userLanguageSelector"
                                >
                                </input-dropdown>
                            </div>
                            <div class="form-label-group position-relative input-login col">
                                <multi-select-dropdown
                                        v-model="user.roles"
                                        label="{{ 'Roles'|trans }}"
                                        :data="userRoles"
                                        :init-value="user.roles"
                                        id="userRolesSelector"
                                        label-key="name"
                                        input-value-text="Roles"
                                        :limit="20"
                                >
                                </multi-select-dropdown>
                            </div>
                        </div>
                        <div class="col pl-4 mt-4 d-flex justify-content-between">
                            <div class="form-label-group position-relative input-login col">
                                <div class="mb-3">
                                    <span v-for="(advertiser, i) in user.advertisers"
                                          class="tag-rule rounded-30 label label-default pl-2 pr-1 chips chips_purple py-2 border mr-1 mb-1 d-inline-block"
                                          :key="i">
                                        <span><% advertiser.name %></span>
                                        <span class="mr-1 ml-1 cursor-pointer" @click="removeAdvertiser(i)"><i
                                                    class="fa fa-times-circle"></i></span>
                                    </span>
                                </div>
                                <input-dropdown @input="addAdvertiser"
                                                :placeholder="'{{ 'Advertisers'|trans }}'"
                                                label="{{ 'Advertisers'|trans }}"
                                                :data-list="advertisers" id="_advertisers"
                                                :return-raw-option="true"
                                                :remove-on-input="true"
                                ></input-dropdown>
                            </div>
                        </div>
                        <div class="col pl-4 mt-4 d-flex justify-content-between" v-if="user.id != null">
                            <div class="form-label-group position-relative input-login col">
                                <input-dropdown
                                        v-model="user.custom.campaignFilters.filter"
                                        :init-value="user.custom.campaignFilters.filter"
                                        placeholder="{{ 'Filter Campaign'|trans }}"
                                        label="{{ 'Filter Campaign'|trans }}"
                                        :props-return-value="'name'"
                                        :data-list="filtersCampaign.filterType"
                                        id="campaignFilterType">
                                </input-dropdown>
                            </div>
                            <div class="form-label-group position-relative input-login col"
                                 v-if="user.custom.campaignFilters.filter">
                                <multi-select-dropdown
                                        v-model="user.custom.campaignFilters.refUnique"
                                        :init-value="user.custom.campaignFilters.refUnique"
                                        placeholder="{{ 'Ref Uniques'|trans }}"
                                        label="{{ 'Select Ref to filter'|trans }}"
                                        input-value-text="Ref Uniques"
                                        :is-raw-value="true"
                                        :data="filtersCampaign.refUniques"
                                        id="campaignFilterRefUniques">
                                </multi-select-dropdown>
                            </div>
                        </div>
                        <div class="col pl-4 mt-4 d-flex justify-content-between">
                            <input class="inp-cbx" id="activeUser" type="checkbox"
                                   style="display: none;"
                                   v-model="user.enabled"/>
                            <label class="cbx d-flex align-items-center ml-4 w-fit-content" for="activeUser">
                                <span class="bg-white mr-2">
                                    <svg width="10px" height="10px" viewbox="0 0 10 10">
                                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                    </svg>
                                </span>
                                <span>
                                    {{ 'Enabled'|trans }}
                                </span>
                            </label>
                            <input class="inp-cbx" id="internUser" type="checkbox"
                                   style="display: none;"
                                   v-model="user.intern"/>
                            <label class="cbx d-flex align-items-center ml-4 w-fit-content" for="internUser">
                                <span class="bg-white mr-2">
                                    <svg width="10px" height="10px" viewbox="0 0 10 10">
                                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                    </svg>
                                </span>
                                <span>
                                    {{ 'Golbenbees User'|trans }}
                                </span>
                            </label>
                        </div>
                        <div class="col pl-4 mt-4 d-flex justify-content-between">
                            <div class="form-label-group position-relative input-login">
                                <button v-if="user.id != null" class="btn btn-primary rounded-30 ml-3 px-3"
                                        @click="getPasswordRecoveryLink(user.id)">
                                    {{ 'Send Recovery Link'|trans }}
                                </button>
                            </div>
                            <div class="form-label-group position-relative input-login">
                                <button v-if="user.id != null" class="btn btn-primary rounded-30 ml-3 px-3"
                                        @click="saveUser()" :disabled="userString === userAsString">
                                    {{ 'Save'|trans }}
                                </button>
                                <button v-else class="btn btn-primary rounded-30 ml-3 px-3" @click="newUser()">
                                    {{ 'Create'|trans }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>

        <div :class="[showUserDetailsPanel ? 'show' : '', 'modal-backdrop']" style="visibility: visible !important;"
             id="modal-backdrop" ref="modalBackdrop" v-show="showUserDetailsPanel"></div>
        <span class="d-none invisible twig-data-path-ajax-filter-user-get"
              data-path-ajax-filter-user-get="{{ path('ajax_filter_user_get') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-user-details-get"
              data-path-ajax-user-details-get="{{ path('ajax_user_details_get', { id: ":id" }) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-user-save"
              data-path-ajax-user-save="{{ path('ajax_user_save', { id: ":id" }) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-user-new"
              data-path-ajax-user-new="{{ path('ajax_user_new') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-user-recovery-link"
              data-path-ajax-user-recovery-link="{{ path('ajax_get_recovery_password_link') }}"></span>
        <span class="d-none invisible twig-data-user-teams" data-user-teams="{{ userTeams }}"></span>
        <span class="d-none invisible twig-data-user-default" data-user-default="{{ userDefault }}"></span>
        <span class="d-none invisible twig-data-user-roles" data-user-roles="{{ userRoles|json_encode }}"></span>
        <span class="d-none invisible twig-data-advertisers" data-advertisers="{{ advertisers }}"></span>
    </div>

{% endblock %}

{% block specificJS %}
    {{ encore_entry_script_tags('admin-user-index') }}
{% endblock %}