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

{% block body %}
    <main class="row main mx-0">
        <section id="vue_app_campaign" class="content-area p-r-l-6 fade-in pb-5" v-cloak>
            <div class="col-12 d-flex align-items-center mb-2 px-0">
                <p class="pb-2 text-primary">
                    {{ 'Create, edit, manage and compare your campaigns'|trans }}
                </p>
                <button type="button" class="d-flex align-items-center ml-auto btn btn-primary rounded-30" @click="openCampaignForm(0, 0, 0)">
                    {{ 'New campaign'|trans }}
                    <i class="fal fa-plus-circle ml-3"></i>
                </button>
            </div>

            <div id="mainsCharts" class="col-12 mb-4 px-3 py-4 bg-white rounded-2 show">
                <div class="col-12 d-flex mb-5">
                    <date-selector
                            id="overview_date_selector"
                            :loading="isPageLoading"
                            :date-widget-period="dateWidgetSelected"
                            :selected-period="selectedPeriod"
                            :selected-by-period="selectedByPeriod"
                            @select-period="selectPeriod"
                            @select-by-period="selectByPeriod"
                            class="my-auto mr-4"
                            key="main-selector"></date-selector>

                    <button type="button" @click="changeChartKPI('spend')"
                            :class="[selectedChartKPI.includes('spend') ? 'btn-primary' : 'btn-outline-primary', 'btn btn-no-focus']">
                        Spend
                        <span class="font-700 d-block mt-1">
                            <% amountWithCurrency(numberFormat(sumChartData('dataCharts', 'spend'), 0), advertiserCurrency) %>
                        </span>
                    </button>
                    <button type="button" @click="changeChartKPI('applies')"
                            :class="[selectedChartKPI.includes('applies') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                        {{ 'AppliesMetrics'|trans }}
                        <span class="font-700 d-block mt-1">
                            <% numberFormat(sumChartData('dataCharts', 'applies'), 0) %>
                        </span>
                    </button>
                    <button type="button" @click="changeChartKPI('clic')"
                            :class="[selectedChartKPI.includes('clic') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                        {{ 'Clicks'|trans }}
                        <span class="font-700 d-block mt-1">
                            <% numberFormat(sumChartData('dataCharts', 'clicks'), 0) %>
                        </span>
                    </button>
                    <button type="button" @click="changeChartKPI('cpa')"
                            :class="[selectedChartKPI.includes('cpa') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                        CPA
                        <span class="font-700 d-block mt-1">
                            <% sumChartData('dataCharts', 'applies') > 0
                                    ? amountWithCurrency(numberFormat(sumChartData('dataCharts', 'spend') / sumChartData('dataCharts', 'applies'), 2), advertiserCurrency)
                                    : 0
                            %>
                        </span>
                    </button>
                    <button type="button" @click="changeChartKPI('cpc')"
                            :class="[selectedChartKPI.includes('cpc') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                        CPC
                        <span class="font-700 d-block mt-1">
                            <% sumChartData('dataCharts', 'clicks') > 0
                                    ? amountWithCurrency(numberFormat(sumChartData('dataCharts', 'spend') / sumChartData('dataCharts', 'clicks'), 2), advertiserCurrency)
                                    : 0
                            %>
                        </span>
                    </button>
                    <button type="button" @click="changeChartKPI('cr')"
                            :class="[selectedChartKPI.includes('cr') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 mr-5 btn-no-focus']">
                        CR
                        <span class="font-700 d-block mt-1">
                            <% sumChartData('dataCharts', 'clicks') > 0
                                    ? numberFormat((sumChartData('dataCharts', 'applies') / sumChartData('dataCharts', 'clicks')) * 100, 2) + '%'
                                    : 0
                                %>
                        </span>
                    </button>
                    <form-input id="cmp_period_switch"
                                v-model="cmpActive"
                                type="checkbox"
                                label="{{ 'Enable period comparison'|trans }}"
                                :no-border="true"
                                class="my-auto w-fit-content"
                    ></form-input>
                </div>

                <div class="col">
                    <line-chart :height="200"
                                :currency="advertiserCurrency"
                                key="chart-overview"
                                :text-color="fontColor"
                                :chart-data="chartOverviewDS"
                                :chart-y-axes="chartOverviewYAxes"></line-chart>
                </div>

                <template v-if="cmpActive">
                    <div class="col-12 d-flex mb-5 mt-4">
                        <date-selector
                                id="overview_cmp_date_selector"
                                :loading="isPageLoading"
                                :date-widget-period="dateWidgetSelectedCmp"
                                :selected-period="selectedPeriodCmp"
                                :selected-by-period="selectedByPeriodCmp"
                                @select-period="selectPeriod"
                                @select-by-period="selectByPeriod"
                                class="my-auto mr-4"
                                key="main-selector-cmp"></date-selector>
                        <button type="button" @click="changeChartKPI('spend')"
                                :class="[selectedChartKPI.includes('spend') ? 'btn-primary' : 'btn-outline-primary', 'btn btn-no-focus']">
                            Spend
                            <span class="font-700 d-block mt-1">
                            <% amountWithCurrency(numberFormat(sumChartData('dataChartsCmp', 'spend'), 0), advertiserCurrency) %>
                        </span>
                        </button>
                        <button type="button" @click="changeChartKPI('applies')"
                                :class="[selectedChartKPI.includes('applies') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            {{ 'AppliesMetrics'|trans }}
                            <span class="font-700 d-block mt-1">
                                <% numberFormat(sumChartData('dataChartsCmp', 'applies'), 0) %>
                            </span>
                        </button>
                        <button type="button" @click="changeChartKPI('clic')"
                                :class="[selectedChartKPI.includes('clic') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            {{ 'Clicks'|trans }}
                            <span class="font-700 d-block mt-1">
                                <% numberFormat(sumChartData('dataChartsCmp', 'clicks'), 0) %>
                            </span>
                        </button>
                        <button type="button" @click="changeChartKPI('cpa')"
                                :class="[selectedChartKPI.includes('cpa') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            CPA
                            <span class="font-700 d-block mt-1">
                                <% sumChartData('dataChartsCmp', 'applies') > 0
                                            ? amountWithCurrency(numberFormat(sumChartData('dataChartsCmp', 'spend') / sumChartData('dataChartsCmp', 'applies'), 2), advertiserCurrency)
                                            : 0
                                %>
                            </span>
                        </button>
                        <button type="button" @click="changeChartKPI('cpc')"
                                :class="[selectedChartKPI.includes('cpc') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            CPC
                            <span class="font-700 d-block mt-1">
                                <% sumChartData('dataChartsCmp', 'clicks') > 0
                                            ? amountWithCurrency(numberFormat(sumChartData('dataChartsCmp', 'spend') / sumChartData('dataChartsCmp', 'clicks'), 2), advertiserCurrency)
                                            : 0
                                %>
                            </span>
                        </button>
                        <button type="button" @click="changeChartKPI('cr')"
                                :class="[selectedChartKPI.includes('cr') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 mr-5 btn-no-focus']">
                            CR
                            <span class="font-700 d-block mt-1">
                                <% sumChartData('dataChartsCmp', 'clicks') > 0
                                            ? numberFormat((sumChartData('dataChartsCmp', 'applies') / sumChartData('dataChartsCmp', 'clicks')) * 100, 2) + '%'
                                            : 0
                                %>
                            </span>
                        </button>
                    </div>
                    <div class="col">
                        <line-chart :height="200"
                                    :currency="advertiserCurrency"
                                    key="chart-overview-cmp"
                                    :text-color="fontColor"
                                    :chart-data="chartOverviewDSCmp"
                                    :chart-y-axes="chartOverviewYAxes"></line-chart>
                    </div>
                </template>
            </div>

            <div class="col-12 d-flex flex-wrap mb-4 px-4 py-4 rounded-2 bg-white position-relative">
                <h6 class="text-primary font-700 mb-3 w-100">{{ 'Page filters'|trans }}</h6>
                <div class="mt-2" style="min-width: 250px;">
                    <multi-select-dropdown :label="Translator.trans('Status')"
                                           id="campaign_filter_type"
                                           v-model="selectedCampaignStatus"
                                           :init-value="selectedCampaignStatus"
                                           :data="campaignStatusList"
                                           :placeholder="Translator.trans('Status')"
                                           label-key="name"
                                           class="mr-2"
                                           :value-as-tag="true"
                                           key="campaign_filter_status"></multi-select-dropdown>
                </div>
                <div class="mt-2" style="min-width: 250px;">
                    <multi-select-dropdown label="OI"
                                           id="campaign_filter_brief"
                                           v-model="selectedBrief"
                                           :init-value="selectedBrief"
                                           :data="briefListWithLegacy"
                                           :value-as-tag="true"
                                           :searchable="true"
                                           placeholder="OI"
                                           label-key="name"
                                           input-value-text="OI"
                                           class="mr-2"
                                           :is-raw-value="true"
                                           key="campaign_filter_brief"></multi-select-dropdown>
                </div>
                <div class="mt-2" style="min-width: 250px;">
                    <multi-select-dropdown label="Media"
                                           id="campaign_filter_media"
                                           v-model="selectedCampaignMedia"
                                           :init-value="selectedCampaignMedia"
                                           :data="availableMedia"
                                           placeholder="Media"
                                           label-key="name"
                                           input-value-text="Media"
                                           class="mr-2"
                                           :is-raw-value="true"
                                           :value-as-tag="true"
                                           key="campaign_filter_media"></multi-select-dropdown>
                </div>
                <div class="mt-2" style="min-width: 250px;" v-if="roleBackend">
                    <multi-select-dropdown :label="Translator.trans('Campaign type')"
                                           id="campaign_filter_type"
                                           v-model="selectedCampaignType"
                                           :init-value="selectedCampaignType"
                                           :data="campaignFormInfos.campaignTypeList"
                                           :placeholder="Translator.trans('Campaign type')"
                                           label-key="name"
                                           input-value-text="Type"
                                           class="mr-2"
                                           :value-as-tag="true"
                                           :is-raw-value="true"
                                           key="campaign_filter_type"></multi-select-dropdown>
                </div>
            </div>

            <div class="col-12 main-data-table px-0">
                <div class="main-data-table-content mb-5 pb-3">
                    <div class="row m-0 px-0 col-12 bg-white py-4 rounded-2 my-auto d-flex">
                        <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> <% Translator.trans('page of') %> <% 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}" @click="navigatePage('backward')"></i>
                                    <i class="pr-2 fal fa-chevron-left mr-2" :class="{disabled: page === 1}" @click="navigatePage('prev')"></i>
                                    <i class="pr-2 fal fa-chevron-right mr-2" :class="{disabled: page === nbrPages}" @click="navigatePage('next')"></i>
                                    <i class="fas fa-step-forward" :class="{disabled: page === nbrPages}" @click="navigatePage('forward')"></i>
                                </div>
                            </div>
                            <span class="mr-3"><% Translator.trans('Rows by page') %>:</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><% Translator.trans('Total rows') %>:</span>
                                <span class="chips chips_purple py-2"><% filteredCampaigns.length %></span>
                            </p>
                        </div>
                        <div class="col-md-6 section-search d-flex justify-content-end align-items-end ml-auto">
                            <div class="w-75 px-0">
                                <div class="input-group">
                                    <input id="searchAdv" v-model="campaignSearchInput"
                                           type="search" class="form-control border"
                                           aria-controls="search-table"
                                           :placeholder="Translator.trans('Search')">
                                    <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="main-data-table-line col-12 rounded-2 mt-3 py-4 table-headers" style="box-shadow: none; background-color: rgba(235, 239, 248, 0.55);">
                        <div class="col-12 pl-4 row px-0 mx-0">

                            <div class="checkbox my-auto position-absolute left-0">
                                <input class="inp-cbx" id="checkAll" type="checkbox"
                                       style="display: none;"  @click="selectAllCampaigns"
                                       v-model="allCampaignsChecked" @change="selectAllCampaigns"/>
                                <label class="cbx" for="checkAll">
                                    <span class="bg-white"><svg width="10px" height="10px" viewbox="0 0 10 10"><polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg></span>
                                </label>
                            </div>

                            <div class="col text-center px-0 d-flex" style="max-width: 50px">
                                <span class="font-700 cursor-pointer pl-2" @click="orderCampaign('mediaName', 'String')">{{ 'Media'|trans }}</span>
                            </div>

                            <div :class="[selectedCampaignType === 'direct' ? 'col-md-3' : 'col-md-2', 'd-flex justify-content-center align-items-center pl-3']">
                                <span class="font-700 cursor-pointer" @click="orderCampaign('name', 'String')">{{ 'Campaigns'|trans }}</span>
                                <i class="fa small column-sorter"
                                   @click="orderCampaign('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>
                            {% if is_granted('ROLE_BACKEND') %}
                            <div class="col px-1 overflow-hidden text-ellipsis text-center" style="max-width: 110px">
                                <span class="font-700 cursor-pointer" data-tippy-content="{{ 'Applies quality'|trans }}" @click="orderCampaign('appliesScoring', 'Number')">Quality</span>
                                <i class="fa small column-sorter"
                                   @click="orderCampaign('appliesScoring', 'Number')"
                                   :class="{'fa-sort-alt': campaignsOrder.option !== 'appliesScoring',
                                       'fa-sort-amount-down-alt': campaignsOrder.option === 'appliesScoring' && campaignsOrder.direction === 'ASC',
                                       'fa-sort-amount-down': campaignsOrder.option === 'appliesScoring' && campaignsOrder.direction === 'DESC'}">
                                </i>
                            </div>
                            {% endif %}
                            <div class="col-md-1 px-1 overflow-hidden text-ellipsis" style="max-width: 70px;">
                                <span class="cursor-pointer font-700 pl-2" @click="orderCampaign('status', 'Number')">Status</span>
                                <i class="fa small column-sorter"
                                   @click="orderCampaign('status', 'Number')"
                                   style="left: 88%;"
                                   :class="{'fa-sort-alt': campaignsOrder.option !== 'status',
                                       'fa-sort-amount-down-alt': campaignsOrder.option === 'status' && campaignsOrder.direction === 'ASC',
                                       'fa-sort-amount-down': campaignsOrder.option === 'status' && campaignsOrder.direction === 'DESC'}">
                                </i>
                            </div>
                            <div class="col text-center overflow-hidden text-ellipsis" v-if="selectedCampaignType !== 'direct'">
                                <span class="cursor-pointer font-700" data-tippy-content="{{ 'Total spend / current flight budget (only active campaign)'|trans }}" @click="orderCampaign('currSpendPercent', 'Number')">{{ 'Budget'|trans }}</span>
                                <i class="fa small column-sorter"
                                   @click="orderCampaign('currSpendPercent', 'Number')"
                                   :class="{'fa-sort-alt': campaignsOrder.option !== 'currSpendPercent',
                                       'fa-sort-amount-down-alt': campaignsOrder.option === 'currSpendPercent' && campaignsOrder.direction === 'ASC',
                                       'fa-sort-amount-down': campaignsOrder.option === 'currSpendPercent' && campaignsOrder.direction === 'DESC'}">
                                </i>
                            </div>
                            <div class="col-md-1 px-1 text-center overflow-hidden text-ellipsis pr-3">
                                <span class="cursor-pointer font-700" data-tippy-content="{{ 'Already used expense for a campaign'|trans }}" @click="orderCampaign('spend', 'Number')">{{ 'Spend'|trans }}</span>
                                <i class="fa small column-sorter"
                                   @click="orderCampaign('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-md-1 px-1 text-center overflow-hidden text-ellipsis pr-3">
                                <span class="cursor-pointer font-700" data-tippy-content="{{ 'All applications for a campaign'|trans }}" @click="orderCampaign('applies', 'Number')">Applies</span>
                                <i class="fa small column-sorter"
                                   @click="orderCampaign('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 px-1 text-center">
                                <span class="cursor-pointer font-700" data-tippy-content="{{ 'Spend per application for a campaign' |trans}}" @click="orderCampaign('cpa', 'Number')">CPA</span>
                                <i class="fa small column-sorter"
                                   @click="orderCampaign('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 px-1 text-center">
                                <span class="cursor-pointer font-700" data-tippy-content="{{ 'Spend per click for a campaign'|trans }}" @click="orderCampaign('cpc', 'Number')">CPC</span>
                                <i class="fa small column-sorter"
                                   @click="orderCampaign('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 px-1 text-center">
                                <span class="cursor-pointer font-700" data-tippy-content="{{ 'Percentage of applies by clicks' |trans}}" @click="orderCampaign('cr', 'Number')">CR</span>
                                <i class="fa small column-sorter"
                                   @click="orderCampaign('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-md-1 px-1 text-center overflow-hidden text-ellipsis">
                                <span class="cursor-pointer font-700" :data-tippy-content="selectedCampaignType !== 'direct'
                                        ? '{{ 'All Jobs for a campaign'|trans }}' : '{{ 'All jobs with minimum one click or one application' |trans}}'" @click="orderCampaign('jobs', 'Number')">{{ 'JobsMetrics'|trans }}</span>
                                <i class="fa small column-sorter"
                                   @click="orderCampaign('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 px-0"></div>
                        </div>
                    </div>
                    <div v-if="campaigns.length > 0" id="row-total-campaigns" 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 rounded-2 pl-4 pr-0 mx-0">
                            <div class="col text-center px-0 d-flex" style="max-width: 50px">
                            </div>
                            <div class="d-flex col-md-2 justify-content-center align-items-center pl-3">
                                <span class="font-700">{{ 'Total'|trans }}</span>
                            </div>
                            {% if is_granted('ROLE_BACKEND') %}
                            <div class="col" style="max-width: 110px;"></div>
                            {% endif %}
                            <div class="col-md-1" style="max-width: 70px;"></div>
                            <div class="col text-center">
                                <span class="font-700"><% amountWithCurrency(totalCampaigns.totalSpend, advertiserCurrency) %> / <% amountWithCurrency(totalCampaigns.budget, advertiserCurrency) %></span>
                            </div>
                            <div class="col-md-1 px-1 text-center border-left">
                                <span class="font-700"><% amountWithCurrency(totalCampaigns.spend, advertiserCurrency) %></span>
                            </div>
                            <div class="col-md-1 px-1 text-center border-left">
                                <span class="font-700"><% totalCampaigns.applies %></span>
                            </div>
                            <div class="col-md-1 px-1 text-center border-left">
                                <span class="font-700"><% amountWithCurrency(totalCampaigns.cpa, advertiserCurrency) %></span>
                            </div>
                            <div class="col-md-1 px-1 text-center border-left">
                                <span class="font-700"><% amountWithCurrency(totalCampaigns.cpc, advertiserCurrency) %></span>
                            </div>
                            <div class="col-md-1 px-1 text-center border-left">
                                <span class="font-700"><% totalCampaigns.cr %>%</span>
                            </div>
                            <div class="col-md-1 px-1 text-center border-left">
                                <span class="font-700"><% totalCampaigns.jobs %></span>
                            </div>
                            <div class="col px-0"></div>
                        </div>
                    </div>
                    <div v-if="!(campaigns.length > 0) && !loading.campaignList">
                        <div class="alert alert-info mt-4 text-center border-0">
                            {{ 'No campaign launched'|trans }}
                        </div>
                    </div>
                    <div v-if="campaigns.length > 0 && filteredCampaigns.length === 0 && !loading.campaignList">
                        <div class="alert alert-info mt-4 text-center border-0">
                            {{ 'No campaign fits those filters'|trans }}
                        </div>
                    </div>
                    <div v-else>
                        <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 line-animation" :id="'campaign-row-'+campaign.id"
                             v-for="(campaign, currentIndex) in campaignsPagination" v-if="currentIndex < pageLimit">
                            <div class="col-sm-12 main-line-content row pl-4 pr-0 mx-0 flex-nowrap">

                                <div class="checkbox my-auto position-absolute left-0" style="top: 50%;transform: translateY(-50%);">
                                    <input class="inp-cbx" :id="campaign.id" type="checkbox"
                                           style="display: none;" :value="campaign.id"
                                           v-model="checkedCampaigns" @change="allCampaignsChecked = (campaignsPagination.length === checkedCampaigns.length)"/>
                                    <label class="cbx" :for="campaign.id">
                                       <span>
                                           <svg width="10px" height="10px" viewbox="0 0 10 10">
                                               <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                           </svg>
                                       </span>
                                    </label>
                                </div>

                                <div class="col text-center pr-0 d-flex justify-content-center align-items-center cursor-pointer" style="max-width: 50px"
                                     @click="openCampaignStatsPanel(campaign.id)">
                                    <img :src="campaign.mediaLogo" :alt="`media-logo-${campaign.mediaName}`"
                                         :data-tippy-content="`<span style='word-break: break-all;'>${campaign.mediaName}</span>`"
                                         style="height: auto; width: 35px;" class="rounded-circle">
                                </div>

                                <div class="col-md-2 border-right pl-3 pr-2 d-flex justify-content-start align-items-center my-auto">
                                    <img :src="campaign.publisherLogo" alt="publisher-logo" v-if="campaign.type === 'direct'"
                                         :data-tippy-content="`<span style='word-break: break-all;'>${campaign.publisherName}</span>`"
                                         style="height: auto; width: 40px;" class="mr-4 img-fluid">
                                    <span class="font-500 text-truncate d-block cursor-pointer"
                                          :data-tippy-interactive="true"
                                          :data-tippy-maxWidth="750"
                                          :data-tippy-content="`<span style='word-break: break-all;'>${campaign.name} <span style='word-break: keep-all;'>(id: ${campaign.id})</span></span>`"
                                          @click="openCampaignStatsPanel(campaign.id)">
                                        <% campaign.name %>
                                    </span>
                                    <button data-tippy-content="{{ 'Copy to clipboard'|trans }}" @click="copy(campaign.name)"
                                            type="button" class="ml-auto button slider-icon bg-transparent">
                                        <i class="fal fa-copy"></i>
                                    </button>
                                </div>
                                {% if is_granted('ROLE_BACKEND') %}
                                <div class="col px-2 d-flex justify-content-center my-auto" style="max-width: 110px">
                                    <apply-scoring :id="'appliesScoring_'+campaign.id"
                                                   :score="campaign.appliesScoring"
                                                   :distributed-score="campaign.distributedAppliesScoring"
                                                   :key="campaign.id"
                                    ></apply-scoring>
                                </div>
                                {% endif %}
                                <div class="my-auto border-left border-right d-flex justify-content-center align-items-center col-md-1" style="max-width: 70px;">
                                    <i v-if="campaign.status.id === 1"
                                       @click="updateAutoActivate(false, [campaign.id])"
                                       data-tippy-placement="right"
                                       :data-tippy-content="`${Translator.trans(campaign.status.label)}.
                                       ${Translator.trans('Click to disable the auto activation of this campaign when its start date is reached')}.
                                       ${Translator.trans('Start in')} ${campaign.daysUntilStart} ${Translator.transChoice('day', campaign.daysUntilStart, {count: campaign.daysUntilStart})}`"
                                       class="custom-icon icon-timer-green cursor-pointer">
                                    </i>
                                    <i v-if="campaign.status.id === 2"
                                       @click="updateAutoActivate(true, [campaign.id])"
                                       data-tippy-placement="right"
                                       :data-tippy-content="`${Translator.trans(campaign.status.label)}.
                                       ${Translator.trans('Click to auto activate this campaign when its start date is reached')}.
                                       ${Translator.trans('Start in')} ${campaign.daysUntilStart} ${Translator.transChoice('day', campaign.daysUntilStart, {count: campaign.daysUntilStart})}`"
                                       class="custom-icon icon-timer-orange cursor-pointer">
                                    </i>
                                    <i v-if="campaign.status.id === 3" @click="updateStatus(false, [campaign.id])"
                                       :data-tippy-content="`${Translator.trans(campaign.status.label)}. ${Translator.trans('Click to pause')}`"
                                       class="custom-icon icon-play-pause-green cursor-pointer">
                                    </i>
                                    <i v-if="campaign.status.id === 4" @click="updateStatus(true, [campaign.id])"
                                       :data-tippy-content="`${Translator.trans(campaign.status.label)}. ${Translator.trans('Click to activate')}`"
                                       class="custom-icon icon-play-pause cursor-pointer opacity-075">
                                    </i>
                                    <i v-if="campaign.status.id === 5" :data-tippy-content="Translator.trans(campaign.status.label)"
                                       class="fa fa-lg fa-stop-circle"></i>
                                    <i v-if="campaign.status.id === -1" :data-tippy-content="Translator.trans(campaign.status.label)"
                                       class="fa fa fa-archive"></i>
                                    {% if is_granted('ROLE_BACKEND') %}
                                        <i v-if="campaign.dailyBudgetReached" data-tippy-maxWidth="500" :data-tippy-content="`${campaign.dailyBudgetReachedReason}`"
                                           class="fa fa-exclamation-triangle ml-2 text-warning"></i>
                                    {% endif %}
                                </div>
                                <div class="my-auto col overflow-auto d-flex justify-content-center">
                                    <div v-if="numberFormat(campaign.currSpend,0) !== null && campaign.type !== 'direct'"
                                         class="d-inline-block w-100" style="max-width: 180px">
                                        <div class="progress" style="height: 7px;"
                                             :data-tippy-content="numberFormat(campaign.currSpendPercent, 2) + ' %' + progressChartColor(numberFormat(campaign.currSpendPercent,2,'en-GB'), numberFormat(campaign.durationPercent,2,'en-GB')).message"
                                             data-tippy-placement="left-end">
                                            <div data-percentage="0%"
                                                 :style="{
                                                    width: numberFormat(campaign.currSpendPercent,0,'en-GB') + '%',
                                                    backgroundColor: campaign.status.id === 4 ? '#ffc107' : progressChartColor(numberFormat(campaign.currSpendPercent,2,'en-GB'), numberFormat(campaign.durationPercent,2,'en-GB')).color }"
                                                 aria-valuenow=""
                                                 :class="[campaign.status.id === 4 ? 'progress-bar-striped' : '', 'progress-bar']"
                                                 role="progressbar"
                                                 aria-valuemin="0"
                                                 aria-valuemax="100"
                                                 :data-value="numberFormat(campaign.currSpendPercent,0,'en-GB')">
                                            </div>
                                        </div>
                                        <span style="font-size: 12px;" class="font-700"><% amountWithCurrency(numberFormat(campaign.currSpend, 0), campaign.currency) %> / <% amountWithCurrency(numberFormat(campaign.currBudget, 0), campaign.currency) %></span>
                                        <div class="mt-2">
                                            <div class="progress" style="height: 7px;"
                                            :data-tippy-content="numberFormat(campaign.durationPercent, 2,'en-GB') + ' %'"
                                                 data-tippy-placement="left-end">
                                                <div data-percentage="0%"
                                                     :style="{ width: numberFormat(campaign.durationPercent,0) + '%', backgroundColor: '#54D87D' }"
                                                     aria-valuenow=""
                                                     class="progress-bar"
                                                     role="progressbar"
                                                     aria-valuemin="0"
                                                     aria-valuemax="100"
                                                     :data-value="numberFormat(campaign.durationPercent,0)">
                                                </div>
                                            </div>
                                            <small style="font-size: 10px;" class="font-italic font-600 text-capitalize text-info text-monospace d-table chips_purple mt-1 rounded-2 px-1">
                                                <% campaign.durationPercent === 100
                                                        ? Translator.trans('Finished')
                                                        : `${campaign.pastDays} / ${campaign.totalDays} ${Translator.trans('days')}` %>
                                            </small>
                                        </div>
                                    </div>
                                    <span v-else><% amountWithCurrency(numberFormat(campaign.budget, 0), campaign.currency) %></span>
                                </div>
                                <div class="my-auto col-md-1 text-center border-left">
                                    <span><% amountWithCurrency(numberFormat(campaign.spend, 0), campaign.currency) %></span>
                                </div>
                                <div class="my-auto col-md-1 text-center border-left">
                                    <span><% numberFormat(campaign.applies, 0) %></span>
                                </div>
                                <div class="my-auto col-md-1 text-center border-left">
                                    <span><% amountWithCurrency(numberFormat(campaign.cpa, 2), campaign.currency) %></span>
                                </div>
                                <div class="my-auto col-md-1 text-center border-left">
                                    <span><% amountWithCurrency(numberFormat(campaign.cpc, 2), campaign.currency) %></span>
                                </div>
                                <div class="my-auto col-md-1 text-center border-left">
                                    <span><% numberFormat(campaign.cr, 2) %>%</span>
                                </div>
                                <div class="my-auto col-md-1 text-center border-left border-right">
                                    <span><% numberFormat(campaign.jobs, 0) %></span>
                                </div>
                                <div class="my-auto d-flex justify-content-end px-0 flex-wrap col">
                                    <a class="span-icon small cursor-pointer d-flex justify-content-center align-items-center text-decoration-none"
                                       :href="pathBrief.replace(':bid', campaign.idBrief)" :data-tippy-maxWidth="750"
                                       :data-tippy-content="`${Translator.trans('Show campaign\'s OI')}<br>${campaign.briefName}`" style="width: 30px; height: 30px"
                                       v-if="campaign.idBrief !== 0">
                                        <i class="fal fa-file-signature"></i>
                                    </a>
                                    <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center"
                                          data-tippy-content="{{ 'Modify campaign'|trans }}" style="width: 30px; height: 30px"
                                          v-if="campaign.status !== -1"
                                          @click="openCampaignForm(campaign.id, campaign.idBrief, campaign.idBriefPlan)">
                                        <i class="fal fa-pen"></i>
                                    </span>
                                    <span class="span-icon small cursor-pointer d-flex align-items-center justify-content-center"
                                          data-tippy-content="{{ 'restore'|trans|capitalize }}" style="width: 30px; height: 30px"
                                          v-if="campaign.status === -1"
                                          @click="campaignToRestoreId = campaign.id; restoreCampaignModalAction('show')"
                                          :data-id="campaign.id">
                                        <i class="fal fa-reply"></i>
                                    </span>
                                    <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center"
                                          data-tippy-content="{{ 'Show campaign details'|trans }}" style="width: 30px; height: 30px"
                                          v-if="campaign.status !== -1"
                                          @click="openCampaignStatsPanel(campaign.id)">
                                        <i class="fal fa-eye"></i>
                                    </span>
                                    {% if is_granted('ROLE_BACKEND') %}
                                        <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="[campaign.activeTasks > 0 ? 'badge-sonar badge-sonar-warning-gitlab' : 'd-none']" id="sonar-oi-alert"><% campaign.activeTasks %></span>
                                            </template>
                                            <template v-slot:extra-btn>
                                                <button type="button" class="btn btn-primary px-4 mt-1"
                                                    @click="$$dispatchEntityTasks({type: 'ppc_campaign', id: campaign.id, name: campaign.name, title: 'Tasks of', isParent: true})">
                                                    <i class="fal fa-list"></i> {{ 'Show tasks'|trans }}
                                                </button>
                                                <button type="button" class="btn btn-primary px-4 mt-1"
                                                    @click="openNewTaskForm(campaign.id)">
                                                    <i class="fal fa-plus-circle"></i> {{ 'Add a task'|trans }}
                                                </button>
                                            </template>
                                        </button-multiple>
                                    {% endif %}
                                    <a class="span-icon small cursor-pointer d-flex justify-content-center align-items-center text-decoration-none"
                                       :href="campaign.feedLink" target="_blank"
                                       data-tippy-content="{{ 'Show feed link'|trans }}" style="width: 30px; height: 30px"
                                       v-if="campaign.type === 'direct' && campaign.status !== -1">
                                        <i class="fal fa-external-link"></i>
                                    </a>
                                    <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center"
                                          data-tippy-content="{{ 'Show history'|trans }}" style="width: 30px; height: 30px"
                                          @click="showCustomHistory(campaign.id, campaign.name)"
                                          :data-id="campaign.id">
                                        <i class="fal fa-history"></i>
                                    </span>
                                    <span class="slider-icon" @click="sliderFunction(campaign.id)" :id="'id-' + campaign.id">
                                        <i class="far fa-angle-down"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="hide-infos-apply col-12 pt-3 row pr-0 pb-3" :class="'div-' + campaign.id" style="display: none;" :data-id="campaign.id">
                                <div class="col-12 text-center px-0 mb-5 d-none">
                                    <div class="py-3 border-info text-info px-3 d-inline-block border rounded-2 mb-5" scope="row">
                                        <i class="fal fa-calendar-alt"></i>  <span class="mx-1"> {{ 'from'|trans|capitalize }} </span>  <b><% campaign.startDate %></b> - <span class="mx-1">{{ 'to'|trans }}</span> - <b><% campaign.endDate %></b>
                                    </div>
                                    <hr>
                                </div>
                                <div class="col-sm-12 d-flex mt-3 flight-budget">
                                    <div class="col-2"></div>
                                    <div class="col-8 pl-0 mt-4">
                                        <span class="mb-2 font-600 text-primary" style="font-size: 1.1em;"><i class="fal fa-badge-percent mr-2" style="font-size: 1em;"></i>Flight budgets</span>
                                        <table class="table table-striped mt-2 mb-5">
                                            <thead>
                                            <tr>
                                                <th scope="col">{{ 'Start'|trans }}</th>
                                                <th scope="col">{{ 'End'|trans }}</th>
                                                <th scope="col">{{ 'Budget'|trans }}</th>
                                                <th scope="col">{{ 'Spend'|trans }}</th>
                                                <th scope="col">{{ 'AppliesMetrics'|trans }}</th>
                                                <th scope="col">CPA</th>
                                                <th scope="col">CPC</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="(flight, k) in campaign.flights" :key="k">
                                                <td>
                                                    <% flight.startDate %>
                                                    <template v-if="flight.currentFlight">
                                                        <i class="fa fa-star ml-2" data-tippy-content="{{ 'Current flight budget'|trans }}"></i>
                                                    </template>
                                                </td>
                                                <td><% flight.endDate %></td>
                                                <td><% amountWithCurrency(numberFormat(flight.budget, 0), campaign.currency) %></td>
                                                <td><% amountWithCurrency(numberFormat(flight.spend, 0), campaign.currency) %></td>
                                                <td><% numberFormat(flight.applies, 0) %></td>
                                                <td><% amountWithCurrency(numberFormat(flight.cpa, 2), campaign.currency) %></td>
                                                <td><% amountWithCurrency(numberFormat(flight.cpc, 2), campaign.currency) %></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-sm-12 d-flex justify-content-center">
                                    <span class="slider-icon active" @click="sliderFunction(campaign.id)">
                                        <i class="far fa-angle-down"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 px-0 my-2" v-show="!loading && filteredCampaigns.length > 10">
                            <div class="py-3 rounded-2 col-12 d-flex align-items-center">
                                <div class="pagination position-relative mr-3">
                                    <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}" @click="navigatePage('backward')"></i>
                                        <i class="pr-2 fal fa-chevron-left mr-2" :class="{disabled: page === 1}" @click="navigatePage('prev')"></i>
                                        <i class="pr-2 fal fa-chevron-right mr-2" :class="{disabled: page === nbrPages}" @click="navigatePage('next')"></i>
                                        <i class="fas fa-step-forward" :class="{disabled: page === nbrPages}" @click="navigatePage('forward')"></i>
                                    </div>
                                </div>
                                <span class="mr-3">{{ 'Rows by page' }} :</span>
                                <input-dropdown v-model="pageLimit"
                                                :id="'pagination-page-limit'"
                                                :data-list="pageLimitOptions"
                                                :init-value="pageLimit"
                                                style="width: 100px"></input-dropdown>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {####### CAMPAIGN SELECTION TOOLBAR  #######}
            <div class="bottom-bar-info fade-in-02" v-if="checkedCampaigns.length > 0">
                <div class="col-12 row py-4 px-4 bg-primary text-white bar-info mx-auto border-rounded-50 shadow-1 mb-4 fixed-bottom">
                    <div class="col-sm-4 d-flex justify-content-start align-items-center">
                        <span class="icon-circle mr-2 d-flex justify-content-center align-items-center" style="padding: unset;height: 27px;width: 27px;">
                            <% checkedCampaigns.length %>
                        </span>
                        <% Translator.transChoice('selected', checkedCampaigns.length, {count: checkedCampaigns.length}) %>
                        <div class="chips-bottom d-flex justify-content-between align-items-center ml-5 py-2 px-1 px-3" @click="resetSelectedCampaigns">
                            <i class="fal fa-times mr-1"></i>
                            <span class="ml-1">{{ 'reset'|trans }}</span>
                        </div>
                    </div>
                    <div class="col-sm-8 justify-content-end d-flex">
                        <div class="chips-bottom bg-info d-flex justify-content-between align-items-center py-2 px-3" @click="toggleExportModal('show')">
                            <i class="fal fa-external-link mr-1"></i>
                            <span class="ml-1">{{ 'Export'|trans }}</span>
                        </div>
                        <div v-if="showToolbarActionBtn('enable_auto_activate')" class="chips-bottom bg-success d-flex justify-content-between align-items-center ml-2 py-2 px-3" @click="updateAutoActivate(true, checkedCampaigns)">
                            <i class="fal fa-play-circle mr-1"></i>
                            <span class="ml-1">{{ 'Enable auto activation'|trans }}</span>
                        </div>
                        <div v-if="showToolbarActionBtn('disable_auto_activate')" class="chips-bottom d-flex justify-content-between align-items-center ml-2 py-2 px-3" @click="updateAutoActivate(false, checkedCampaigns)">
                            <i class="fal fa-pause-circle mr-1"></i>
                            <span class="ml-1">{{ 'Disable auto activation'|trans }}</span>
                        </div>
                        <div v-if="showToolbarActionBtn('activate')" class="chips-bottom bg-success d-flex justify-content-between align-items-center ml-2 py-2 px-3" @click="updateStatus(true, checkedCampaigns)">
                            <i class="fal fa-play-circle mr-1"></i>
                            <span class="ml-1">{{ 'Activate'|trans }}</span>
                        </div>
                        <div v-if="showToolbarActionBtn('pause')" class="chips-bottom d-flex justify-content-between align-items-center ml-2 py-2 px-3" @click="updateStatus(false, checkedCampaigns)">
                            <i class="fal fa-pause-circle mr-1"></i>
                            <span class="ml-1">{{ 'Pause'|trans }}</span>
                        </div>
                        <div v-if="showToolbarActionBtn('archive')" class="chips-bottom bg-warning d-flex justify-content-between align-items-center ml-2 py-2 px-3" @click="archiveModalAction('show')">
                            <i class="fal fa-archive mr-1"></i>
                            <span class="ml-1">{{ 'Archive'|trans }}</span>
                        </div>
                        <div v-if="showToolbarActionBtn('restore')" class="chips-bottom bg-success d-flex justify-content-between align-items-center ml-2 py-2 px-3" @click="restoreCampaignModalAction('show')">
                            <i class="fal fa-power-off mr-1"></i>
                            <span class="ml-1">{{ 'restore'|trans|capitalize }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <campaign-form ref="campaignForm"
                           :id-campaign="idCampaignShow"
                           :advertiser-id="advertiserId"
                           :advertiser-name="advertiserName"
                           :brief-list="briefList"
                           :id-brief="idBriefShow"
                           :path-campaign-get="pathCampaignGet"
                           :path-campaign-edit="pathCampaignEdit"
                           :path-campaign-new="pathCampaignNew"
                           :path-job-all-bids-update="pathJobAllBidsUpdate"
                           :path-brief-new-media="pathBriefNewMedia"
                           :path-campaign-ppc-label-create="pathCampaignPpcLabelCreate"
                           :path-task-create="pathTaskCreate"
                           :path-task-upload="pathTaskUpload"
                           :path-task-update="pathTaskUpdate"
                           :path-task-default-get="pathTaskDefaultGet"
                           :path-task-labels-get="pathTaskLabelsGet"
                           :path-task-user-list="pathTaskUserList"
                           :path-task-spend-time-add="pathTaskSpendTimeAdd"

                           :currencies="campaignFormInfos.currencyList"
                           :advertiser-currency="advertiserCurrency"
                           :job-group-list="campaignFormInfos.jobGroupList"
                           :country-list="campaignFormInfos.countryList"
                           :apply-modes="campaignFormInfos.applyModes"
                           :sponso-publisher-list="campaignFormInfos.sponsoPublisherList"
                           :algorithm-list="campaignFormInfos.algorithmList"
                           :adjustment-weight-list="campaignFormInfos.adjustmentWeightList"
                           :optibees-preset-profiles="campaignFormInfos.optibeesPresetProfiles"
                           :daf-instance-list="campaignFormInfos.dafInstanceList"
                           :brief-plan="briefPlanForCampaignForm"
                           :brief-plan-list="briefPlanList"
                           :label-list="campaignFormInfos.ppcLabels"
                           :role-backend="roleBackend"
                           :role-analytics="roleAnalytics"
                           :feed-label="campaignFormInfos.feedLabel"
                           id-commentary-field="{{ idCommentaryField }}"

                           @label-created="addNewLabel"
            ></campaign-form>

            <campaign-stats-panel ref="campaignStatsPanel"
                                  :id-campaign="idCampaignShow"
                                  :role-backend="roleBackend"
                                  :currencies="currencies"
                                  :jobgroups="jobGroups"
                                  :advertiser-currency="advertiserCurrency"
                                  :selected-period="selectedPeriod"
                                  :date-widget="dateWidgetSelected"
                                  :selected-by-period="selectedByPeriod"
                                  :brief-plan-list="briefPlanList"
                                  :path-campaign-conso-category-get="pathCampaignConsoCategoryGet"
                                  :path-campaign-conso-region-get="pathCampaignConsoRegionGet"
                                  :path-campaign-conso-dates-get="pathCampaignConsoDatesGet"
                                  :path-campaign-conso-agregators-get="pathCampaignConsoAgregatorsGet"
                                  :path-campaign-conso-job-get="pathCampaignConsoJobGet"
                                  :path-campaign-conso-mix-get="pathCampaignConsoMixGet"
                                  :path-campaign-stats-get="pathCampaignStatsGet"
                                  :path-campaign-bids-get="pathCampaignBidsGet"
                                  :path-campaign-bids-update="pathCampaignBidsUpdate"
                                  :path-campaign-new-comment="pathCampaignNewComment"
                                  :path-campaign-modify-comment="pathCampaignModifyComment"
            ></campaign-stats-panel>

            <task-list-panel id="taskListPanel"
                             ref="taskListPanel"
                             :title="Translator.trans('Campaign tasks')"
                             :tasks="filteredTasksForPanel"
                             :role-backend="roleBackend"
                             :path-task-update="pathTaskUpdate"
                             :path-task-spend-time-add="pathTaskSpendTimeAdd"
                             @task-updated="updateCampaignTasks"
            ></task-list-panel>

            <task-form id="taskForm"
                       ref="taskForm"
                       :advertiser-name="advertiserName"
                       :advertiser-id="advertiserId"
                       :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"
                       :default-tagged-user="taskDefaultTaggedUser"
                       @new-task-created="updateCampaignTasks"
            ></task-form>

            <div class="modal fade" id="confirm_archive" tabindex="-1" role="dialog" aria-labelledby="confirm_archive" aria-hidden="true" style="z-index: 99999;" data-backdrop="static">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header py-4 d-block border-0 bg-light">
                            <button type="button" class="close d-none" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title text-center border-0 text-primary font-700" id="myModalLabel">
                                <i class="fas fa-exclamation-triangle ml-2"></i>
                                <span>{{ 'Archive confirmation'|trans }}</span>
                            </h4>
                        </div>
                        <div class="modal-body justify-content-center p-5 d-flex">
                            <span class="text-danger">{{ 'Do you really want to archive'|trans }} <% checkedCampaigns.length > 1 ? Translator.trans('those campaigns') : Translator.trans('this campaign') %> ?</span>
                        </div>
                        <div class="modal-footer border-0 d-flex justify-content-center mb-3">
                            <button type="button" class="btn btn-danger rounded-30 mr-2 px-4" @click="archivedCampaign()">
                                {{ 'Archive'|trans }}</button>
                            <button type="reset" class="btn btn-light ml-5 px-4" data-dismiss="modal" @click="archiveModalAction('hide')">
                                {{ 'Cancel'|trans }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="confirm_restore" tabindex="-1" role="dialog" aria-labelledby="confirm_restore" aria-hidden="true" style="z-index: 99999;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header py-4 d-block border-0 bg-light">
                            <button type="button" class="close d-none" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title text-center border-0 text-primary font-700" id="myModalLabel">
                                <span>{{ 'Restore confirmation'|trans }}</span>
                            </h4>
                        </div>
                        <div class="modal-body p-5">
                            <p class="text-center text-primary mb-5">
                                <% Translator.transChoice('Choose the new status for the restored campaign', campaignToRestoreId === null ? 2 : 1, {'count' : campaignToRestoreId === null ? 2 : 1})  %>
                            </p>
                            <div class="d-flex justify-content-center align-items-center">
                                <button type="button" class="btn btn-success px-4" @click="restoreCampaign(true)">
                                    {{ 'activated'|trans|capitalize }}
                                </button>
                                <button type="button" class="btn btn-danger ml-5 px-4" @click="restoreCampaign(false)">
                                    {{ 'disabled'|trans|capitalize }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="export_file_type" tabindex="-1" role="dialog" aria-labelledby="exportFile" aria-hidden="true" style="z-index: 99999;" data-backdrop="static">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header py-4 d-block border-0 bg-light">
                            <h4 class="modal-title text-center border-0 text-primary font-700" id="myModalLabel">
                                <i class="fa fa-download mr-2"></i>
                                <span>{{ 'Campaigns export'|trans }}</span>
                            </h4>
                        </div>
                        <div class="modal-body justify-content-center p-5 d-flex">
                            <form id="exportDataForm" method="POST">
                                <div class="checkbox mt-3">
                                    <input class="inp-cbx" id="export_with_publisher" type="checkbox"
                                           style="display: none;"
                                           v-model="exportWithPublisher"/>
                                    <label class="cbx d-flex align-items-center" for="export_with_publisher">
                                    <span class="bg-white" style="margin-right: 9px;margin-left: 3px;">
                                        <svg width="10px" height="10px" viewbox="0 0 10 10"><polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg>
                                    </span>
                                        {{ 'Export data with publishers'|trans }}
                                    </label>
                                </div>

                                <div class="checkbox mt-3">
                                    <input class="inp-cbx" id="export_by_month" type="checkbox"
                                           style="display: none;"
                                           v-model="exportByMonth"/>
                                    <label class="cbx d-flex align-items-center" for="export_by_month">
                                    <span class="bg-white" style="margin-right: 9px;margin-left: 3px;">
                                        <svg width="10px" height="10px" viewbox="0 0 10 10"><polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg>
                                    </span>
                                        {{ 'Organize stats by month'|trans }}
                                    </label>
                                </div>
                                {% if is_granted('ROLE_SELF') %}
                                    <div class="checkbox mt-3">
                                        <input class="inp-cbx" id="export_by_job_duplicated" type="checkbox"
                                               style="display: none;"
                                               v-model="exportByJobDuplicated"/>
                                        <label class="cbx d-flex align-items-center" for="export_by_job_duplicated">
                                        <span class="bg-white" style="margin-right: 9px;margin-left: 3px;">
                                            <svg width="10px" height="10px" viewbox="0 0 10 10"><polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg>
                                        </span>
                                            {{ 'Show duplicated offers'|trans }}
                                        </label>
                                    </div>
                                {% endif %}
                                <div class="checkbox mt-3">
                                    <input class="inp-cbx" id="export_without_interaction" type="checkbox"
                                           style="display: none;"
                                           v-model="exportWithoutInteraction"/>
                                    <label class="cbx d-flex align-items-center" for="export_without_interaction">
                                    <span class="bg-white" style="margin-right: 9px;margin-left: 3px;">
                                        <svg width="10px" height="10px" viewbox="0 0 10 10"><polyline
                                                    points="1.5 6 4.5 9 10.5 1"></polyline></svg>
                                    </span>
                                        {{ 'Offers without interactions'|trans }}
                                    </label>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer border-0 d-flex justify-content-center mb-3">
                            <button type="button" class="btn btn-primary rounded-30 mr-2 px-4" @click="exportCampaign()">{{ 'Export'|trans }}</button>
                            <button type="reset" class="btn btn-light ml-5 px-4" data-dismiss="modal" @click="toggleExportModal('hide')">
                                {{ 'Close'|trans }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="history-modal" tabindex="-1" role="dialog" aria-labelledby="history-modal" aria-hidden="true">
                <div class="modal-dialog modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header py-4 d-block border-0 bg-light d-flex justify-content-between align-items-center">
                            <h4 class="modal-title">{{ 'Campaign history'|trans }}</h4>
                            <div class="slider-icon-group active ml-auto" style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);"
                                 @click="closeHistoryModal">
                                <div class="slider-icon">
                                    <i class="fal fa-times text-white"></i>
                                </div>
                            </div>
                        </div>
                        <div class="modal-body">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <span class="d-none invisible twig-data-advertiser-id" data-advertiser-id="{{ advertiser.id }}"></span>
        <span class="d-none invisible twig-data-advertiser-name" data-advertiser-name="{{ advertiser.name }}"></span>
        <span class="d-none invisible twig-data-advertiser-currency" data-advertiser-currency="{{ advertiser.currency|json_encode }}"></span>
        <span class="d-none invisible twig-data-advertiser-type" data-advertiser-type="{{ advertiser.type }}"></span>
        <span class="d-none invisible twig-data-currencies" data-currencies="{{ currencies|json_encode }}"></span>
        <span class="d-none invisible twig-data-jobgroups" data-jobgroups="{{ jobGroups|json_encode }}"></span>
        <span class="d-none invisible twig-data-brief-plan-list" data-brief-plan-list="{{ briefPlanList|json_encode }}"></span>
        <span class="d-none invisible twig-data-briefs" data-briefs="{{ briefs|json_encode }}"></span>
        <span class="d-none invisible twig-data-form-info" data-form-info="{{ campaignFormInfo|json_encode }}"></span>

        <span class="d-none invisible twig-data-role-self" data-role-self="{{ is_granted('ROLE_SELF') ? 1 : 0 }}"></span>
        <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-analytics" data-role-analytics="{{ is_granted('ROLE_ANALYTICS') ? 1 : 0 }}"></span>

        <span class="d-none invisible twig-data-path-advertiser-charts-overview-get" data-path-advertiser-charts-overview-get="{{ path('ajax_advertiser_charts_overview_get') }}"></span>
        <span class="d-none invisible twig-data-path-campaign-status-edit" data-path-campaign-status-edit="{{ path('ajax_campaign_status_edit', {advertiser: advertiser.id}) }}"></span>
        <span class="d-none invisible twig-data-path-campaign-auto-activate-edit" data-path-campaign-auto-activate-edit="{{ path('ajax_campaign_auto_activate_edit', {advertiser: advertiser.id}) }}"></span>

        <span class="d-none invisible twig-data-path-campaign-list" data-path-campaign-list="{{ path('ajax_campaign_list', {advertiser: advertiser.id}) }}"></span>
        <span class="d-none invisible twig-data-path-campaign-get" data-path-campaign-get="{{ path('ajax_campaign_get', {advertiser: advertiser.id, campaign: ':cid'}) }}"></span>
        <span class="d-none invisible twig-data-path-campaign-edit" data-path-campaign-edit="{{ path('ajax_campaign_edit', { 'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-campaign-new" data-path-campaign-new="{{ path('ajax_campaign_new', {advertiser: advertiser.id }) }}"></span>

        <span class="d-none invisible twig-data-path-job-all-bids-update" data-path-job-all-bids-update="{{ path('ajax_job_all_bids_update', { campaign: ':cid' }) }}"></span>
        <span class="d-none invisible twig-data-path-bids-get" data-path-bids-get="{{ path('ajax_campaign_jobs_bids', {campaign: ':cid' }) }}"></span>
        <span class="d-none invisible twig-data-path-bids-update" data-path-bids-update="{{ path('ajax_campaign_jobs_bids_update', {campaign: ':cid' }) }}"></span>

        <span class="d-none invisible twig-data-path-new-comment" data-path-new-comment="{{ path('ajax_campaign_new_macro_comment', {campaign: ':cid' }) }}"></span>
        <span class="d-none invisible twig-data-path-modify-comment" data-path-modify-comment="{{ path('ajax_campaign_modify_macro_comment', {campaign: ':cid' }) }}"></span>

        <span class="d-none invisible twig-data-path-campaign-archive" data-path-campaign-archive="{{ path('ajax_campaign_archive', {advertiser: advertiser.id}) }}"></span>
        <span class="d-none invisible twig-data-path-campaign-stats-get" data-path-campaign-stats-get="{{ path('ajax_campaign_stats_get', { advertiser: advertiser.id, campaign: ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-campaign-conso-category-get" data-path-campaign-conso-category-get="{{ path('ajax_campaign_conso_category_get', {'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-campaign-conso-region-get" data-path-campaign-conso-region-get="{{ path('ajax_campaign_conso_region_get', {'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-campaign-conso-dates-get" data-path-campaign-conso-dates-get="{{ path('ajax_campaign_conso_dates_get', {'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-campaign-conso-agregators-get" data-path-campaign-conso-agregators-get="{{ path('ajax_campaign_conso_agregators_get', {'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-campaign-conso-job-get" data-path-campaign-conso-job-get="{{ path('ajax_campaign_conso_job_get', {'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-campaign-conso-mix-get" data-path-campaign-conso-mix-get="{{ path('ajax_advertiser_conso_mix_get', {'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>

        <span class="d-none invisible twig-data-path-campaign-report" data-path-campaign-report="{{ path('ajax_campaign_report', {'advertiser': advertiser.id}) }}"></span>
        <span class="d-none invisible twig-data-path-campaign-ppc-label-create" data-path-campaign-ppc-label-create="{{ path('ajax_campaign_ppcLabel_create', {'advertiser': advertiser.id}) }}"></span>
        <span class="d-none invisible twig-data-path-campaign-history" data-path-campaign-history="{{ path('ajax_campaign_history', {'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>

        <span class="d-none invisible twig-data-path-brief" data-path-brief="{{ path('advertiser_oi_index', {'advertiser': advertiser.id }) }}"></span>
        <span class="d-none invisible twig-data-path-current-route" data-path-current-route="{{ path(routeName, {'advertiser': advertiser.id, 'brief': ':bid' }) }}"></span>

        <span class="d-none invisible twig-data-path-task-create" data-path-task-create="{{ path('ajax_task_create') }}"></span>
        <span class="d-none invisible twig-data-path-task-upload" data-path-task-upload="{{ path('ajax_task_upload') }}"></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-default-get" data-path-task-default-get="{{ path('ajax_task_default_get') }}"></span>
        <span class="d-none invisible twig-data-path-task-labels-get" data-path-task-labels-get="{{ path('ajax_task_labels_get') }}"></span>
        <span class="d-none invisible twig-data-path-task-user-list" data-path-task-user-list="{{ path('ajax_task_user_list') }}"></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>
    </main>
{% endblock %}

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