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

{% block body %}
    <div id="app-user-api" v-cloak>
        <main class="row main mx-0 fade-in">
            <section class="content-area p-r-l-6" >
                <div class="px-0 pb-2 container-fluid rounded-2 page-header">
                    <p class="text-primary">
                        {{ "List of API Accounts"|trans }}
                    </p>
                </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 mr-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 align-items-center d-inline-flex">
                            <div class="w-50 px-0">
                                <button class="btn btn-primary text-center rounded-30 py-2 mr-3 "
                                        @click="showUserDetails()">
                                    {{ 'Create a user'|trans }}
                            </div>
                            <div class="w-50 px-0">
                                <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 ml-auto">
                                        <span class="font-700">{{ 'Identifiant'|trans }}</span>
                                    </div>
                                    <div class="col-md-1 text-center ml-auto mr-auto">
                                        <span class="font-700">{{ 'Enabled'|trans }}</span>
                                    </div>
                                    <div class="col-md-1 text-center mr-auto">
                                        <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-'+ index">
                                <div class="col-12 row pr-0 content-line text-decoration-none justify-content-between">
                                    <div class="col-md-2 text-center ml-auto">
                                        <span class="m-auto"><% userAccount.name %></span>
                                    </div>
                                    <div class="col-md-1 d-flex justify-content-center align-items-center ml-auto mr-auto ">
                                            <span v-if="userAccount.active"
                                                  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 mr-auto">
                                        <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"
                                     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.name %></b></span>
                            </template>
                            <template v-else>
                                <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>
                        </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="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.name">
                                </div>
                            </div>
                        </div>

                        <div  v-if="user.id != null" class="col pl-4 mt-4 d-flex justify-content-between">
                            <div class="form-label-group position-relative input-login col">
                                <label for="clientId" class="labelInput focusInput font-500">
                                    {{ 'Client ID'|trans }}
                                </label>
                                <div class="input-group">
                                    <input type="text"
                                           id="clientId"
                                           name="_clientId"
                                           class="form-control no-placeholder"
                                           placeholder="{{ 'Client ID'|trans }}"
                                           v-model="user.clientId">
                                    <button class="btn btn-primary"
                                            @click="copyInput(user.clientId)">{{ 'Copy'|trans }}</button>
                                </div>
                            </div>
                            <div class="form-label-group position-relative input-login col">
                                <label for="clientIdSandbox" class="labelInput focusInput font-500">
                                    {{ 'Client ID Sandbox'|trans }}
                                </label>
                                <div class="input-group">
                                    <input type="text"
                                           id="clientIdSandbox"
                                           name="_clientIdSandbox"
                                           class="form-control no-placeholder"
                                           placeholder="{{ 'Client ID Sandbox'|trans }}"
                                           v-model="user.clientIdSandbox">
                                    <button class="btn btn-primary"
                                            @click="copyInput(user.clientIdSandbox)">{{ 'Copy'|trans }}</button>
                                </div>
                            </div>
                        </div>

                        <div  v-if="user.id != null" class="col pl-4 mt-4 d-flex justify-content-between">
                            <div class="form-label-group position-relative input-login col">
                                <label for="clientSecret" class="labelInput focusInput font-500">
                                    {{ 'Client Secret'|trans }}
                                </label>
                                <div class="input-group">
                                    <input type="text"
                                           id="clientSecret"
                                           name="_clientSecret"
                                           class="form-control no-placeholder"
                                           placeholder="{{ 'Client Secret'|trans }}"
                                           v-model="user.clientSecret">
                                    <button class="btn btn-primary"
                                            @click="copyInput(user.clientSecret)">{{ 'Copy'|trans }}</button>
                                </div>
                            </div>
                            <div class="form-label-group position-relative input-login col">
                                <label for="clientIdSandbox" class="labelInput focusInput font-500">
                                    {{ 'Client Secret Sandbox'|trans }}
                                </label>
                                <div class="input-group">
                                    <input type="text"
                                           id="clientSecretSandbox"
                                           name="_clientSecretSandbox"
                                           class="form-control no-placeholder"
                                           placeholder="{{ 'Client Secret Sandbox'|trans }}"
                                           v-model="user.clientSecretSandbox">
                                    <button class="btn btn-primary"
                                            @click="copyInput(user.clientSecretSandbox)">{{ 'Copy'|trans }}</button>
                                </div>
                            </div>
                        </div>

                        <div v-if="user.id != null" class="col pl-4 mt-4 d-flex justify-content-between">
                            <div class="form-label-group position-relative input-login col">
                                <label for="custom" class="labelInput focusInput font-500">
                                    {{ 'Custom'|trans }}
                                </label>
                                <div class="input-group">
                                    <textarea type="text"
                                           id="custom"
                                           name="_custom"
                                           class="form-group w-100 rounded-2 border custom-textarea"
                                              placeholder="{{ 'Custom'|trans }}" v-model="user.custom"></textarea>
                                </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.idAdvertiser"
                                                :id="'advertiser-dropdown'"
                                                :data-list="advertisers"
                                                :init-value="user.idAdvertiser"
                                                label="{{ 'Advertiser'|trans }}"
                                                placeholder="{{ 'Advertiser'|trans }}"></input-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">
                                <input-dropdown v-model="user.idPublisher"
                                                :id="'publisher-dropdown'"
                                                :data-list="publishers"
                                                :init-value="user.idPublisher"
                                                label="{{ 'Publisher'|trans }}"
                                                placeholder="{{ 'Publisher'|trans }}"></input-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.active"
                                    />
                            <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>

                            <div class="form-label-group position-relative input-login">
                                <button v-if="user.id != null" class="btn btn-primary rounded-30 mr-3 ml-3 px-3"
                                        @click="saveUser()">
                                    {{ 'Save'|trans }}
                                </button>
                                <button v-else class="btn btn-primary rounded-30 mr-3 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>s
        <span class="d-none invisible twig-data-path-ajax-filter-user-api-get"
              data-path-ajax-filter-user-api-get="{{ path('ajax_filter_user_api_get') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-user-api-details-get"
              data-path-ajax-user-api-details-get="{{ path('ajax_user_api_details_get', { id: ":id" }) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-new-user-api"
              data-path-ajax-new-user-api="{{ path('ajax_new_user_api') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-save-user-api"
              data-path-ajax-save-user-api="{{ path('ajax_save_user_api', { id: ":id" }) }}"></span>
    </div>

{% endblock %}

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