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

{% block body %}
    <div id="vue_app_advertiser" v-cloak>
        <main class="row main mx-0 fade-in">
            <section class="content-area p-r-l-6">
                <div class="col-12 mb-4 px-3 py-4 bg-white rounded-2" style="z-index: 999" v-if="canUserSeeChart">
                    <div class="col-12 d-flex mb-5">
                        <date-selector
                            :id="'campaignsOverview'"
                            :loading="loading"
                            :date-widget-period="dateWidgetSelected"
                            :selected-period="selectedPeriod"
                            :selected-by-period="selectedByPeriod"
                            @select-period="selectPeriod"
                            @select-by-period="selectByPeriod"
                            class="mt-0"
                            key="main-selector"></date-selector>
        
                        <button type="button" @click="changeChartKPI('spend')"
                                :class="[selectedChartKPI.includes('spend') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            {{ 'Spend'|trans }}
                        </button>
                        <button type="button" @click="changeChartKPI('applies')"
                                :class="[selectedChartKPI.includes('applies') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            {{ 'Applies'|trans }}
                        </button>
                        <button type="button" @click="changeChartKPI('clic')"
                                :class="[selectedChartKPI.includes('clic') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            {{ 'Clicks'|trans }}
                        </button>
                        <button type="button" @click="changeChartKPI('cpa')"
                                :class="[selectedChartKPI.includes('cpa') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            CPA
                        </button>
                        <button type="button" @click="changeChartKPI('cpc')"
                                :class="[selectedChartKPI.includes('cpc') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            CPC
                        </button>
                        <button type="button" @click="changeChartKPI('cr')"
                                :class="[selectedChartKPI.includes('cr') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            CR
                        </button>
                    </div>
                    <div class="col">
                        <line-chart :height="200"
                                    key="chart-overview"
                                    :text-color="textColor"
                                    :chart-data="chartDS"
                                    :chart-y-axes="chartYAxes"></line-chart>
                    </div>
                </div>
                <div class="col-12 main-data-table px-0">
                    {# data-tables options #}
                    <div class="data-table-headers bg-white py-3 rounded-2 col-sm-12 d-flex">
                        <div class="col-md-6 d-flex flex-row panels-headers align-items-center">
                            <span class="font-weight-bold">
                                {{ 'Advertisers'|trans }}
                                <span class="chips chips_purple ml-3"><% advertisers.length %></span>
                            </span>
                            <date-selector
                                v-if="!canUserSeeChart"
                                id="campaignsOverview"
                                :loading="loading"
                                :date-widget-period="dateWidgetSelected"
                                :selected-period="selectedPeriod"
                                :chips-classes="'rounded-30 py-1'"
                                @select-period="selectPeriod"
                                class="mt-0 ml-3"
                                key="main-selector">
                            </date-selector>
                            <form-input v-if="isGrantedBackend"
                                        id="advertiserLive"
                                        class="mt-0 pt-0 ml-3"
                                        v-model="advertiserLive"
                                        label="Favoris / Live"
                                        :disabled="loading"
                                        :no-border="true"
                                        type="checkbox">
                            </form-input>
                            <input-dropdown v-if="isGrantedBackend"
                                            id="advertiserSector"
                                            placeholder="{{ 'Advertiser Job Sector'|trans }}"
                                            :data-list="advertiserSectorList"
                                            :init-value="advertiserSector"
                                            v-model="advertiserSector"
                                            :disabled="loading"
                                            class="mt-0 pt-0 ml-3">
                            </input-dropdown>
                        </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="searchAdv" v-model="advertiserFilter"
                                           type="search" class="form-control border"
                                           aria-controls="search-table"
                                           placeholder="{{ 'Search an advertiser'|trans }}">
                                    <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>
                    {# data-tables applies #}
                    <div class="main-data-table-content pb-3">
                        <div class="main-data-table-line col-12 rounded-2 mt-2 table-headers" style="box-shadow: none; background-color: rgba(235, 239, 248, 0.55);">
                            <div class="col-12 row pr-0">
                                <div :class="[canUserSeeChart ? 'col-md-2' : 'col']">
                                    <span class="font-700 cursor-pointer" @click="order('name', 'String')">{{ 'Name'|trans }}</span>
                                    <i class="fa small column-sorter"
                                       @click="order('name', 'String')"
                                       :class="{'fa-sort-alt': campaignsOrder.option !== 'name',
                                               'fa-sort-amount-down-alt': campaignsOrder.option === 'name' && campaignsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': campaignsOrder.option === 'name' && campaignsOrder.direction === 'DESC'}">
                                    </i>
                                </div>
                                <div class="col-md-1 text-center" v-if="canUserSeeChart">
                                    <span class="font-700 cursor-pointer" @click="order('spend', 'Number')"
                                          data-tippy-content="{{ 'Already used expense by advertiser'|trans }}">
                                        {{ 'Spend'|trans }}
                                    </span>
                                    <i class="fa small column-sorter"
                                       @click="order('spend', 'Number')"
                                       :class="{'fa-sort-alt': campaignsOrder.option !== 'spend',
                                               'fa-sort-amount-down-alt': campaignsOrder.option === 'spend' && campaignsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': campaignsOrder.option === 'spend' && campaignsOrder.direction === 'DESC'}">
                                    </i>
                                </div>
                                <div class="col text-center" v-if="canUserSeeChart" style="width: 265px; min-width: 265px;">
                                    <span class="font-700">
                                        {{ 'Leviers'|trans }}
                                    </span>
                                </div>
                                <div class="col-md-1 text-center" v-if="canUserSeeChart">
                                    <span class="font-700 cursor-pointer" @click="order('clicks', 'Number')"
                                          data-tippy-content="{{ 'All clicks by advertiser'|trans }}">
                                        {{ 'Clicks'|trans }}
                                    </span>
                                    <i class="fa small column-sorter"
                                       @click="order('clicks', 'Number')"
                                       :class="{'fa-sort-alt': campaignsOrder.option !== 'clicks',
                                               'fa-sort-amount-down-alt': campaignsOrder.option === 'clicks' && campaignsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': campaignsOrder.option === 'clicks' && campaignsOrder.direction === 'DESC'}">
                                    </i>
                                </div>
                                <div class="col text-center">
                                    <span class="font-700 cursor-pointer" @click="order('applies', 'Number')"
                                          data-tippy-content="{{ 'All applications by advertiser'|trans }}">
                                        {{ 'Applies'|trans }}
                                    </span>
                                    <i class="fa small column-sorter"
                                       @click="order('applies', 'Number')"
                                       :class="{'fa-sort-alt': campaignsOrder.option !== 'applies',
                                               'fa-sort-amount-down-alt': campaignsOrder.option === 'applies' && campaignsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': campaignsOrder.option === 'applies' && campaignsOrder.direction === 'DESC'}">
                                    </i>
                                </div>
                                <div class="col-md-1" v-if="canUserSeeChart">
                                    <span class="font-700 cursor-pointer" @click="order('cpc', 'Number')"
                                          data-tippy-content="{{ 'Total spend by total clicks by advertiser'|trans }}">
                                        CPC
                                    </span>
                                    <i class="fa small column-sorter"
                                       @click="order('cpc', 'Number')"
                                       :class="{'fa-sort-alt': campaignsOrder.option !== 'cpc',
                                               'fa-sort-amount-down-alt': campaignsOrder.option === 'cpc' && campaignsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': campaignsOrder.option === 'cpc' && campaignsOrder.direction === 'DESC'}">
                                    </i>
                                </div>
                                <div class="col-md-1" v-if="canUserSeeChart">
                                    <span class="font-700 cursor-pointer" @click="order('cpa', 'Number')"
                                          data-tippy-content="{{ 'Total spend by total applies by advertiser'|trans }}">
                                        CPA
                                    </span>
                                    <i class="fa small column-sorter"
                                       @click="order('cpa', 'Number')"
                                       :class="{'fa-sort-alt': campaignsOrder.option !== 'cpa',
                                               'fa-sort-amount-down-alt': campaignsOrder.option === 'cpa' && campaignsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': campaignsOrder.option === 'cpa' && campaignsOrder.direction === 'DESC'}">
                                    </i>
                                </div>
                                <div class="col-md-1" v-if="canUserSeeChart">
                                    <span class="font-700 cursor-pointer" @click="order('cr', 'Number')"
                                          data-tippy-content="{{ 'Percentage of applies by clicks by advertiser'|trans }}">
                                        CR
                                    </span>
                                    <i class="fa small column-sorter"
                                       @click="order('cr', 'Number')"
                                       :class="{'fa-sort-alt': campaignsOrder.option !== 'cr',
                                               'fa-sort-amount-down-alt': campaignsOrder.option === 'cr' && campaignsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': campaignsOrder.option === 'cr' && campaignsOrder.direction === 'DESC'}">
                                    </i>
                                </div>
                                <div class="col" v-if="isGrantedBackend">
                                    {# Action col #}
                                </div>
{#                                <div :class="[canUserSeeChart ? 'col-md-1' : 'col']">#}
{#                                    <span class="font-700 cursor-pointer" @click="order('jobs', 'Number')"#}
{#                                          data-tippy-content="{{ 'All jobs by advertiser'|trans }}">#}
{#                                        {{ 'Jobs'|trans }}#}
{#                                    </span>#}
{#                                    <i class="fa small column-sorter"#}
{#                                       @click="order('jobs', 'Number')"#}
{#                                       :class="{'fa-sort-alt': campaignsOrder.option !== 'jobs',#}
{#                                               'fa-sort-amount-down-alt': campaignsOrder.option === 'jobs' && campaignsOrder.direction === 'ASC',#}
{#                                               'fa-sort-amount-down': campaignsOrder.option === 'jobs' && campaignsOrder.direction === 'DESC'}">#}
{#                                    </i>#}
{#                                </div>#}
{#                                <div class="col-md-1">#}
{#                                    <span class="font-700">{{ 'Status'|trans }}</span>#}
{#                                    <i class="fal fa-question-circle" data-tippy-content="{{ 'Advertiser may be active or inactive'|trans }}"></i>#}
{#                                </div>#}
                            </div>
                        </div>
                        
{#                        <template v-if="!(advertisers.length > 0)">#}
{#                            <div class="alert alert-info mt-4 text-center border-0">#}
{#                                {{ 'No campaign launched'|trans }}#}
{#                            </div>#}
{#                        </template>#}
                        
                        <template>
                            <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"
                                v-show="advertisers.length === filteredAdvertisers.length">
                                <div class="col-12 row pr-0 justify-content-between">
                                    <div :class="[canUserSeeChart ? 'col-md-2' : 'col']">
                                        <span class="font-700">{{ 'Total'|trans }}</span>
                                    </div>
                                    <div class="col-md-1 text-center border-left" v-if="canUserSeeChart">
                                        <span class="font-700"><% numberFormat(sum(advertisers, 'spendEUR'), 0) %> €</span>
                                    </div>
                                    <div class="col text-center border-left" style="width: 265px; min-width: 265px;" v-if="canUserSeeChart">
                                    </div>
                                    <div class="col-md-1 text-center border-left" v-if="canUserSeeChart">
                                        <span class="font-700"><% numberFormat(sum(advertisers, 'clicks'), 0) %></span>
                                    </div>
                                    <div class="col text-center border-left">
                                        <span class="font-700"><% numberFormat(sum(advertisers, 'applies'), 0) %></span>
                                    </div>
                                    <div class="col-md-1  border-left" v-if="canUserSeeChart">
                                        <span class="font-700" v-if="sum(advertisers, 'clicks') > 0">
                                            <% numberFormat(sum(advertisers, 'spendEUR') / sum(advertisers, 'clicks'), 2) %> €
                                        </span>
                                        <span class="font-700" v-else>0</span>
                                    </div>
                                    <div class="col-md-1 border-left" v-if="canUserSeeChart">
                                        <span class="font-700" v-if="sum(advertisers, 'applies') > 0">
                                            <% numberFormat(sum(advertisers, 'spendEUR') / sum(advertisers, 'applies'), 2) %> €
                                        </span>
                                        <span class="font-700" v-else>0</span>
                                    </div>
                                    <div class="col-md-1 border-left" v-if="canUserSeeChart">
                                        <span class="font-700" v-if="sum(advertisers, 'clicks') > 0">
                                            <% numberFormat((sum(advertisers,'applies') / sum(advertisers, 'clicks')) * 100, 2) %> %
                                        </span>
                                        <span class="font-700" v-else>0</span>
                                    </div>
                                    <div class="col border-left" v-if="isGrantedBackend">
                                        <button-multiple :content-position="'right'">
                                            <template v-slot:main-btn>
                                                <span class="button slider-icon bg-transparent">
                                                    <i class="custom-icon icon-gitlab"></i>
                                                </span>
                                                <span :class="[openTaskByAdvertiser.length > 0 ? 'badge-sonar badge-sonar-warning-gitlab' : 'd-none']" id="sonar-oi-alert" style="left: 0;"><% openTaskByAdvertiser.length %></span>
                                            </template>
                                            <template v-slot:extra-btn>
                                                <button type="button" class="btn btn-primary px-4 mt-1"
                                                        @click.prevent="openTaskListPanel(openTaskByAdvertiser)">
                                                    <i class="fal fa-list"></i> {{ 'Show tasks'|trans }}
                                                </button>
                                            </template>
                                        </button-multiple>
                                    </div>
{#                                    <div :class="[canUserSeeChart ? 'col-md-1' : 'col', 'text-center d-flex border-left']">#}
{#                                        <span class="font-700"><% numberFormat(sum(advertisers, 'jobs'), 0) %></span>#}
{#                                    </div>#}
                                </div>
                            </div>
                            <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 line-animation"
                                 v-for="(advertiser, key) in advertiserListPagination" :key="key">
                                <a class="col-12 row pr-0 content-line text-decoration-none" :href="advertiser.link">
                                    <div :class="[canUserSeeChart ? 'col-md-2' : 'col', 'd-flex text-decoration-none line-advertiser']">
                                        <div class="d-flex my-auto mr-4 flex-shrink-0 position-relative">
                                            <i v-if="isGrantedBackend" :class="[advertiser.tier === 1 ? 'color-gold' : '',
                                                        advertiser.tier === 2 ? 'color-silver' : '',
                                                        advertiser.tier === 3 ? 'color-bronze' : '', 'fa fa-crown position-absolute']" style="font-size: 1.2rem;top: -18px;left: 10px;">
                                            </i>
                                            <img :src="advertiser.logo" class="mx-auto img-fluid rounded-circle border" height="40" width="40"
                                                 :alt="advertiser.name" style="max-width: 40px; max-height: 40px;">
                                        </div>
                                        <span class="my-auto name-advertiser overflow-hidden text-ellipsis"><% advertiser.name %></span>
                                    </div>
                                    <div class="col-md-1 d-flex text-center border-left" v-if="canUserSeeChart">
                                        <span class="m-auto"><% amountWithCurrency(numberFormat(advertiser.spend, 0), key) %></span>
                                    </div>
                                    <div class="col d-flex text-center align-items-center border-left"
                                         v-if="canUserSeeChart" style="width: 265px;"
                                         @click.stop.prevent
                                         @mouseenter="startScroll(key,advertiser)"
                                         @mouseleave="stopScroll(key,advertiser)">
                                        <i class="fa fa-chevron-left" :id=`left-icon-${key}` style="display: none;opacity: 75%"></i>
                                        <div class="m-auto d-flex flex-nowrap overflow-auto small-scrollbar"
                                             :id=`scroll-${key}`
                                             style="width: 265px; height: 50px; max-height: 50px!important;">
                                            <template v-if="advertiser.agreActivity.length > 0">
                                                <div v-for="(agreActivity, aa) in advertiser.agreActivity"
                                                     class="rounded-circle position-relative m-auto">
                                                    <img :src="agreActivity.logo" :alt="agreActivity.name"
                                                         :data-tippy-content="agreActivity.name"
                                                         data-tippy-placement="top"
                                                         height="35" width="35" class="rounded-circle m-1 media-logo"
                                                         style="height: 35px; max-height: 35px; width: 35px; max-width: 35px">
                                                </div>
                                            </template>
                                            <template v-else>
                                                <p class="m-auto font-italic small">{{ 'No media has been set'|trans }}</p>
                                            </template>
                                        </div>
                                        <i class="fas fa-chevron-right" :id=`right-icon-${key}` style="display: none;opacity: 75%"></i>
                                    </div>
                                    <div class="col-md-1 d-flex text-center border-left" v-if="canUserSeeChart">
                                        <span class="m-auto"><% numberFormat(advertiser.clicks, 0) %></span>
                                    </div>
                                    <div class="col d-flex text-center border-left">
                                        <span class="m-auto"><% numberFormat(advertiser.applies, 0) %></span>
                                    </div>
                                    <div class="col-md-1 d-flex border-left" v-if="canUserSeeChart">
                                        <span class="my-auto"><% amountWithCurrency(numberFormat(advertiser.cpc, 2), key) %></span>
                                    </div>
                                    <div class="col-md-1 d-flex border-left" v-if="canUserSeeChart">
                                        <span class="my-auto"><% amountWithCurrency(numberFormat(advertiser.cpa, 2), key) %></span>
                                    </div>
                                    <div class="col-md-1 d-flex border-left" v-if="canUserSeeChart">
                                        <span class="my-auto"><% numberFormat(advertiser.cr, 2) %> %</span>
                                    </div>
                                    <div class="col d-flex align-items-center border-left" v-if="isGrantedBackend">
                                        <button type="button" class="button slider-icon bg-transparent"
                                                :data-tippy-content="Translator.trans('Show history')"
                                                data-tippy-placement="right"
                                                @click.prevent="showCustomHistory(advertiser.id, advertiser.name)">
                                            <i class="fal fa-history"></i>
                                        </button>
                                        <button-multiple :content-position="'right'">
                                            <template v-slot:main-btn>
                                                <span class="button slider-icon bg-transparent">
                                                    <i class="custom-icon icon-gitlab"></i>
                                                </span>
                                                <span :class="[advertiser.nbTasks > 0 ? 'badge-sonar badge-sonar-warning-gitlab' : 'd-none']" id="sonar-oi-alert" style="left: 0;"><% advertiser.nbTasks %></span>
                                            </template>
                                            <template v-slot:extra-btn>
                                                <button type="button" class="btn btn-primary px-4 mt-1"
                                                        @click.prevent="openTaskListPanel(advertiser.tasks)">
                                                    <i class="fal fa-list"></i> {{ 'Show tasks'|trans }}
                                                </button>
{#                                                <button type="button" class="btn btn-primary px-4 mt-1"#}
{#                                                        @click="openNewTaskForm(advertiser.id)">#}
{#                                                    <i class="fal fa-plus-circle"></i> {{ 'Add a task'|trans }}#}
{#                                                </button>#}
                                            </template>
                                        </button-multiple>
                                    </div>
{#                                    <div :class="[canUserSeeChart ? 'col-md-1' : 'col', 'text-center d-flex border-left']">#}
{#                                        <span class="my-auto"><% numberFormat(advertiser.jobs, 0) %></span>#}
{#                                    </div>#}
{#                                    <div class="col-md-1 d-flex">#}
{#                                        <div class="my-auto">#}
{#                                            <span class="chips status-form my-auto chips_red "#}
{#                                                  v-if="advertiser.clicks === 0">#}
{#                                                    {{ 'inactive'|trans }}#}
{#                                            </span>#}
{#                                                <span class="chips status-form my-auto chips_green " v-else>#}
{#                                                    {{ 'active'|trans }}#}
{#                                            </span>#}
{#                                        </div>#}
{#                                    </div>#}
                                </a>
                            </div>
                        </template>
                    </div>
                </div>

                <!--############# BOTTOM PAGINATION ###############-->
                <div class="simple-data-headers bg-white py-3 rounded-2 row mx-0 mb-5"
                     v-show="filteredAdvertisers.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="Translator.trans('Advertiser tasks')"
                                 :tasks="currentTasks"
                                 :role-backend="isGrantedBackend"
                                 :path-task-update="pathAjaxTaskUpdate"
                                 :path-task-spend-time-add="pathAjaxTaskSpendTimeAdd"
                ></task-list-panel>

                <span class="d-none invisible twig-data-role-backend" data-role-backend="{{ is_granted('ROLE_BACKEND') ? 1 : 0 }}"></span>
                <span class="d-none invisible twig-data-role-user" data-role-user="{{ app.user.roles|json_encode }}"></span>
                <span class="d-none invisible twig-data-user-id" data-user-id="{{ app.user.id }}"></span>
                <span class="d-none invisible twig-data-switch-live" data-switch-live="{{ switchLive }}"></span>

                <span class="d-none invisible twig-data-path-ajax-advertiser-charts-overview-get" data-path-ajax-advertiser-charts-overview-get="{{ path('ajax_advertiser_charts_overview_get') }}"></span>
                <span class="d-none invisible twig-data-path-ajax-advertiser-get" data-path-ajax-advertiser-get="{{ path('ajax_advertiser_get') }}"></span>
                <span class="d-none invisible twig-data-path-ajax-advertiser-sectors-get" data-path-ajax-advertiser-sectors-get="{{ path('ajax_advertiser_sectors_get') }}"></span>
                <span class="d-none invisible twig-data-path-ajax-advertiser-get-all" data-path-ajax-advertiser-get-all="{{ path('ajax_advertiser_get_all') }}"></span>
                <span class="d-none invisible twig-data-path-advertiser-index" data-path-advertiser-index="{{ path('advertiser_index', {advertiser: ':aid'}) }}"></span>

                <span class="d-none invisible twig-data-path-task-update" data-path-task-update="{{ path('ajax_task_update') }}"></span>
                <span class="d-none invisible twig-data-path-task-spend-time-add" data-path-task-spend-time-add="{{ path('ajax_task_spend_time_add') }}"></span>
                
                <span class="d-none invisible twig-data-path-ajax-user-edit-advertiser-followed" data-path-ajax-user-edit-advertiser-followed="{{ path('ajax_user_edit_advertiser_followed', {user: app.user.id}) }}"></span>
            </section>
        </main>
    </div>
{% endblock %}

 {% block specificJS %}
     {{ encore_entry_script_tags('advertiser-index') }}
     {% if is_granted('ROLE_BACKEND') %}
         {{ encore_entry_script_tags('advertiser-selector-header') }}
     {% endif %}
 {% endblock %}