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

{% block body %}
    <div id="vue_app_publisher" v-cloak>
        <main class="row main mx-0 fade-in">
            <section class="content-area p-r-l-6">
                <!--############# FILTERS ###############-->
                <div class="bg-white px-2 pt-4 pb-2">
                    <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-12 d-flex justify-content-between mb-3">
                        <div class="col-md-2 align-items-center">
                            <label for="modelSelector"
                                   class="labelInput focusInput font-500">
                                {{ 'Publisher model'|trans }}
                            </label>
                            <input-dropdown
                                    v-model.lazy="filterPublisherModel"
                                    placeholder="{{ 'Chose a model'|trans }}"
                                    :data-list="publisherModels"
                                    :props-return-value="'value'"
                                    :init-value="filterPublisherModel"
                                    id="modelSelector">
                            </input-dropdown>
                        </div>
                        <div class="col-md-2 align-items-center">
                            <label for="feedLevel"
                                   class="labelInput focusInput font-500">
                                {{ 'Feed level'|trans }}
                            </label>
                            <input-dropdown
                                    v-model.lazy="filterPublisherFeedLevel"
                                    placeholder="{{ 'Chose feed level'|trans }}"
                                    :data-list="publisherFeedLevel"
                                    :props-return-value="'value'"
                                    :init-value="filterPublisherFeedLevel"
                                    id="feedLevel">
                            </input-dropdown>
                        </div>
                        <div class="col-md-2 align-items-center">
                            <label for="smartApply"
                                   class="labelInput focusInput font-500">
                                {{ 'Smart apply'|trans }}
                            </label>
                            <input-dropdown
                                    v-model.lazy="filterPublisherSmartApplies"
                                    placeholder="{{ 'Show smart applies'|trans }}"
                                    :data-list="publisherBooleanList"
                                    :props-return-value="'value'"
                                    :init-value="filterPublisherSmartApplies"
                                    id="smartApply">
                            </input-dropdown>
                        </div>
                        <div class="col-md-2 align-items-center">
                            <label for="smartQuestions"
                                   class="labelInput focusInput font-500">
                                {{ 'Smart apply question'|trans }}
                            </label>
                            <input-dropdown
                                    v-model.lazy="filterPublisherSmartQuestion"
                                    placeholder="{{ 'Show smart applies questions'|trans }}"
                                    :data-list="publisherBooleanList"
                                    :props-return-value="'value'"
                                    :init-value="filterPublisherSmartQuestion"
                                    id="smartQuestions">
                            </input-dropdown>
                        </div>
                        <div class="col-md-2 align-items-center">
                            <label for="postback"
                                   class="labelInput focusInput font-500">
                                {{ 'Postback'|trans }}
                            </label>
                            <input-dropdown
                                    v-model.lazy="filterPublisherPostback"
                                    placeholder="{{ 'Show postback'|trans }}"
                                    :data-list="publisherBooleanList"
                                    :props-return-value="'value'"
                                    :init-value="filterPublisherPostback"
                                    id="postback">
                            </input-dropdown>
                        </div>
                        <div class="col-md-2 align-items-center">
                            <label for="isActive"
                                   class="labelInput focusInput font-500">
                                {{ 'Active'|trans }}
                            </label>
                            <input-dropdown
                                    v-model.lazy="filterPublisherActive"
                                    placeholder="{{ 'Show active or inactive'|trans }}"
                                    :data-list="publisherBooleanList"
                                    :props-return-value="'value'"
                                    :init-value="filterPublisherActive"
                                    id="isActive">
                            </input-dropdown>
                        </div>
                    </div>
                    <div class="col-md-12 d-flex justify-content-between mb-3">
                        <div class="col-md-2">
                            <label for="aggregatorType"
                                   class="labelInput focusInput font-500">
                                {{ 'Aggregator Type'|trans }}
                            </label>
                            <input-dropdown
                                    v-model.lazy="filterPublisherPlatformType"
                                    placeholder="{{ 'Chose an aggregator type'|trans }}"
                                    :data-list="publisherPlatformType"
                                    :props-return-value="'value'"
                                    :init-value="filterPublisherPlatformType"
                                    id="aggregatorType">
                            </input-dropdown>
                        </div>


                        <div class="mt-4 py-2 ml-auto">
                            <button class="btn btn-primary text-white rounded-30"
                                    @click="resetFilters()">
                                {{ 'Reset Filters'|trans }}
                            </button>
                            <button class="btn btn-primary text-white rounded-30"
                                    @click="showPublisherDetails()">
                                {{ 'Create a publisher'|trans }}
                            </button>
                        </div>
                    </div>
                </div>

                <div class="col-12 main-data-table px-0 mt-4">
                    {# PAGINATION #}
                    <div class="simple-data-headers bg-white py-3 rounded-2 my-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"><% publisherList?.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="filterPublisherData">
                                    <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 my-4">
                        {# 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 mx-0 pr-0 pl-0 justify-content-between">
                                <div class="col-3 col-lg-2 my-auto">
                                    <span class="position-absolute">#</span>
                                    <span class="font-700 ml-5">{{ 'Publisher'|trans }}</span>
                                </div>
                                <div class="col-1 text-center border-left my-auto">
                                    <span class="font-700">{{ 'Status'|trans }}</span>
                                </div>
                                <div class="col-1 text-center border-left my-auto">
                                    <span class="font-700">{{ 'Type'|trans }}</span>
                                </div>
                                <div class="col-1 text-center border-left my-auto">
                                    <span class="font-700">{{ 'Bid Model'|trans }}</span>
                                </div>
                                <div class="col-1 text-center border-left my-auto">
                                    <span class="font-700">{{ 'Smart Applies'|trans }}</span>
                                </div>
                                <div class="col-1 text-center border-left my-auto">
                                    <span class="font-700">{{ 'Custom questions'|trans }}</span>
                                </div>
                                <div class="col-1 text-center border-left my-auto">
                                    <span class="font-700">{{ 'Feed Level'|trans }}</span>
                                </div>
                                <div class="col-1 text-center border-left my-auto">
                                    <span class="font-700">{{ 'Postback'|trans }}</span>
                                </div>
                                <div class="col-2 text-center border-left my-auto pr-0">
                                    <span class="font-700 mr-3">{{ '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 no-scale"
                             v-for="(publisher, index) in publisherListPagination" :key="publisher.id" :id="'publisher-row-'+ publisher.id">
                            <div class="col-12 row mx-0 pr-0 pl-0 justify-content-between main-line-content text-decoration-none flex-nowrap">
                                <div class="col-3 col-lg-2 align-items-center my-auto d-flex">
                                    <span class="position-absolute"><% publisher.id %></span>
                                    <img :src="publisher.logo" class="img-thumbnail rounded-circle mr-2 ml-5" :alt="publisher.name+'_logo'"
                                         style="height: 40px; width: 40px;"/>
                                    <span class="text-truncate text-nowrap"><% publisher.name %></span>
                                    <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center"
                                                 :data-tippy-content="publisher.feedRefresh"
                                                 v-if="publisher.feedRefresh"
                                                 data-tippy-placement="right"
                                                 style="width: 30px; height: 30px">
                                        <i class="fal fa-clock"></i>
                                    </span>
                                    <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center"
                                          :data-tippy-content="publisher.comments"
                                          data-tippy-placement="right"
                                          data-tippy-options='{ "whiteSpace": "pre-line" }'
                                          style="width: 30px; height: 30px"
                                          v-if="publisher.comments">
                                        <i class="fal fa-info-circle"></i>
                                    </span>
                                </div>
                                <div class="col-1 d-flex justify-content-center align-items-center border-left my-auto">
                                    <span v-if="publisher.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-1 d-flex justify-content-center align-items-center border-left my-auto">
                                    <span v-if="publisher.typePlatform === 'aggregator'">
                                        {{ "Agrégateur"|trans }}
                                    </span>
                                    <span v-if="publisher.typePlatform === 'jobboard'">
                                        {{ "Job Board"|trans }}
                                    </span>
                                    <span v-if="publisher.typePlatform === 'display'">
                                        {{ "Display"|trans }}
                                    </span>
                                </div>
                                <div class="col-1 d-flex justify-content-center align-items-center border-left my-auto">
                                    <span v-if="publisher.type == 'ppc_campaigns' && !publisher.feedAcceptOrganic">
                                        {{ "CPC fixe"|trans }}
                                    </span>
                                    <span v-if="publisher.type == 'ppc_campaigns' && publisher.feedAcceptOrganic">
                                        {{ "Organic"|trans }}
                                    </span>
                                    <span v-if="publisher.type == 'ppa_campaigns'">
                                        {{ "CPA"|trans }}
                                    </span>
                                </div>
                                <div class="col-1 d-flex justify-content-center align-items-center border-left my-auto">
                                    <span v-if="publisher.smartApply"
                                          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-1 d-flex justify-content-center align-items-center border-left my-auto">
                                    <span v-if="publisher.smartApplyQuestion"
                                          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-1 d-flex justify-content-center align-items-center border-left my-auto">
                                    <span class="m-auto"><% capitalize(publisher.feedLevel) %></span>
                                </div>
                                <div class="col-1 d-flex justify-content-center align-items-center border-left my-auto">
                                    <span v-if="publisher.s2sActive"
                                          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-2 d-flex justify-content-center align-items-center border-left my-auto">#}
{#                                    <apply-scoring :id="'appliesScoring_'+publisher.id"#}
{#                                                   :score="publisher.appliesScoring"#}
{#                                                   :distributed-score="publisher.distributedAppliesScoring"#}
{#                                                   :key="publisher.id"#}
{#                                    ></apply-scoring>#}
{#                                </div>#}
                                <div class="col-2 d-flex justify-content-end pr-0 flex-wrap my-auto border-left">
                                    <button type="button" class="button slider-icon bg-transparent"
                                            :data-tippy-content="Translator.trans('Show history')"
                                            data-tippy-placement="right"
                                            @click.prevent="showCustomHistory(publisher.id, publisher.name)">
                                        <i class="fal fa-history"></i>
                                    </button>
                                    <button-multiple :content-position="'left'">
                                        <template v-slot:main-btn>
                                                      <span class="button slider-icon bg-transparent ml-2">
                                                        <i class="custom-icon icon-gitlab"></i>
                                                      </span>
                                            <span :class="[publisher?.tasks?.length > 0 ? 'badge-sonar badge-sonar-warning-gitlab' : 'd-none']" id="sonar-oi-alert"><% publisher.tasks.length %></span>
                                        </template>
                                        <template v-slot:extra-btn>
                                            <button type="button" class="btn btn-primary px-4 mt-1"
                                                    @click="openTaskListPanel(publisher.id)">
                                                <i class="fal fa-list"></i> {{ 'Show tasks'|trans }}
                                            </button>
                                            <button type="button" class="btn btn-primary px-4 mt-1"
                                                    @click="openNewTaskForm(publisher.id)">
                                                <i class="fal fa-plus-circle"></i> {{ 'Add a task'|trans }}
                                            </button>
                                        </template>
                                    </button-multiple>
                                    <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center mr-1"
                                          data-tippy-content="{{ 'Modify Publisher'|trans }}"
                                          style="width: 30px; height: 30px"
                                          @click="showPublisherDetails(publisher.id)">
                                        <i class="fal fa-pen"></i>
                                    </span>
                                    <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center mr-1"
                                          data-tippy-content="{{ 'Show stats details'|trans }}"
                                          style="width: 30px; height: 30px" data-toggle="modal"
                                          data-target="#publisherStats"
                                          @click="loadPublisherStats(publisher.id, false, true)">
                                            <i class="fal fa-eye"></i>
                                    </span>
                                    <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center mr-1"
                                          data-tippy-content="{{ 'Copy Master Link'|trans }}"
                                          style="width: 30px; height: 30px"
                                          @click="getMasterLink(publisher.formatLabel)"
                                          v-if="publisher.feedLevel == 'master'">
                                        <i class="fal fa-clipboard-user"></i>
                                    </span>
                                    <span class="slider-icon"
                                          @click="sliderFunction(publisher.id)" :id="'id-' + publisher.id">
                                        <i class="far fa-angle-down" data-tippy-content="{{ 'See more'|trans }}"></i>
                                    </span>
                                </div>
                            </div>

                            {# ##################### INNER DATA-TABLE ROW ##################### #}
                            <div :class="['hide-infos-publisher pt-3 border-top mt-4 mx-4 px-0', 'div-' + publisher.id]" style="display: none;" :data-id="publisher.id">
                                <div class="col-sm-12 d-flex mt-3 publisher-details" style="height: 21rem">
                                    <div class="col-md-2 px-0 d-flex flex-column justify-content-center">
                                        <p class="position-absolute top-0 d-block font-600 text-center">{{ 'Informations'|trans }}</p>
                                        <div class="mb-1 d-flex align-items-end w-75">
                                            {{ 'Total Campaigns'|trans }}:
                                            <b class="ml-auto"><% publisherStats?.campaignList?.length %></b>
                                        </div>
                                        <div class="mb-1 d-flex align-items-end w-75">{{ "Total Jobs"|trans }}:
                                            <b class="ml-auto"><% numberFormat(globalStats.nbJobsActive) %></b>
                                        </div>
                                        <div class="mb-1 d-flex align-items-end w-75">
                                            {{ 'CR Conv'|trans }}:
                                            <b class="ml-auto"><% publisherStats.cr.total %>%</b>
                                        </div>
                                        <div class="mb-1 d-flex align-items-end w-75">
                                            {{ 'CR Applies'|trans }}:
                                            <b class="ml-auto"><% publisherStats.realCr.total %>%</b>
                                        </div>
                                        <span class="position-absolute bottom-0 d-block font-300 text-left">
                                            {{ "Over a period of 30 days"|trans }}
                                        </span>
                                    </div>
                                    <div class="col-md-4 px-2 d-flex flex-column">
                                        <span class="mb-2 d-block font-600 text-left">{{ "Cost"|trans }}</span>
                                        <div class="mb-auto">
                                            <bar-vertical-chart v-if="innerRowCharts.cost !== null && chartHasData(innerRowCharts.cost.datasets[0].data)"
                                                                :chart-data="innerRowCharts.cost"
                                                                style="height: 115px"
                                                                class="w-100">
                                            </bar-vertical-chart>
                                            <p v-else>{{ "No data available"|trans }}</p>
                                        </div>
                                        <span class="mb-2 d-block font-600 text-left">{{ "DAF Applies"|trans }}</span>
                                        <div class="mb-auto">
                                            <bar-vertical-chart v-if="innerRowCharts.dafApplies !== null && chartHasData(innerRowCharts.dafApplies.datasets[0].data)"
                                                                :chart-data="innerRowCharts.dafApplies"
                                                                style="height: 115px"
                                                                class="w-100">
                                            </bar-vertical-chart>
                                            <p v-else>{{ "No data available"|trans }}</p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 px-0 border-left d-flex flex-column">
                                        <span class="mb-2 d-block font-600 text-center">{{ 'Campaign List'|trans }}</span>
                                        <div class="ml-4 bg-white rounded-2"
                                             style="height: 100%; overflow-y: auto; overflow-x: hidden">
                                            <div v-for="campaign in publisherStats.campaignList"
                                                 class="row pr-0 pl-0 content-line text-decoration-none">
                                                <div class="col-md-3 my-auto text-center text-truncate">
                                                    <% campaign.advertiserName %>
                                                </div>
                                                <div class="col-md-5 my-auto text-center text-truncate">
                                                    <% campaign.campaignName %>
                                                </div>
                                                <div class="col-md-2 my-auto text-center">
                                                    <% campaign.monthlyBudget > 0 ? numberFormat(campaign.monthlyBudget) + '€' : '-' %>
                                                </div>
                                                <div class="col-md-2 my-auto text-center">
                                                    <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center ml-1"
                                                          data-tippy-content="{{ 'Redirect to campaign'|trans }}"
                                                          style="width: 30px; height: 30px" data-toggle="modal"
                                                          @click="redirectToAdvertiser(campaign.advertiserId)">
                                                        <i class="fal fa-external-link"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <p v-if="!publisherStats?.campaignList?.length" class="text-center mt-4">
                                                {{ "No data available"|trans }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 mt-3 d-flex justify-content-center">
                                    <span class="slider-icon active" @click="sliderFunction(publisher.id)">
                                        <i class="far fa-angle-down"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--############# BOTTOM PAGINATION ###############-->
                <div class="simple-data-headers bg-white py-3 rounded-2 row mx-0 my-4"
                     v-show="publisherList?.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>
                <task-list-panel id="taskListPanel"
                                 ref="taskListPanel"
                                 title="{{ "Publisher's tasks"|trans }}"
                                 :tasks="filteredTasksForPanel"
                                 :path-task-update="pathTaskUpdate"
                                 :path-task-spend-time-add="pathTaskSpendTimeAdd"
                                 @task-updated="updateTask"
                                 @task-time-spent-updated="updateTaskSpentTime"
                                 :role-backend="isGrantedBackend"
                ></task-list-panel>

                <task-form id="taskForm"
                           :advertiser-name="''"
                           :advertiser-id="0"
                           :path-task-create="pathTaskCreate"
                           :path-task-upload="pathTaskUpload"
                           :path-task-default-get="pathTaskDefaultGet"
                           :path-task-labels-get="pathTaskLabelsGet"
                           :path-task-user-list="pathTaskUserList"
                           :entity-list="taskFormEntityList"
                           :is-brief-task="false"
                           @new-task-created="updateTask"
                           ref="taskForm"
                ></task-form>
            </section>
        </main>

        {# PUBLISHER EDITION MODAL #}
        <transition name="slide-right">
            <div class="bg-white showPublisherDetails px-5 pt-4 pb-5 d-flex flex-column active" id="showPublisher" v-if="showPublisherDetailsPanel">
                <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="header pl-2 mb-4">
                    <div class="title mt-3">
                        <template v-if="publisher.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 publisher'|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 Publisher'|trans }} : <b><% publisher.name %></b></span>
                        </template>
                    </div>
                </div>
                {# EDIT FORM #}
                <div class="body-form">
                    {# STEP 1 #}
                    <div class="my-4 position-relative d-flex flex-column" id="step-1" v-if="formStep === 1">
                        <div class="title-step d-flex align-items-center">
                            <div class="slider-icon-group active cursor-default"
                                 style="top: unset; left: unset; transform: unset; background-color: #E2AF17;">
                                <div class="slider-icon cursor-default">
                                    <span class="text-white font-weight-bold">1</span>
                                </div>
                            </div>
                            <div class="title-text text-primary font-700 ml-3">
                                {{ 'Globals Informations'|trans }}
                            </div>
                        </div>
                        <div class="body-step mb-5 d-flex flex-column">
                            <div class="col pl-4 mt-4 d-flex justify-content-between">
                                <div class="form-label-group position-relative input-login col">
                                    <label for="name"
                                           class="labelInput focusInput font-500">
                                        {{ 'Name'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="name"
                                               name="_name"
                                               class="form-control"
                                               placeholder="{{ 'Name'|trans }}" v-model="publisher.name">
                                    </div>
                                </div>
                                <div class="form-label-group position-relative input-login col">
                                    <label for="formatLabel"
                                           class="labelInput focusInput font-500">
                                        {{ 'Label'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="formatLabel"
                                               name="_formatLabel"
                                               class="form-control"
                                               placeholder="{{ 'Label'|trans }}" v-model="publisher.formatLabel">
                                    </div>
                                </div>
                                <div class="form-label-group position-relative input-login col">
                                    <label for="logo"
                                           class="labelInput focusInput font-500">
                                        {{ 'Logo'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="logo"
                                               name="_logo"
                                               class="form-control"
                                               placeholder="{{ 'Logo'|trans }}" v-model="publisher.logo">
                                    </div>
                                </div>
                            </div>
                            <div class="col pl-4 mt-4 d-flex justify-content-between">
                                <div class="col">
                                    <label for="group"
                                           class="labelInput focusInput font-500">
                                        {{ 'Group'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="group"
                                               name="_group"
                                               class="form-control"
                                               placeholder="{{ 'Group'|trans }}"
                                               v-model="publisher.nameGroup">
                                    </div>
                                </div>
                                <div class="col">
                                    <label for="publisherType"
                                           class="labelInput focusInput font-500">
                                        {{ 'Type'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input-dropdown
                                                v-model="publisher.typePlatform"
                                                placeholder="{{ 'Chose type'|trans }}"
                                                :data-list="publisherPlatformType"
                                                :props-return-value="'value'"
                                                :init-value="publisher.typePlatform"
                                                id="publisherType"
                                                style="width: 100%">
                                        </input-dropdown>
                                    </div>
                                </div>
                                <div class="col">
                                    <label for="publisherFeedLevel"
                                           class="labelInput focusInput font-500">
                                        {{ 'Feed level'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input-dropdown
                                                v-model.lazy="publisher.feedLevel"
                                                placeholder="{{ 'Chose feed level'|trans }}"
                                                :data-list="publisherFeedLevel"
                                                :props-return-value="'value'"
                                                :init-value="publisher.feedLevel"
                                                id="publisherFeedLevel"
                                                style="width: 100%">
                                        </input-dropdown>
                                    </div>
                                </div>
                            </div>
                            <div class="col pl-4 mt-4 d-flex justify-content-between">
                                <div class="form-label-group position-relative input-lg col">
                                    <label for="comment-textarea"
                                           class="labelInput focusInput font-500">{{ 'Comment'|trans }}</label>
                                    <textarea id="comment-textarea"
                                              class="form-group w-100 rounded-2 border custom-textarea"
                                              v-model="publisher.comments"></textarea>
                                </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="(country, i) in publisherCountries"
                                           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><% country.country %></span>
                                     <span class="mr-1 ml-1 cursor-pointer" @click="removePublisherCountry(i)"><i
                                                 class="fa fa-times-circle"></i></span>
                                     </span>
                                    </div>
                                    <input-dropdown @input="addPublisherCountry"
                                                    :placeholder="'{{ 'Countries'|trans }}'"
                                                    label="{{ 'Countries'|trans }}"
                                                    :data-list="countries" id="_publisherCountries"
                                                    :props-return-value="'country'"
                                                    :props-displayed-value="'asciiname'"
                                                    :return-raw-option="true"
                                                    :remove-on-input="true"
                                    ></input-dropdown>
                                </div>
                            </div>
                            <div class="col pl-4 mt-4 d-flex justify-content-between">
                                <input class="inp-cbx" id="activePublisher" type="checkbox"
                                       style="display: none;"
                                       v-model="publisher.active"/>
                                <label class="cbx d-flex align-items-center ml-4 w-fit-content"
                                       for="activePublisher">
                                    <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="selfDefaultActivation" type="checkbox"
                                       style="display: none;"
                                       v-model="publisher.selfDefaultActivation"/>
                                <label class="cbx d-flex align-items-center ml-4 w-fit-content"
                                       for="selfDefaultActivation">
                                    <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>{{ 'Self Default'|trans }}</span>
                                </label>
                                <input class="inp-cbx" id="gbPublisher" type="checkbox"
                                       style="display: none;"
                                       v-model="publisher.gbPublisher"/>
                                <label class="cbx d-flex align-items-center ml-4 w-fit-content"
                                       for="gbPublisher">
                                    <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>{{ 'GB Publisher'|trans }}</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    {# STEP 2 #}
                    <div class="my-4 position-relative d-flex flex-column" id="step-2" v-if="formStep === 2">
                        <div class="title-step d-flex align-items-center">
                            <div class="slider-icon-group active cursor-default"
                                 style="top: unset; left: unset; transform: unset; background-color: #E2AF17;">
                                <div class="slider-icon cursor-default">
                                    <span class="text-white font-weight-bold">2</span>
                                </div>
                            </div>
                            <div class="title-text text-primary font-700 ml-3">
                                {{ 'Extra Options'|trans }}
                            </div>
                        </div>
                        <div class="body-step mb-5 d-flex flex-column">
                            <div class="col pl-4 mt-4 d-flex justify-content-between">
                                <div class="form-label-group position-relative input-login col">
                                    <label for="minBid"
                                           class="labelInput focusInput font-500">
                                        {{ 'Min Bid'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="minBid"
                                               name="_minBid"
                                               class="form-control"
                                               placeholder="{{ 'Min Bid'|trans }}"
                                               v-model="publisher.minBid">
                                    </div>
                                </div>
                                <div class="form-label-group position-relative input-login col">
                                    <label for="maxBid"
                                           class="labelInput focusInput font-500">
                                        {{ 'Max Bid'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="maxBid"
                                               name="_maxBid"
                                               class="form-control"
                                               placeholder="{{ 'Max Bid'|trans }}"
                                               v-model="publisher.maxBid">
                                    </div>
                                </div>
                                <div class="form-label-group position-relative input-login col">
                                    <label for="discount"
                                           class="labelInput focusInput font-500">
                                        {{ 'Discount'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="discount"
                                               name="_discount"
                                               class="form-control"
                                               placeholder="{{ 'Discount'|trans }}"
                                               v-model="publisherDiscount.discount">
                                    </div>
                                </div>
                                <div class="form-label-group position-relative input-login col">
                                    <label for="publisherModel"
                                           class="labelInput focusInput font-500">
                                        {{ 'Bid Model'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input-dropdown
                                                v-model="publisher.type"
                                                placeholder="{{ 'Chose a model'|trans }}"
                                                :data-list="publisherModels"
                                                :props-return-value="'value'"
                                                :init-value="publisher.type"
                                                id="publisherModel"
                                                style="width: 100%">
                                        </input-dropdown>
                                    </div>
                                </div>
                            </div>
                            <div class="col pl-4 mt-4 d-flex justify-content-between">
                                <input class="inp-cbx" id="smartApplies" type="checkbox"
                                       style="display: none;"
                                       v-model="publisher.smartApply"/>
                                <label class="cbx d-flex align-items-center ml-4 w-fit-content"
                                       for="smartApplies">
                                        <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>{{ 'Smart apply'|trans }}</span>
                                </label>
                                <input class="inp-cbx" id="smartAppliesQuestion" type="checkbox"
                                       style="display: none;"
                                       v-model="publisher.smartApplyQuestion"/>
                                <label class="cbx d-flex align-items-center ml-4 w-fit-content"
                                       for="smartAppliesQuestion">
                                        <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>{{ 'Smart apply question'|trans }}</span>
                                </label>
                                <input class="inp-cbx" id="redirectWebsite" type="checkbox"
                                       style="display: none;"
                                       v-model="publisher.redirectWebsite"/>
                                <label class="cbx d-flex align-items-center ml-4 w-fit-content"
                                       for="redirectWebsite">
                                    <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>{{ 'Redirect Website'|trans }}</span>
                                </label>
                                <template v-if="publisher.type == 'ppc_campaigns'">
                                    <input class="inp-cbx" id="feedAcceptOrganic" type="checkbox"
                                           style="display: none;"
                                           v-model="publisher.feedAcceptOrganic"/>
                                    <label class="cbx d-flex align-items-center ml-4 w-fit-content"
                                           for="feedAcceptOrganic">
                                        <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>{{ 'Feed Accept Organic'|trans }}</span>
                                    </label>
                                </template>
                            </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="contactEmail"
                                           class="labelInput focusInput font-500">
                                        {{ 'Contact Email'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="contactEmail"
                                               name="_contactEmail"
                                               class="form-control"
                                               placeholder="{{ 'Contact Email'|trans }}"
                                               v-model="publisher.contactEmail">
                                    </div>
                                </div>
                                <div class="form-label-group position-relative input-login col">
                                    <label for="feedRefresh"
                                           class="labelInput focusInput font-500">
                                        {{ 'Feed Refresh Time'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="feedRefresh"
                                               name="_feedRefresh"
                                               class="form-control"
                                               placeholder="{{ 'Feed Refresh Time'|trans }}"
                                               v-model="publisher.feedRefresh">
                                    </div>
                                </div>
                                <div class="form-label-group position-relative input-login col">
                                    <label for="optimizable"
                                           class="labelInput focusInput font-500">
                                        {{ 'Optimizable'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input-dropdown
                                                v-model="publisher.modelType"
                                                :data-list="isOptimizable"
                                                :init-value="publisher.modelType"
                                                :props-return-value="'value'"
                                                :props-displayed-value="'name'"
                                                :placeholder="'{{ 'Optimizable'|trans }}'"
                                                id="optimizable"
                                                style="width: 100%"
                                        >
                                        </input-dropdown>
                                    </div>
                                </div>
                            </div>
                            <div class="col pl-4 mt-4 d-flex justify-content-between">
                                <input class="inp-cbx" id="activeS2s" type="checkbox"
                                       style="display: none;"
                                       v-model="publisher.s2sActive"/>
                                <label class="cbx d-flex align-items-center ml-4 w-fit-content"
                                       for="activeS2s">
                                        <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>{{ 'Postback (S2S)'|trans }}</span>
                                </label>
                            </div>
                            <div class="col pl-4 mt-4 d-flex justify-content-between" v-if="publisher.s2sActive">
                                <div class="form-label-group position-relative input-login col">
                                    <label for="s2sUrl"
                                           class="labelInput focusInput font-500">
                                        {{ 'Postback URL'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="s2sUrl"
                                               name="_s2sUrl"
                                               class="form-control"
                                               placeholder="{{ 'Postback URL'|trans }}" v-model="publisher.s2sUrl">
                                    </div>
                                </div>
                                <div class="form-label-group position-relative input-login col">
                                    <label for="s2sUrlParam"
                                           class="labelInput focusInput font-500">
                                        {{ 'Postback URL'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="s2sUrlParam"
                                               name="_s2sUrlParam"
                                               class="form-control"
                                               placeholder="{{ 'Postback URL'|trans }}"
                                               v-model="publisher.s2sUrlParam">
                                    </div>
                                </div>
                                <div class="form-label-group position-relative input-login col mt-auto pb-2">
                                    <input class="inp-cbx" id="s2sOnlyFlaggedAdvertisers" type="checkbox"
                                           style="display: none;"
                                           v-model="publisher.s2sOnlyFlaggedAdvertisers"/>
                                    <label class="cbx d-flex align-items-center ml-4 w-fit-content"
                                           for="s2sOnlyFlaggedAdvertisers">
                                        <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>{{ 'Only Flagged Advertisers'|trans }}</span>
                                    </label>
                                </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="publisherAppliesLimit"
                                           class="labelInput focusInput font-500">
                                        {{ 'Applies Limit'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="publisherAppliesLimit"
                                               name="_publisherAppliesLimit"
                                               class="form-control"
                                               placeholder='ex: {"count":x,"minutes":x}' v-model="publisher.appliesLimit">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {# STEP 3 #}
                    <div class="my-4 position-relative d-flex flex-column" id="step-3" v-if="formStep === 3">
                        <div class="title-step d-flex align-items-center">
                            <div class="slider-icon-group active cursor-default"
                                 style="top: unset; left: unset; transform: unset; background-color: #E2AF17;">
                                <div class="slider-icon cursor-default">
                                    <span class="text-white font-weight-bold">3</span>
                                </div>
                            </div>
                            <div class="title-text text-primary font-700 ml-3">
                                {{ 'Options Feed'|trans }}
                            </div>
                        </div>
                        <div class="body-step mb-5 d-flex flex-column">
                            <div class="col pl-4 mt-4 d-flex justify-content-between">
                                <div class="form-label-group position-relative input-login col">
                                    <label for="feedFormat"
                                           class="labelInput focusInput font-500">
                                        {{ 'Feed Format'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="feedFormat"
                                               name="_feedFormat"
                                               class="form-control"
                                               placeholder="{{ 'Feed Format'|trans }}"
                                               v-model="publisher.feedFormat">
                                    </div>
                                </div>
                                <div class="form-label-group position-relative input-login col">
                                    <label for="feedDateFormat"
                                           class="labelInput focusInput font-500">
                                        {{ 'Feed Date Format'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="feedDateFormat"
                                               name="_feedDateFormat"
                                               class="form-control"
                                               placeholder="{{ 'Feed Date Format'|trans }}"
                                               v-model="publisher.feedDateFormat">
                                    </div>
                                </div>
                                <div class="form-label-group position-relative input-login col">
                                    <label for="feedBidFormat"
                                           class="labelInput focusInput font-500">
                                        {{ 'Feed Bid Format'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="feedBidFormat"
                                               name="_feedBidFormat"
                                               class="form-control"
                                               placeholder="{{ 'Feed Bid Format'|trans }}"
                                               v-model="publisher.feedBidFormat">
                                    </div>
                                </div>
                            </div>
                            <div class="col pl-4 mt-4 d-flex justify-content-between">
                                <div class="form-label-group position-relative input-lg col">
                                    <label for="xslOut-textarea"
                                           class="labelInput focusInput font-500">{{ 'XSLT'|trans }}</label>
                                    <textarea id="xlsOut-textarea"
                                              class="form-control w-100 rounded-2 border custom-textarea"
                                              v-model="publisher.xslOut"
                                              rows="20"
                                    ></textarea>
                                </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="publisherOptions"
                                           class="labelInput focusInput font-500">
                                        {{ 'Options'|trans }}
                                    </label>
                                    <div class="input-group">
                                        <input type="text"
                                               id="publisherOptions"
                                               name="_publisherOptions"
                                               class="form-control"
                                               placeholder="{{ 'Options'|trans }}" v-model="publisher.options">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex mt-auto px-4">
                    <div class="mr-auto" v-if="formStep > 1">
                        <div class="rounded-2 px-3 py-1 cursor-pointer"
                             style="bottom: 0; right: 0; display: -webkit-inline-box; background-color: #DAE0EF;"
                             id="previous-step" @click="previousStep(formStep)">
                            <div class="slider-icon-group active bg-primary my-1 circle-20"
                                 style="top: unset; left: unset; transform: unset !important; transition: none !important;">
                                <div class="slider-icon" style="transition: none !important;">
                                            <span class="">
                                                <i class="far fa-long-arrow-right" style="color: #DAE0EF;"></i>
                                            </span>
                                </div>
                            </div>
                            <span class="ml-2 my-auto d-block">{{ 'Previous Step'|trans }}</span>
                        </div>
                    </div>
                    <div class="mr-auto" v-if="formStep < 3">
                        <div class="rounded-2 px-3 py-1 cursor-pointer"
                             style="bottom: 0; right: 0; display: -webkit-inline-box; background-color: #DAE0EF;"
                             id="previous-step" @click="nextStep(formStep)">
                            <div class="slider-icon-group active bg-primary my-1 circle-20"
                                 style="top: unset; left: unset; transform: unset !important; transition: none !important;">
                                <div class="slider-icon" style="transition: none !important;">
                                            <span class="">
                                                <i class="far fa-long-arrow-left" style="color: #DAE0EF;"></i>
                                            </span>
                                </div>
                            </div>
                            <span class="ml-2 my-auto d-block">{{ 'Next Step'|trans }}</span>
                        </div>
                    </div>
                    <div class="ml-auto">
                        {% if is_granted('ROLE_PUBLISHER') %}
                            <div class="form-label-group position-relative input-login">
                                <button v-if="publisher.id != null" class="btn btn-primary rounded-30 ml-3 px-3"
                                        @click="savePublisher()">
                                    {{ 'Save'|trans }}
                                </button>
                                <button v-else class="btn btn-primary rounded-30 ml-3 px-3" @click="newPublisher()">
                                    {{ 'Create'|trans }}
                                </button>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </transition>
        {# END PUBLISHER EDITION MODAL #}

        {# PUBLISHER STATS MODAL #}
        <div class="modal fade" id="publisherStats" tabindex="-1" role="dialog" aria-labelledby="publisherStatsTitle"
             aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-body">
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#generalStats">General Stats</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#clickStats">Click Stats</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="generalStats">
                                <div id="mainsCharts" class="mb-4 px-3 py-4">
                                    <div class="col-12 d-flex mb-5">
                                        <date-selector
                                                :id="'publisherOverview'"
                                                :loading="loading"
                                                :date-widget-period="dateWidgetSelected"
                                                :selected-period="selectedPeriod"
                                                :selected-by-period="selectedByPeriod"
                                                :model-config="modelConfig"
                                                :mode-date-picker="modeDatePicker"
                                                @select-period="selectPeriod"
                                                @select-by-period="selectByPeriod"
                                                class="mt-0"
                                                key="main-selector"></date-selector>

                                        <button type="button" @click="changeChartPublisher('click')"
                                                :class="[chartPublisher.includes('click') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                            {{ 'Clicks'|trans }}
                                        </button>
                                        <button type="button" @click="changeChartPublisher('cost')"
                                                :class="[chartPublisher.includes('cost') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                            {{ 'Cost'|trans }}
                                        </button>
                                        <button type="button" @click="changeChartPublisher('cpc')"
                                                :class="[chartPublisher.includes('cpc') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                            CPC
                                        </button>
                                        <button type="button" @click="changeChartPublisher('applies')"
                                                :class="[chartPublisher.includes('applies') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                            Applies
                                        </button>
                                        <button type="button" @click="changeChartPublisher('cpa')"
                                                :class="[chartPublisher.includes('cpa') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                            CPA
                                        </button>
                                        <button type="button" @click="changeChartPublisher('cr')"
                                                :class="[chartPublisher.includes('cr') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                            CR
                                        </button>
                                        <button type="button" @click="changeChartPublisher('dafApplies')"
                                                :class="[chartPublisher.includes('dafApplies') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                            DAF Applies
                                        </button>
                                        <button type="button" @click="changeChartPublisher('realCpa')"
                                                :class="[chartPublisher.includes('realCpa') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                            Real CPA
                                        </button>
                                        <button type="button" @click="changeChartPublisher('realCr')"
                                                :class="[chartPublisher.includes('realCr') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                            Real CR
                                        </button>
                                    </div>

                                    <line-chart :height="350"
                                                key="chart-overview"
                                                :text-color="fontColor"
                                                :chart-data="chartOverviewDS"
                                                :chart-y-axes="chartOverviewYAxes"
                                                :css-classes="'col-12'"
                                                style="height: 350px">
                                    </line-chart>
                                </div>
                            </div>
                            <div class="tab-pane" id="clickStats">
                                <div id="publisherClicks" class="col-12 mb-4 px-3 py-4 bg-white rounded-2 show">
                                    <pie-chart :chart-data="clickStatsChart" style="height: 350px"></pie-chart>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {# END PUBLISHER STATS MODAL #}

        <div :class="[showPublisherDetailsPanel ? 'show' : '', 'modal-backdrop']"
             style="visibility: visible !important;"
             id="modal-backdrop" ref="modalBackdrop" v-show="showPublisherDetailsPanel"></div>
        <span class="d-none invisible twig-data-path-ajax-filter-publisher-get"
              data-path-ajax-filter-publisher-get="{{ path('ajax_filter_publisher_get') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-publisher-details-get"
              data-path-ajax-publisher-details-get="{{ path('ajax_publisher_details_get', { id: ":id" }) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-publisher-save"
              data-path-ajax-publisher-save="{{ path('ajax_publisher_save', { id: ":id" }) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-publisher-new"
              data-path-ajax-publisher-new="{{ path('ajax_publisher_new') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-publisher-data-period"
              data-path-ajax-publisher-data-period="{{ path('ajax_get_publisher_data_with_period') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-publisher-click-period"
              data-path-ajax-publisher-click-period="{{ path('ajax_get_publisher_click_with_period') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-publisher-redirect-campaign"
              data-path-ajax-publisher-redirect-campaign="{{ path('advertiser_campaigns_index', { advertiser: ":id" }) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-publisher-generate-master-feed-link" data-path-ajax-publisher-generate-master-feed-link="{{ path('ajax_generate_master_jobfeed_link') }}"></span>
        <span class="d-none invisible twig-data-publisher-default"
              data-publisher-default="{{ publisherDefault }}"></span>
        <span class="d-none invisible twig-data-countries"
              data-countries="{{ countries }}"></span>
    </div>

{% endblock %}

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