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

{% block body %}
    <div id="selfCampaigns" v-cloak>
        <main class="row main mx-0 fade-in" id="main-content">
            <section class="content-area p-r-l-6">
                <div class="col-12 main-data-table px-0 mb-2">
                    <div class="data-table-headers px-0 pb-4 mb-4 container-fluid rounded-2 page-header">
                        <p class="pb-2 text-primary">
                            {{ 'Create, edit, manage and compare your campaigns'|trans }}
                        </p>
                        <div class="border-bottom position-relative">
                            <button type="button" :class="[campaignTypeSwitch === 'self' ? 'active' : '', !userRoles.includes('ROLE_SELF') && !userRoles.includes('ROLE_BACKEND') ? 'disabled' : '', 'btn-tab']"
                                    id="allDirect" @click="(userRoles.includes('ROLE_SELF') || userRoles.includes('ROLE_BACKEND')) && switchPanel('active', 'self')">
                                {{ 'Campaigns'|trans }} Golden Bees </button>
                            <button type="button" :class="[campaignTypeSwitch === 'direct' ? 'active' : '', !userRoles.includes('ROLE_ANALYTICS') && !userRoles.includes('ROLE_BACKEND') ? 'disabled' : '', 'btn-tab ml-4']"
                                    id="allDirect" @click="(userRoles.includes('ROLE_ANALYTICS') || userRoles.includes('ROLE_BACKEND')) && switchPanel('active', 'direct')"
                                    data-tippy-allowHTML="false"
                                    {% if is_granted('ROLE_ANALYTICS') == false %}
                                        data-tippy-content="{{ 'Contact your GoldenBees account manager to activate this feature'|trans }}"
                                    {% endif %}
                            >
                                {{ 'External campaigns'|trans }}</button>
                        </div>
                    </div>
                </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="'campaignsOverview'"
                        :loading="loading"
                        :date-widget-period="dateWidgetSelected"
                        :selected-period="selectedPeriod"
                        :selected-by-period="selectedByPeriod"
                        :model-config="modelConfig"
                        :mode-date-picker="modeDatePicker"
                        @select-period="selectPeriod"
                        @select-by-period="selectByPeriod"
                        class="mt-0"
                        key="main-selector"></date-selector>
                        
                        <button type="button" @click="changeChartKPI('overview', 'spend')"
                                :class="[selectedChartKPI.overview.includes('spend') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            {{ 'Spend'|trans }}
                        </button>
                        <button type="button" @click="changeChartKPI('overview', 'applies')"
                                :class="[selectedChartKPI.overview.includes('applies') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            {{ 'Applies'|trans }}
                        </button>
                        <button type="button" @click="changeChartKPI('overview', 'clic')"
                                :class="[selectedChartKPI.overview.includes('clic') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            {{ 'Clicks'|trans }}
                        </button>
                        <button type="button" @click="changeChartKPI('overview', 'cpa')"
                                :class="[selectedChartKPI.overview.includes('cpa') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            CPA
                        </button>
                        <button type="button" @click="changeChartKPI('overview', 'cpc')"
                                :class="[selectedChartKPI.overview.includes('cpc') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            CPC
                        </button>
                        <button type="button" @click="changeChartKPI('overview', 'cr')"
                                :class="[selectedChartKPI.overview.includes('cr') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                            CR
                        </button>
                    </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>
                </div>

                <div class="col-12 main-data-table px-0">
                    <div class="main-data-table-content mb-5 pb-3">
                        <div class="col-12 bg-white py-4 rounded-2 my-auto d-flex justify-content-between">
                            <div class="col-6 px-0 d-flex my-auto">
                                <span :class="[activeCampaignSwitch !== 'active' ? 'chips_purple cursor-pointer' : 'bg-white text-primary']"
                                      class="chips px-4 py-3 font-weight-bold d-flex my-auto border mr-2"
                                      id="allCampaigns"
                                      @click="switchPanel('active', campaignTypeSwitch)">
                                    {{ 'All campaigns'|trans }}
                                </span>
                                <span :class="[activeCampaignSwitch !== 'archived' ? 'chips_purple cursor-pointer' : 'bg-white text-primary']"
                                      class="chips px-4 py-3 font-weight-bold d-flex my-auto border"
                                      id="allArchived"
                                      @click="switchPanel('archived', campaignTypeSwitch)">
                                    <% archivedCampaigns.length %> <% archivedCampaigns.length > 0 ? '{{ 'archived++'|trans }}' : '{{ 'archived'|trans }}' %>
                                </span>
                                <span class="px-4 py-3 title-page" style="display: contents;" v-show="campaignTypeSwitch === 'self'">
                                    <b class="pl-4 pr-2 d-flex my-auto">
                                        <template v-if="selectedPeriod.key !== 'specific'">
                                            <% selectedPeriod.label %>
                                        </template>
                                        <template v-else>
                                            <i class="d-flex my-auto"> (<% formatDate(dateWidgetSelected.start) %> - <% formatDate(dateWidgetSelected.end) %>)</i>
                                        </template>
                                    </b>
                                </span>
                            </div>
                            <div class="col-6 d-flex justify-content-end align-items-center data-table-headers">
                                <div class="section-search text-right mt-xs-3 flex-grow-1">
                                    <div class="w-75 px-0 d-inline-block">
                                        <div class="input-group campaign-search">
                                            <input id="searchAdv"
                                                   type="search" class="form-control border"
                                                   aria-controls="search-table"
                                                   placeholder="{{ 'Search'|trans }}" v-model="campaignSearch">
                                            <span class="input-group-append">
                                                <button class="btn btn-outline-secondary" type="button">
                                                    <i class="fal fa-search"></i>
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <template v-if="advertiserType === 'self'">
                                    <button class="btn btn-warning text-white rounded-30 ml-3 px-3 d-flex align-items-center" @click="openCampaign()">
                                        {{ 'New campaign'|trans }}
                                        <i class="fal fa-plus ml-2"></i>
                                    </button>
                                </template>
                                <template v-else>
                                    <span data-tippy-content="{{ 'Contact your GoldenBees account manager to activate this feature'|trans }}">
                                         <button class="disabled btn btn-warning text-white rounded-30 ml-3 px-3 d-flex align-items-center" disabled>
                                            {{ 'New campaign'|trans }}
                                            <i class="fal fa-plus ml-2"></i>
                                        </button>
                                    </span>
                                </template>
                            </div>
                        </div>
                        {#   ACTIVE CAMPAIGNS  #}
                        <template v-if="activeCampaignSwitch === 'active'">
                            <div class="main-data-table-line col-12 rounded-2 mt-2 py-4 table-headers" style="box-shadow: none; background-color: rgba(235, 239, 248, 0.55);">
                                <div class="col-12 row px-0 mx-0">
                                    <div :class="[campaignTypeSwitch === 'direct' ? 'col-md-3' : 'col-md-2', 'd-flex justify-content-start align-items-center pl-0']">
                                        <div class="checkbox my-auto mr-4">
                                            <input class="inp-cbx" id="checkAll" type="checkbox"
                                                   style="display: none;"  @click="checkAll"
                                                   v-model="allCampaignsChecked" @change="checkAll"/>
                                            <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>
                                        <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>
                                    <div class="col-md-2 px-1 text-center overflow-hidden text-ellipsis" v-if="campaignTypeSwitch === 'self'">
                                        <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 border-left">#}
{#                                        <span class="cursor-pointer font-700" data-tippy-content="{{ 'Budget for a campaign'|trans }}" @click="orderCampaign('budget', 'Number')">{{ 'Budget'|trans }}</span>#}
{#                                    </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'|trans }}</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="campaignTypeSwitch === 'self'
                                        ? '{{ 'All Jobs for a campaign'|trans }}' : '{{ 'All jobs with minimum one click or one application' |trans}}'" @click="orderCampaign('jobs', 'Number')">{{ 'Jobs'|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-md-1 px-1 overflow-hidden text-ellipsis">
                                        <span class="cursor-pointer font-700 pl-2" data-tippy-content="{{ 'Campaign can be active or inactive'|trans }}" @click="orderCampaign('status', 'Number')">{{ 'Active'|trans }}</span>
                                        <i class="fa small column-sorter"
                                           @click="orderCampaign('status', 'Number')"
                                           style="left: 55%;"
                                           :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>
                            </div>
                            <div v-if="campaignTypeSwitch === 'self' ? campaigns.length > 0 : directCampaigns.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 px-0 mx-0">
                                    <div :class="[campaignTypeSwitch === 'direct' ? 'col-md-3' : 'col-md-2', 'd-flex justify-content-start align-items-center pl-0']">
                                        <span class="font-700" style="padding-left: 36px;">{{ 'Total'|trans }}</span>
                                    </div>
                                    <div class="col-md-2 px-0 text-center border-left" v-if="campaignTypeSwitch === 'self'">
                                        <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.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-md-1 border-left"></div>
                                </div>
                            </div>
                            <div v-if="campaignTypeSwitch === 'self' ? !(campaigns.length > 0) && !loading : !(directCampaigns.length > 0) && !loading">
                                <div class="alert alert-info mt-4 text-center border-0">
                                    {{ 'No campaign launched'|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 px-0 mx-0">
                                        <div :class="[campaign.type === 'direct' ? 'col-md-3' : 'col-md-2 border-right', 'campaign-name pl-0 d-flex justify-content-start align-items-center my-auto']">
                                            <div class="checkbox my-auto mr-4">
                                                <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>
                                            <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-content="`<span style='word-break: break-all;'>${campaign.name}</span>`"
                                                  @click="showCampaign(campaign.id, campaign.name)"><% campaign.name %></span>
                                        </div>
                                        <div class="my-auto col-md-2 px-0 overflow-auto d-flex justify-content-center" v-if="campaignTypeSwitch === 'self'">
                                            <div v-if="numberFormat(campaign.currSpend,0) !== null" class="d-inline-block w-75" style="max-width: 150px;">
                                                <div class="progress" style="height: 7px;"
                                                     :data-tippy-content="numberFormat(campaign.currSpendPercent, 2) + ' %'"
                                                     data-tippy-placement="left-end">
                                                    <div data-percentage="0%"
                                                         :style="{ width: numberFormat(campaign.currSpendPercent,0,'en-GB') + '%', backgroundColor: progressChartColor(numberFormat(campaign.currSpendPercent,0,'en-GB')) }" aria-valuenow=""
                                                         class="progress-bar"
                                                         role="progressbar"
                                                         aria-valuemin="0"
                                                         aria-valuemax="100"
                                                         :data-value="numberFormat(campaign.currSpendPercent,0,'en-GB')">
                                                    </div>
                                                </div>
                                                <div class="mt-2">
                                                    <span style="font-size: 12px;" class="font-700"><% amountWithCurrency(numberFormat(campaign.currSpend, 0), campaign.currency) %> / <% amountWithCurrency(numberFormat(campaign.currBudget, 0), campaign.currency) %></span>
                                                    <small style="font-size: 10px;" class="font-italic font-600 text-capitalize text-info text-monospace d-table chips_purple mt-1">
                                                        <% campaign.daysLeft <= 0 ? '{{ 'Finished'|trans }}'
                                                        : campaign.daysLeft + ' {{ 'days left'|trans }}' %></small>
                                                </div>
                                            </div>
                                        </div>
                                        {#                                            <div class="my-auto col-md-1 text-center border-left">#}
                                        {#                                                <span><% amountWithCurrency(numberFormat(campaign.budget, 2), 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-between align-items-center col-md-1">
                                            <div class="custom-switch d-flex justify-content-center ml-sm-2" style="margin-top: -15px;">
                                                <input type="checkbox" class="custom-control-input" :id="'campaignSwitch-' + campaign.id ">
                                                <label class="custom-control-label-campaign small d-block mt-auto" :for="'campaignSwitch-' + campaign.id" :class="{ inactive: !campaign.status }" @click="changeCampaignStatus(campaign)">
                                                </label>
                                            </div>
                                        </div>
                                        <div class="my-auto d-flex justify-content-around px-0" :class="[campaignTypeSwitch === 'direct' ? 'ml-auto' : 'col-md-1']">
                                            <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" @click="modifyCampaign(campaign.id)">
                                                <i class="fal fa-pen"></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" @click="showCampaign(campaign.id, campaign.name)">
                                                <i class="fal fa-eye"></i>
                                            </span>
                                            <a :href="campaign.feedLink" target="_blank" v-if="campaignTypeSwitch === 'direct'" class="span-icon small cursor-pointer d-flex justify-content-center align-items-center" data-tippy-content="{{ 'Show feed link'|trans }}" style="width: 30px; height: 30px">
                                                <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="showHistories(campaign.id)" :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">{{ 'Applies'|trans }}</th>
                                                        <th scope="col">CPA</th>
                                                        <th scope="col">CPC</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr v-for="flight in campaign.flights">
                                                        <td><% flight.startDate %></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'|trans|capitalize }} <b><% pageCurrent %></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: pageCurrent === 1}" @click="navigatePage('backward', 'active')"></i>
                                                <i class="pr-2 fal fa-chevron-left mr-2" :class="{disabled: pageCurrent === 1}" @click="navigatePage('prev', 'active')"></i>
                                                <i class="pr-2 fal fa-chevron-right mr-2" :class="{disabled: pageCurrent === nbrPages}" @click="navigatePage('next', 'active')"></i>
                                                <i class="fas fa-step-forward" :class="{disabled: pageCurrent === nbrPages}" @click="navigatePage('forward', 'active')"></i>
                                            </div>
                                        </div>
                                        <template v-show="filteredCampaigns.length > 10">
                                            <span class="mr-3">{{ 'Rows by page'|trans }}:</span>
                                            <input-dropdown v-model="pageLimit"
                                                            :id="'pagination-page-limit-active'"
                                                            :data-list="pageLimitOptions"
                                                            :init-value="pageLimit"
                                                            :dropdown-position="'top'"
                                                            style="width: 100px"/>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </template>
                        {#  ARCHIVED CAMPAIGNS  #}
                        <template v-if="activeCampaignSwitch === 'archived'">
                            <div class="main-data-table-line col-12 rounded-2 mt-2 py-4 table-headers d-flex cursor-default" style="box-shadow: none; background-color: rgba(235, 239, 248, 0.55);">
                                <div class="col-12 row px-0 mx-0">
                                    <div class="col-md-2 d-flex justify-content-start align-items-center pl-0">
                                        <div class="checkbox my-auto mr-4">
                                            <input class="inp-cbx" id="checkAll" type="checkbox"
                                                   style="display: none;"  @click="checkAll"
                                                   v-model="allCampaignsChecked" @change="checkAll"/>
                                            <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>
                                        <span><b class="cursor-pointer" @click="orderCampaign('name', 'String')">{{ 'Campaigns'|trans }} {{ 'archived++'|trans }}</b></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>
                                    <div class="col px-1 text-center overflow-hidden text-ellipsis">
                                        <span><b class="cursor-pointer" data-tippy-content="{{ 'Total spend / Budget by campaign'|trans }}" @click="orderCampaign('totalSpendPercent', 'Number')">{{ 'Budget'|trans }}</b></span>
                                        <i class="fa small column-sorter"
                                           @click="orderCampaign('totalSpendPercent', 'Number')"
                                           :class="{'fa-sort-alt': campaignsOrder.option !== 'totalSpendPercent',
                                               'fa-sort-amount-down-alt': campaignsOrder.option === 'totalSpendPercent' && campaignsOrder.direction === 'ASC',
                                               'fa-sort-amount-down': campaignsOrder.option === 'totalSpendPercent' && campaignsOrder.direction === 'DESC'}">
                                        </i>
                                    </div>
{#                                    <div class="col px-1 text-center overflow-hidden text-ellipsis border-left">#}
{#                                        <span><b class="cursor-pointer" data-tippy-content="{{ 'Budget for a campaign' |trans}}" @click="orderCampaign('budget', 'Number')">{{ 'Budget'|trans }}</b></span>#}
{#                                    </div>#}
                                    <div class="col px-1 text-center overflow-hidden text-ellipsis pr-3">
                                        <span><b class="cursor-pointer" data-tippy-content="{{ 'Already used expense for a campaign'|trans }}" @click="orderCampaign('spend', 'Number')">{{ 'Spend'|trans }}</b></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 px-1 text-center overflow-hidden text-ellipsis pr-3">
                                        <span><b class="cursor-pointer" data-tippy-content="{{ 'All applications for a campaign'|trans }}" @click="orderCampaign('applies', 'Number')">{{ 'Applies'|trans }}</b></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 overflow-hidden text-ellipsis">
                                        <span><b class="cursor-pointer" data-tippy-content="{{ 'Spend per application for a campaign'|trans }}" @click="orderCampaign('cpa', 'Number')">CPA</b></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 overflow-hidden text-ellipsis">
                                        <span><b class="cursor-pointer" data-tippy-content="{{ 'Spend per click for a campaign' |trans}}" @click="orderCampaign('cpc', 'Number')">CPC</b></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 overflow-hidden text-ellipsis">
                                        <span><b class="cursor-pointer" data-tippy-content="{{ 'Percentage of applies by clicks'|trans }}" @click="orderCampaign('cr', 'Number')">CR</b></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><b class="cursor-pointer" data-tippy-content="{{ 'All Jobs for a campaign'|trans }}" @click="orderCampaign('jobs', 'Number')">{{ 'Jobs'|trans }}</b></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-md-1 px-1">
                                    </div>
                                </div>
                            </div>
                            <div v-if="archivedCampaigns.length > 0" id="row-total-archive" 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 px-0 mx-0">
                                    <div class="col-md-2 d-flex justify-content-start align-items-center pl-0 border-right">
                                        <span style="padding-left: 36px;"><b>{{ 'Total'|trans }}</b></span>
                                    </div>
                                    <div class="col px-0 text-center">
                                        <span><b><% amountWithCurrency(totalArchivedCampaigns.totalSpend, advertiserCurrency) %> / <% amountWithCurrency(totalArchivedCampaigns.budget, advertiserCurrency) %></b></span>
                                    </div>
{#                                    <div class="col px-1 text-center border-left">#}
{#                                        <span><b><% amountWithCurrency(totalArchivedCampaigns.budget, advertiserCurrency) %></b></span>#}
{#                                    </div>#}
                                    <div class="col px-1 text-center border-left">
                                        <span><b><% amountWithCurrency(totalArchivedCampaigns.spend, advertiserCurrency) %></b></span>
                                    </div>
                                    <div class="col px-1 text-center border-left">
                                        <span><b><% totalArchivedCampaigns.applies %></b></span>
                                    </div>
                                    <div class="col-md-1 px-1 text-center border-left">
                                        <span><b><% amountWithCurrency(totalArchivedCampaigns.cpa, advertiserCurrency) %></b></span>
                                    </div>
                                    <div class="col-md-1 px-1 text-center border-left">
                                        <span><b><% amountWithCurrency(totalArchivedCampaigns.cpc, advertiserCurrency) %></b></span>
                                    </div>
                                    <div class="col-md-1 px-1 text-center border-left">
                                        <span><b><% totalArchivedCampaigns.cr %> %</b></span>
                                    </div>
                                    <div class="col-md-1 px-1 text-center border-left">
                                        <span><b><% totalArchivedCampaigns.jobs %></b></span>
                                    </div>
                                    <div class="col-md-1 px-1">
                                    </div>
                                </div>
                            </div>
                            <div v-if="!(archivedCampaigns.length > 0)">
                                <div class="alert alert-info mt-4 text-center border-0">
                                    {{ 'No campaign archived'|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 archivedCampaignsPagination" v-if="currentIndex < pageLimit">
    
                                    <div class="col-sm-12 main-line-content row px-0 mx-0">
                                        <div class="col-md-2 campaign-name pl-0 d-flex justify-content-start align-items-center my-auto border-right">
                                            <div class="checkbox my-auto mr-4">
                                                <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>
                                            <span class="font-500 text-truncate d-block"
                                                  :data-tippy-content="`<span style='word-break: break-all;'>${campaign.name}</span>`">
                                                    <% campaign.name %>
                                                </span>
                                        </div>
                                        <div class="my-auto col px-0 overflow-auto d-flex justify-content-center">
                                            <div v-if="numberFormat(campaign.totalSpend,0) !== null" class="d-inline-block w-75" style="max-width: 150px;">
                                                <div class="progress" style="height: 7px;" id="progressBar"
                                                     :data-tippy-content="numberFormat(campaign.totalSpendPercent, 2) + ' %'"
                                                     data-tippy-placement="left-end">
                                                    <div data-percentage="0%" :style="{ width: numberFormat(campaign.totalSpendPercent,0,'en-GB') + '%', backgroundColor: progressChartColor(numberFormat(campaign.totalSpendPercent,0,'en-GB')) }" aria-valuenow=""
                                                         class="progress-bar"
                                                         role="progressbar"
                                                         aria-valuemin="0"
                                                         aria-valuemax="100"
                                                         :data-value="numberFormat(campaign.totalSpendPercent,0,'en-GB')">
                                                    </div>
                                                </div>
                                                <div class="mt-2">
                                                    <span style="font-size: 12px;" class="font-700"><% amountWithCurrency(numberFormat(campaign.totalSpend, 0), campaign.currency) %> / <% amountWithCurrency(numberFormat(campaign.budget, 0), campaign.currency) %></span>
                                                    <small style="font-size: 10px;" class="font-italic font-600 text-capitalize text-info text-monospace d-table chips_purple mt-1">
                                                        <% campaign.daysLeft <= 0 ? '{{ 'Finished'|trans }}'
                                                        : campaign.daysLeft + ' {{ 'days left'|trans }}' %>
                                                    </small>
                                                </div>
                                            </div>
                                        </div>
                                        {#                                            <div class="my-auto col px-1 text-center border-left">#}
                                        {#                                                <span><% amountWithCurrency(numberFormat(campaign.budget, 2), campaign.currency) %></span>#}
                                        {#                                            </div>#}
                                        <div class="my-auto col px-1 text-center border-left">
                                            <span><% amountWithCurrency(numberFormat(campaign.spend, 0), campaign.currency) %></span>
                                        </div>
                                        <div class="my-auto col px-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">
                                            <span class=""><% numberFormat(campaign.jobs, 0) %></span>
                                        </div>
                                        <div class="my-auto d-flex justify-content-around col-md-1 px-0">
                                            <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" @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 align-items-center justify-content-center" data-tippy-content="{{ 'Show history'|trans }}" style="width: 30px; height: 30px" @click="showHistories(campaign.id)" :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-sm-12 d-flex mt-3 flight-budget">
                                            <div class="col-sm-12 d-flex mt-3">
                                                <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">{{ 'Applies'|trans }}</th>
                                                            <th scope="col">CPA</th>
                                                            <th scope="col">CPC</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr v-for="flight in campaign.flights">
                                                            <td><% flight.startDate %></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>
                                        <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="filteredCampaignsArchived.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'|trans|capitalize }} <b><% pageCurrent %></b> {{ 'page of'|trans }} <% nbrPagesArchivedCampaign %></span>
                                            <div class="fade-in-02 d-flex" v-if="nbrPagesArchivedCampaign > 1">
                                                <i class="pr-2 fas fa-step-backward mr-2" :class="{disabled: pageCurrent === 1}" @click="navigatePage('backward', 'archived')"></i>
                                                <i class="pr-2 fal fa-chevron-left mr-2" :class="{disabled: pageCurrent === 1}" @click="navigatePage('prev', 'archived')"></i>
                                                <i class="pr-2 fal fa-chevron-right mr-2" :class="{disabled: pageCurrent === nbrPagesArchivedCampaign}" @click="navigatePage('next', 'archived')"></i>
                                                <i class="fas fa-step-forward" :class="{disabled: pageCurrent === nbrPagesArchivedCampaign}" @click="navigatePage('forward', 'archived')"></i>
                                            </div>
                                        </div>
                                        <template v-show="filteredCampaignsArchived.length > 10">
                                            <span class="mr-3">{{ 'Rows by page'|trans }}:</span>
                                            <input-dropdown
                                                v-model="pageLimit"
                                                :id="'pagination-page-limit-archived'"
                                                :data-list="pageLimitOptions"
                                                :init-value="pageLimit"
                                                :dropdown-position="'top'"
                                                style="width: 100px"/>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <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>
                            <% selectedTrans %>
                            <div class="chips-bottom d-flex justify-content-between align-items-center ml-5 py-2 px-1 px-3" @click="resetSelectCampaigns(checkedCampaigns)">
                                <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" v-if="activeCampaignSwitch === 'active'">
                            <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" title="mark as read">{{ 'Export'|trans }}</span>
                            </div>
                            <div class="chips-bottom bg-success d-flex justify-content-between align-items-center ml-2 py-2 px-3" @click="updateStatusMultipleCampaigns(true)">
                                <i class="fal fa-power-off mr-1"></i>
                                <span class="ml-1" title="mark as read">{{ 'Activate'|trans }}</span>
                            </div>
                            <div class="chips-bottom d-flex justify-content-between align-items-center ml-2 py-2 px-3" @click="updateStatusMultipleCampaigns(false)">
                                <i class="fal fa-times-circle mr-1"></i>
                                <span class="ml-1" title="mark as read">{{ 'Disable'|trans }}</span>
                            </div>
                            <div class="chips-bottom pink d-flex justify-content-between align-items-center ml-2 py-2 px-3" @click="archiveModalAction('show')">
                                <i class="far fa-trash-alt mr-1"></i>
                                <span class="ml-1" title="delete">{{ 'Archive'|trans }}</span>
                            </div>
                        </div>
                        <div class="col-sm-8 justify-content-end d-flex" v-if="activeCampaignSwitch === 'archived'">
                            <div 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" title="mark as read">{{ 'restore'|trans|capitalize }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        {# Form for adding / edit a campaign #}
        <transition name="slide-right">
            <div class="bg-white form-campaign px-5 pt-4 pb-5 active" id="newCampaign" v-if="showCampaignDetailPanel">
                <div class="small-loader" style="display: none;"></div>
                <div class="cover-white bg-white h-100 w-100 position-fixed opacity-06" style="z-index: 9998; display: none; overflow: unset;" id="cover-white"></div>
                <div class="w-100">
{#                    <template v-if="errorForm.length > 0">#}
{#                        <div class="alert alert-danger text-danger position-fixed px-5 text-center mr-3" v-for="error in errorForm" style="z-index: 9999; top: 1rem">#}
{#                            <i class="fa fa-exclamation-triangle"></i>#}
{#                            <span class="font-600"> <% error %></span>#}
{#                            <i class="fal fa-times text-dark position-absolute cursor-pointer" style="top: 1rem; right: 1rem" @click="errorForm = []"></i>#}
{#                        </div>#}
{#                    </template>#}
                    <div class="header d-flex flex-column pl-2 mb-5">
                        <div v-show="!loading" class="slider-icon-group active ml-auto" style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);" @click="closeSideModal('newCampaign')">
                            <div class="slider-icon">
                                <i class="fal fa-times text-white"></i>
                            </div>
                        </div>
                        <div class="title mt-3">
                            <template v-if="campaignMode === 'new'">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     width="21.429" height="15" viewBox="0 0 21.429 15">
                                    <path id="Icon_material-playlist-add"
                                          data-name="Icon material-playlist-add"
                                          d="M15.857,13.286H3v2.143H15.857Zm0-4.286H3v2.143H15.857Zm4.286,8.571V13.286H18v4.286H13.714v2.143H18V24h2.143V19.714h4.286V17.571ZM3,19.714h8.571V17.571H3Z"
                                          transform="translate(-3 -9)"
                                          fill="#1d446b"
                                          opacity="0.89"
                                    />
                                </svg>
                                <span class="ml-3 text-secondary"><% campaignTypeSwitch === 'direct' ? '{{ 'New external campaign'|trans }}' : '{{ 'New campaign'|trans }}' %></span>
                            </template>
                            <template v-else>
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
                                     id="mdi-playlist-edit" width="21.429" height="22" viewBox="0 0 21.429 15">
                                    <path transform="translate(-3 -9)"
                                          fill="#1d446b"
                                          opacity="0.89"
                                          d="M2,6V8H14V6H2M2,10V12H14V10H2M20.04,10.13C19.9,10.13 19.76,10.19 19.65,10.3L18.65,11.3L20.7,13.35L21.7,12.35C21.92,12.14 21.92,11.79 21.7,11.58L20.42,10.3C20.31,10.19 20.18,10.13 20.04,10.13M18.07,11.88L12,17.94V20H14.06L20.12,13.93L18.07,11.88M2,14V16H10V14H2Z" />
                                </svg>
                                <span class="ml-3 text-secondary">{{ 'Modify'|trans }} : <b><% newCampaignDetails.campaign.name %></b></span>
                            </template>
                        </div>
                    </div>
                    <div class="body-form mt-2" v-if="Object.keys(newCampaignDetails).length > 0">
                        <div class="step-1" id="step-1" v-if="formStep === 1">
                            <div class="title-step d-flex align-items-center">
                                <div class="slider-icon-group active cursor-default" style="top: unset; left: unset; transform: unset; background-color: #E2AF17;">
                                    <div class="slider-icon cursor-default">
                                        <span class="text-white font-weight-bold">1</span>
                                    </div>
                                </div>
                                <div class="title-text text-primary font-700 ml-3">
                                    {{ 'Globals Informations'|trans }}
                                </div>
                            </div>
                            <div class="body-step">
                                <div class="d-flex ml-4 mt-4">
                                    <div class="col pl-4 pr-0">
                                        <div class="form-label-group position-relative input-login">
                                            <label for="name" class="labelInput focusInput font-500">{{ 'Name'|trans }}</label>
                                            <input type="text" id="name" name="_name"
                                                   class="form-control no-placeholder"
                                                   v-model="newCampaignDetails.campaign.name" placeholder="{{ 'Campaign name'|trans }}" required="">
                                        </div>
                                    </div>
                                    <template v-if="campaignMode === 'new'">
                                        <div class="col col-3">
                                            <div class="form-label-group position-relative input-login">
                                                <label for="budget" class="labelInput focusInput font-500">{{ 'Budget'|trans }} <% currency.symbole %>
                                                    <b v-if="currency.codeIso != '' ">( <% currency.codeIso %> )</b>
                                                </label>
                                                <input type="number" id="budget" name="_budget" class="form-control no-placeholder"
                                                       v-model="newCampaignDetails.campaign.budget" placeholder="{{ 'Total budget'|trans }}" required="">
                                            </div>
                                        </div>
                                
                                        <div class="col pl-0" v-if="campaignTypeSwitch === 'self'">
                                            <div class="form-label-group position-relative input-currency">
                                                <input-dropdown
                                                    v-model="currency"
                                                    label="{{ 'Select a currency'|trans }}"
                                                    :data-list="currencies"
                                                    :init-value="currency?.codeIso"
                                                    :return-raw-option="true"
                                                    :props-return-value="'codeIso'"
                                                    id="currencySelector"
                                                >
                                                    <template v-slot:default="slotProps">
                                                        <span><% slotProps.listElement.name %> <b><% slotProps.listElement.codeIso %></b></span>
                                                    </template>
                                                </input-dropdown>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                        
                                <div class="d-flex ml-4 mt-4 flex-column" v-if="campaignMode === 'edit'">
                                <span class="font-500 ml-4">
                                    Flight budgets
                                </span>
                                    <div class="ml-4 mt-3 bg-light rounded-2 p-5">
                                        <template v-for="(flightBudget, index)  in newCampaignDetails.campaign.budgets">
                                            <div class=" mb-5 border p-2 rounded-2 position-relative flight" style="background-color: #e5e6f1;"
                                                 @mouseover="hoverShowCopyEnter(index)"
                                                 @mouseleave="hoverShowCopyLeave(index)" :id="'flight-' + index">
                                                <div class="span ml-2 border px-2 py-1 position-absolute bg-white"
                                                     style="top: -11px">FlightBudget <b><% index + 1 %>.</b>
                                                </div>
                                                <div class="span-delete position-absolute cursor-pointer" style="right: 10px;">
                                                    <div class="chips chips_red"
                                                         @click="removeFlight(newCampaignDetails.campaign.id, flightBudget.id)">
                                                        {{ 'delete'|trans }} <i class="fa fa-trash-alt"></i>
                                                    </div>
                                                </div>
                                                <div class="d-flex pb-4 mt-5 flex-row">
                                                    <div class="col-4">
                                                        <div class="form-label-group position-relative input-login">
                                                            <label :for="'flight-budget-' + index" class="labelInput focusInput font-500">
                                                                {{ 'Budget'|trans }} <% getCurrencyFromCodeIso(newCampaignDetails.campaign.currency).symbole %>
                                                            </label>
                                                            <input type="number" :id="'flight-budget-' + index" :name="'flight-budget-' + index"
                                                                   class="form-control no-placeholder"
                                                                   v-model.number="newCampaignDetails.campaign.budgets[index].budget">
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <form-date-selector
                                                            :key="'flightDateSelector-' + index"
                                                            :id="'flightDateSelector-' + index"
                                                            :start-date="newCampaignDetails.campaign.budgets[index].startDate"
                                                            :end-date="newCampaignDetails.campaign.budgets[index].endDate"
                                                            :date-widget-style="{right: '-26px'}"
                                                            :min-date="false"
                                                            @save-date="setFlightDate(index, ...arguments)"
                                                        ></form-date-selector>
                                                    </div>
{#                                                    <div class="col">#}
{#                                                        <div class="form-label-group position-relative input-login">#}
{#                                                            <label for="start" class="labelInput focusInput font-500">#}
{#                                                                {{ 'Start date'|trans }}</label>#}
{#                                                            <v-date-picker#}
{#                                                            mode='dateTime'#}
{#                                                            v-model="newCampaignDetails.campaign.budgets[index].startDate"#}
{#                                                            locale="{{ app.request.getLocale() }}"#}
{#                                                            :masks="masks">#}
{#                                                                <template v-slot="{ inputValue, inputEvents }">#}
{#                                                                    <input#}
{#                                                                    class="form-control no-placeholder"#}
{#                                                                    :value="inputValue"#}
{#                                                                    v-on="inputEvents"/>#}
{#                                                                </template>#}
{#                                                            </v-date-picker>#}
{#                                                        </div>#}
{#                                                    </div>#}
{#                                                    <div class="col">#}
{#                                                        <div class="form-label-group position-relative input-login">#}
{#                                                            <label for="end" class="labelInput focusInput font-500">#}
{#                                                                {{ 'End date'|trans }}</label>#}
{#                                                            <v-date-picker#}
{#                                                            mode='dateTime'#}
{#                                                            v-model="newCampaignDetails.campaign.budgets[index].endDate"#}
{#                                                            locale="{{ app.request.getLocale() }}"#}
{#                                                            :masks="masks" >#}
{#                                                                <template v-slot="{ inputValue, inputEvents }">#}
{#                                                                    <input#}
{#                                                                    class="form-control no-placeholder"#}
{#                                                                    :value="inputValue"#}
{#                                                                    v-on="inputEvents"/>#}
{#                                                                </template>#}
{#                                                            </v-date-picker>#}
{#                                                        </div>#}
{#                                                    </div>#}
                                                </div>
                                            </div>
                                        </template>
                                
                                        <div class=" mb-5 border p-2 rounded-2 position-relative flight d-none" style="background-color: #e5f1ec;"
                                             id="newFlight">
                                            <i class="fa fa-star text-warning position-absolute" style="top: -5px; z-index: 1; right: -8px"></i>
                                            <div class="span ml-2 border px-2 py-1 position-absolute bg-warning text-white"
                                                 style="top: -11px">{{ 'new'|trans|capitalize }} FlightBudget
                                            </div>
                                            <div class="d-flex pb-4 mt-5 flex-row">
                                                <div class="col-4">
                                                    <div class="form-label-group position-relative input-login">
                                                        <label for="new-flight-budget" class="labelInput focusInput font-500">
                                                            {{ 'Budget'|trans }} <% advertiserCurrency.symbole %>
                                                        </label>
                                                        <input type="number" id="new-flight-budget" name="new-flight-budget"
                                                               class="form-control no-placeholder"
                                                               v-model="newFlight.budget">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <form-date-selector
                                                    key="newFlightDateSelector"
                                                    :id="'newFlightDateSelector'"
                                                    :start-date="newFlight.startDate"
                                                    :end-date="newFlight.endDate"
                                                    :date-widget-style="{right: '-26px'}"
                                                    @save-date="setNewFlightDate"
                                                    ></form-date-selector>
                                                </div>
{#                                                <div class="col">#}
{#                                                    <div class="form-label-group position-relative input-login">#}
{#                                                        <label for="new-start" class="labelInput focusInput font-500">#}
{#                                                            {{ 'Start date'|trans }}</label>#}
{#                                                        <v-date-picker#}
{#                                                        mode='dateTime'#}
{#                                                        :masks="masks"#}
{#                                                        v-model="newFlight.startDate"#}
{#                                                        locale="{{ app.request.getLocale() }}">#}
{#                                                            <template v-slot="{ inputValue, inputEvents }">#}
{#                                                                <input class="form-control no-placeholder"#}
{#                                                                       :value="inputValue" v-on="inputEvents"/>#}
{#                                                            </template>#}
{#                                                        </v-date-picker>#}
{#                                                    </div>#}
{#                                                </div>#}
{#                                                <div class="col">#}
{#                                                    <div class="form-label-group position-relative input-login">#}
{#                                                        <label for="new-end" class="labelInput focusInput font-500">#}
{#                                                            {{ 'End date'|trans }}</label>#}
{#                                                        <v-date-picker#}
{#                                                        mode='dateTime'#}
{#                                                        :masks="masks"#}
{#                                                        v-model="newFlight.endDate"#}
{#                                                        locale="{{ app.request.getLocale() }}">#}
{#                                                            <template v-slot="{ inputValue, inputEvents }">#}
{#                                                                <input#}
{#                                                                class="form-control no-placeholder"#}
{#                                                                :value="inputValue"#}
{#                                                                v-on="inputEvents"/>#}
{#                                                            </template>#}
{#                                                        </v-date-picker>#}
{#                                                    </div>#}
{#                                                </div>#}
                                            </div>
                                            <div class="col pb-3 text-right">
                                                <button class="btn  btn-primary rounded-30 mx-auto px-4"
                                                        id="btn-save-new-flight"
                                                        @click="saveFlight(newCampaignDetails.campaign.id)">{{ 'Save'|trans }}
                                                </button>
                                            </div>
                                        </div>
                                
                                        <div class="mt-4 d-flex text-center">
                                            <button class="btn btn-outline-success rounded-30 mx-auto"
                                                    id="btn-add-new-flight" @click="addNewFlight()">
                                                {{ 'Add a new'|trans }} flight <i class="fal fa-plus"></i>
                                            </button>
                                        </div>
                                
                                        <div class="mt-4 text-center d-none" id="buttons-save-flight">
                                            <button class="btn  btn-outline-primary rounded-30 mx-auto px-4"
                                                    id="btn-save-new-flight" @click="resetFlight()">
                                                {{ 'reset'|trans|capitalize }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
{#                                <div class="col pl-4 mt-3" v-if="campaignMode === 'new'">#}
{#                                    <div class="form-label-group position-relative input-login ml-4"#}
{#                                         id="date-input-to-hide">#}
{#                                        <label for="input-date-input-to-hide" class="labelInput focusInput font-500">{{ 'dates'|trans|capitalize }}</label>#}
{#                                        <input type="text" class="form-control no-placeholder bg-white" id="input-date-input-to-hide"#}
{#                                               readonly="readonly"#}
{#                                               :value="newCampaignDetails.campaign.startDate !== '' && newCampaignDetails.campaign.endDate !== '' ? newCampaignDetails.campaign.startDate + ' - ' + newCampaignDetails.campaign.endDate : ''"#}
{#                                               @click="$refs.newCampaignDateSelector.openDateSelector()" autocomplete="off">#}
{#                                    </div>#}
{#                                </div>#}
                                <div class="col pl-4 mt-3" v-if="campaignMode === 'new'">
                                    <form-date-selector
                                        key="newCampaignDateSelector"
                                        :id="'newCampaignDateSelector'"
                                        class="ml-4"
                                        :date-widget-style="{minWidth: '100%', right: 0}"
                                        :start-date="newCampaignDetails.campaign.startDate"
                                        :end-date="newCampaignDetails.campaign.endDate"
                                        @save-date="setCampaignDate"
                                    ></form-date-selector>
                                </div>
                                <div class="col pl-4 mt-4">
                                    <input class="inp-cbx" id="campaign_auto_activate" type="checkbox"
                                           style="display: none;"
                                           v-model="newCampaignDetails.campaign.autoActivate"/>
                                    <label class="cbx d-flex align-items-center ml-4 w-fit-content" for="campaign_auto_activate">
                                        <span class="bg-white mr-2">
                                            <svg width="10px" height="10px" viewbox="0 0 10 10"><polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg>
                                        </span>
                                        <span v-show="campaignMode === 'new'">
                                            {{ "Automatically activate the campaign when its start date is reached"|trans }}
                                        </span>
                                        <span v-show="campaignMode !== 'new'">
                                            {{ "Automatically activate the campaign when the next flight budget start date is reached"|trans }}
                                        </span>
                                    </label>
                                </div>
{#                                <div class="col pl-4 mt-3 p-2 fade-in-02" v-if="campaignMode === 'new'" id="vue-calendar-wrapper">#}
{#                                    <div class="form-label-group position-relative input-login ml-4 pt-5 pb-4 px-5 shadow-card rounded-2">#}
{#                                        #}
{#                                        <div class="h-100 w-100 modal-bg position-absolute d-flex flex-column justify-content-center align-items-center rounded-2 fade-in-02"#}
{#                                             style="top:0;left:0;z-index:2;" v-if="showConfirmCloseNewCampaignDateSelector">#}
{#                                            <div class="bg-white p-5 rounded-2 shadow-1">#}
{#                                                <p class="text-primary text-center">{{ 'Save modifications'|trans }} ?</p>#}
{#                                                <div>#}
{#                                                    <button type="button" class="btn btn-primary" @click="closeNewCampaignDateSelector('save')">{{ 'Save'|trans }}</button>#}
{#                                                    <button type="button" class="btn btn-light" @click="closeNewCampaignDateSelector('not save')">{{ "Do not save"|trans }}</button>#}
{#                                                    <button type="button" class="btn btn-secondary" @click="showConfirmCloseNewCampaignDateSelector = false">{{ 'Cancel'|trans }}</button>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                        </div>#}
{#                                        #}
{#                                        <div class="col mb-3 position-absolute p-0" style="right: 15px; top: 15px;">#}
{#                                            <div class="slider-icon-group active ml-auto cursor-pointer"#}
{#                                                 style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7); z-index: 1;"#}
{#                                                 @click="closeNewCampaignDateSelector('close')">#}
{#                                                <div class="slider-icon">#}
{#                                                    <i class="fal fa-times text-white"></i>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                        </div>#}
{#                                        #}
{#                                        <label for="dates" class="labelInput focusInput font-500">{{ 'Choose the period'|trans }}</label>#}
{#                                        <v-date-picker#}
{#                                            mode='dateTime'#}
{#                                            :min-date='new Date()'#}
{#                                            :masks="masks"#}
{#                                            v-model="formNewCampaignDate"#}
{#                                            locale="{{ app.request.getLocale() }}"#}
{#                                            :columns="2" is-range is-expanded is-double-paned></v-date-picker>#}
{#                                        #}
{#                                        <div class="d-flex justify-content-end py-3">#}
{#                                            <button type="button" :disabled="!isNewCampaignDatesDifferent"#}
{#                                                    class="btn btn-light mr-2" @click="formNewCampaignDate = {}">#}
{#                                                {{ 'Reset'|trans }}#}
{#                                            </button>#}
{#                                            <button type="button" :disabled="!isNewCampaignDatesDifferent"#}
{#                                                    class="btn btn-outline-success" @click="closeNewCampaignDateSelector('save')">#}
{#                                                {{ 'Select this period'|trans }}#}
{#                                            </button>#}
{#                                        </div>#}
{#                                    </div>#}
{#                                </div>#}
                                <div class="col pl-4 mt-4">
                                    <div class="form-label-group position-relative input-login ml-4">
                                        <input-dropdown
                                        v-model="newCampaignDetails.campaign.jobgroup"
                                        :init-value="newCampaignDetails.campaign.jobgroup"
                                        placeholder="{{ 'All jobGroups'|trans }}"
                                        label="{{ 'Job Group'|trans }}"
                                        :data-list="newCampaignDetails.jobgroups" id="jobgroup"
                                        :required="true">
                                        </input-dropdown>
                                    </div>
                                </div>
                                <div class="col pl-4 mt-3">
                                    <div class="form-label-group position-relative input-login ml-4">
                                        <input-dropdown
                                        v-model="newCampaignDetails.campaign.applyMode"
                                        :init-value="newCampaignDetails.campaign.applyMode"
                                        placeholder="{{ 'Apply Mode'|trans }}"
                                        label="{{ 'Apply Mode'|trans }}"
                                        :data-list="newCampaignDetails.applyModes" id="applyMode"
                                        :required="true">
                                        </input-dropdown>
                                    </div>
                                </div>
                                <div class="col pl-4 mt-3">
                                    <div class="form-label-group position-relative input-login ml-4">
                                        <input-dropdown
                                        v-model="newCampaignDetails.campaign.country"
                                        :init-value="newCampaignDetails.campaign.country"
                                        placeholder="{{ 'Country'|trans }}"
                                        label="{{ 'Country'|trans }}"
                                        :data-list="countries" id="country"
                                        :required="true"
                                        :disabled="campaignMode !== 'new' && campaignTypeSwitch === 'direct'">
                                        </input-dropdown>
                                    </div>
                                </div>
                                <div class="col pl-4 mt-3" v-if="campaignTypeSwitch === 'direct'">
                                    <div class="form-label-group position-relative input-login ml-4">
                                        <input-dropdown
                                        v-model="newCampaignDetails.campaign.publisher"
                                        :init-value="newCampaignDetails.campaign.publisher"
                                        placeholder="Publisher"
                                        label="Publisher"
                                        :data-list="availablePublisherForDirectCampaign" id="publisher"
                                        :required="true"
                                        :disabled="campaignMode !== 'new'">
                                        </input-dropdown>
                                    </div>
                                </div>
                                <div class="col pl-4 mt-3" v-if="campaignTypeSwitch === 'direct'">
                                    <div class="form-label-group position-relative input-login ml-4">
                                        <label for="urlformat" class="labelInput focusInput font-500 info-bulle">
                                            {{ 'Job Url Rewriting'|trans }}
                                            <i class="fa fa-question-circle"></i>
                                        </label>
                                        <div class="input-group">
                                            <input type="text"
                                                   id="urlformat"
                                                   name="_urlformat"
                                                   class="form-control no-placeholder"
                                                   placeholder="Ex: [[JOB_URL]]?utm=goldenbees" v-model="newCampaignDetails.urlRewriting">
                                        </div>
                                    </div>
                                </div>
                                <div class="col pl-4 mt-3 mb-5 pb-5 position-relative" v-if="campaignTypeSwitch === 'direct'">
                                    <div class="form-label-group position-relative input-login ml-4">
                                        <label for="" class="labelInput focusInput font-500">{{ 'label'|trans|capitalize }}s</label>
                                        <span class="chips_purple ml-3 p-1 text-underline"
                                              @click="addLabelClick" style="cursor: pointer">
                                        {{ 'Add a label'|trans }} <i>(<% labelCounter %> {{ 'left'|trans }})</i>
                                    </span>
                                    </div>
                                    <div class="col pl-4 mt-3 d-flex mb-5">
                                        <template v-if="newCampaignDetails.campaign.labels.length > 0">
                                        <span v-for="(label, i) in newCampaignDetails.campaign.labels"
                                              :style="{'background': hexToRgba(label.color, 0.2) , 'color': label.color}"
                                              class="px-2 mr-2 mb-2 rounded-30 d-block font-600"
                                              style="padding-bottom: 1px; padding-top: 1px;" :key="i">
                                           <% label.name %>
                                           <i class="fal fa-times ml-1 cursor-pointer"
                                              v-if="label.type != 'campaign'"
                                              @click="removeLabel(i)"></i>
                                        </span>
                                        </template>
                                        <template v-else>
                                            <span>{{ 'No label selected'|trans }}</span>
                                        </template>
                                    </div>
                                    <div class="dropdown-menu dropdown-source-label p-4 ml-4 mt-4 mb-5"
                                         style="cursor: auto !important; position: unset !important; float: unset;">
                                        <div id="label-loader" class="small-loader" style="display: none;"></div>
                                        <div class="p-4 position-relative row tags-span-list" v-if="ppcLabels.length > 0">
                                        <span v-if="!(newCampaignDetails.campaign.labels.includes(tag))"
                                              v-for="(tag, i) in ppcLabels.filter(label => label.type !== 'campaign')"
                                              :style="{'background': hexToRgba(tag.color, 0.25), 'color': tag.color}"
                                              class="px-2 mr-2 mb-2 rounded-30 d-block cursor-pointer"
                                              @click="selectionLabel(i)" :key="i"
                                              :class="labelCounter == 0 ? 'selectionned' : '' ">
                                            <% tag.name %>
                                        </span>
                                        </div>
                                        <div v-else>
                                            <span class="small d-block text-center mb-5 mt-3 text-info">{{ 'No label created'|trans }}</span>
                                        </div>
                                        <hr class="my-3">
                                        <div class="text-right">
                                        <span class="small text-underline cursor-pointer"
                                              @click="() => this.showLabelCreateWrapper = !this.showLabelCreateWrapper">
                                            {{ 'Create a new label'|trans }}
                                        </span>
                                        </div>
                                        <div v-show="showLabelCreateWrapper">
                                            <div class="form-group row mt-4">
                                                <label for="titleLabel" class="col-sm-2 col-form-label">{{ 'Title'|trans }}</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" id="titleLabel"
                                                           v-model="newPpcLabel.name" placeholder="...">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="colorLabel" class="col-sm-2 col-form-label">{{ 'color'|trans|capitalize }}</label>
                                                <div class="col-sm-10 my-auto">
                                                <span v-for="(color, key) in ppcLabelsColor" :key="key"
                                                      @click="setColorLabel(color)"
                                                      :style="{backgroundColor: color}"
                                                      class="span-color-label mr-1 cursor-pointer">
                                                    <i class="fa fa-check text-white mt-1 mx-auto d-table"
                                                       v-if="newPpcLabel.color === color" style="font-weight: 400 !important;"></i>
                                                </span>
                                                </div>
                                            </div>
                                            <button id="create-label"
                                                    class="btn chips_green px-5 rounded-30 d-block mx-auto mt-5"
                                                    @click="createPpcLabel"
                                                    :disabled="newPpcLabel.color === '' || newPpcLabel.name === ''">
                                                {{ 'Create a new label'|trans }}
                                            </button>
                                        </div>
                                    </div>
                                    <div class="position-absolute d-flex" style="bottom: 0; right: 0;" v-if="campaignTypeSwitch === 'direct'">
                                        <button v-if="campaignMode === 'new'" class="btn btn-primary rounded-30 ml-3 px-3" @click="updateCampaign(true)" :disabled="loading">
                                            {{ 'Create campaign'|trans }}
                                        </button>
                                        <button v-else class="btn btn-primary rounded-30 ml-3 px-3" @click="updateCampaign(false)" :disabled="isFormCampaignModified ">
                                            {{ 'Save modifications'|trans }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="step-2 my-5 pb-5 position-relative" id="step-2" v-if="campaignTypeSwitch !== 'direct' && formStep === 1">
                            <div class="title-step d-flex pt-4 align-items-center">
                                <div class="slider-icon-group active cursor-default" style="top: unset; left: unset; transform: unset; background-color: #E2AF17;">
                                    <div class="slider-icon cursor-default">
                                        <span class="text-white font-weight-bold">2</span>
                                    </div>
                                </div>
                                <div class="title-text text-primary font-700 ml-3">
                                    {{ 'Strategy'|trans }}
                                </div>
                            </div>
                            <div class="body-step mb-5">
                                <div class="col pl-4 mt-3">
                                    <div class="form-label-group position-relative input-login ml-4">
                                        <input-dropdown
                                        v-model="newCampaignDetails.campaign.goal"
                                        :init-value="newCampaignDetails.campaign.goal"
                                        label="{{ 'Choose your campaign goal'|trans }}"
                                        :data-list="newCampaignDetails.goals"
                                        id="goal"
                                        name="_goal"
                                        :required="true"
                                        :tooltip="true"
                                        label-class="info-goal">
                                        </input-dropdown>
                                        <div class="form-label-group position-relative input-login mt-3" v-show="newCampaignDetails.campaign.goal === 'static'">
                                            <label for="cpcField" class="labelInput focusInput font-500">{{ 'Please, fill in the CPC goal'|trans }}</label>
                                            <input type="text" id="_cpcField" name="cpcField"
                                                   required
                                                   placeholder="CPC"
                                                   autocomplete="off"
                                                   class="form-control no-placeholder position-relative" v-model="newCampaignDetails.campaign.cpc">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="position-absolute rounded-2 px-3 py-1 cursor-pointer" style="bottom: 0; right: 0; display: -webkit-inline-box; background-color: #DAE0EF;" id="next-step" @click="changeCampaignPanelStep(2)">
                                <div class="slider-icon-group active bg-primary my-1 circle-20" style="top: unset; left: unset; transform: unset !important; transition: none !important;">
                                    <div class="slider-icon" style="transition: none !important;">
                                        <span class=""><i class="far fa-long-arrow-left" style="color: #DAE0EF;"></i></span>
                                    </div>
                                </div>
                                <span class="ml-2 my-auto d-block">{{ 'Next Step'|trans }}</span>
                            </div>
                        </div>
                        <div class="step-3 mb-5 pb-5 position-relative" id="step-3" v-if="campaignTypeSwitch !== 'direct' && formStep === 2">
                            <div class="title-step d-flex align-items-center">
                                <div class="slider-icon-group active cursor-default" style="top: unset; left: unset; transform: unset; background-color: #E2AF17;">
                                    <div class="slider-icon cursor-default">
                                        <span class="text-white font-weight-bold">3</span>
                                    </div>
                                </div>
                                <div class="title-text text-primary font-700 ml-3">
                                    Publishers
                                </div>
                            </div>
                            <div class="body-step mb-5">
                                <span class="text-secondary font-italic ml-4 px-4 mt-3 d-block text-right">
                                    {{ 'For All Publishers'|trans }}
                                </span>
                                <div class="col pl-4 mt-3">
                                    <div class="form-label-group position-relative input-login ml-4">
                                        <label for="bid" class="labelInput focusInput font-500">{{ 'Base Bid'|trans }}</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text font-600">€</span>
                                            </div>
                                            <input type="number" id="bid" name="_bid"
                                                   class="form-control no-placeholder"
                                                   placeholder="Ex: 0.25" required="" v-model="newCampaignDetails.bid"
                                                   step="0.1"
                                                   min="0" max="30">
                                        </div>
                                    </div>
                                </div>
                                <div class="col pl-4 mt-4">
                                    <div class="form-label-group position-relative input-login ml-4">
                                        <label for="urlformat" class="labelInput focusInput font-500">
                                            {{ 'Job Url Rewriting'|trans }}
                                            <i class="fa fa-question-circle cursor-pointer info-bulle"></i>
                                        </label>
                                        <div class="input-group">
                                            <input type="text"
                                                   id="urlformat"
                                                   name="_urlformat"
                                                   class="form-control no-placeholder"
                                                   placeholder="Ex: [[JOB_URL]]?utm=goldenbees" required="" v-model="newCampaignDetails.urlRewriting">
                                        </div>
                                    </div>
                                </div>
                        
                                <div class="d-flex align-items-center mt-4">
                                    <div class="text-secondary font-italic ml-4 pl-4 pr-3 d-block">
                                        <i class="fas fa-info-circle text-warning"></i>
                                        <span class="">{{ 'Each Publisher can be configured in'|trans }} <b class="text-primary">{{ 'Expert Mode'|trans }}</b></span>
                                    </div>
                                    <div class="ml-auto mr-3">
                                        <button class="btn rounded-30 text-secondary py-0 px-1 w-max-content" v-if="newCampaignDetails.expert === 0"
                                                style="background-color: #d8e3e8;" @click="newCampaignDetails.expert = 1">
                                            <i class="fas fa-circle mr-1"></i>
                                            <span>{{ 'expert'|trans }}</span>
                                        </button>
                                        <button class="btn rounded-30 text-white py-0 px-1 w-max-content" v-else
                                                style="background-color: rgb(255 219 43);"
                                                @click="newCampaignDetails.expert = 0">
                                            <i class="fas fa-circle mr-1"></i>
                                            <span class="font-600">{{ 'expert'|trans }}</span>
                                        </button>
                                    </div>
                                </div>
    
                                <template v-if="newCampaignDetails.expert === 1">
                                    <div class="col pl-5 mt-5">
                                        <div class="form-label-group position-relative input-login">
                                            <label for="jobapplies" class="labelInput focusInput font-500">{{ 'Max applications per job'|trans }} <i class="small text-secondary font-300">(min 20)</i></label>
                                            <input type="number" id="jobapplies"
                                                   name="_jobapplies" min="20"
                                                   class="form-control no-placeholder"
                                                   v-model="newCampaignDetails.campaign.maxAppliesJob">
                                        </div>
                                    </div>
                                    <div class="col pl-5 mt-4">
                                        <div class="form-label-group position-relative input-login">
                                            <label for="jobspend" class="labelInput focusInput font-500">
                                                {{ 'Max spend per job'|trans }} <i class="small text-secondary font-300">(min 10 <% campaignMode === 'new' ? advertiserCurrency.symbole : getCurrencyFromCodeIso(newCampaignDetails.campaign.currency).symbole %>)</i>
                                            </label>
                                            <input type="number"
                                                   id="jobspend"
                                                   name="_jobspend"
                                                   class="form-control no-placeholder"
                                                   min="10"
                                                   required="" v-model="newCampaignDetails.campaign.maxSpendJob">
                                        </div>
                                    </div>
                                    <div class="col pl-5 mt-4">
                                        <div class="form-label-group position-relative input-login">
                                            <label for="job-spend-no-apply" class="labelInput focusInput font-500">
                                                {{ 'Max spend per job with no apply'|trans }} <i class="small text-secondary font-300">(min&nbsp;10&nbsp;<% campaignMode === 'new' ? advertiserCurrency.symbole : getCurrencyFromCodeIso(newCampaignDetails.campaign.currency).symbole %>)</i>
                                            </label>
                                            <input type="number"
                                                   id="job-spend-no-apply"
                                                   name="job-spend-no-apply"
                                                   class="form-control no-placeholder"
                                                   min="10"
                                                   required="" v-model="newCampaignDetails.campaign.maxSpendJobNoApply">
                                        </div>
                                    </div>
    
                                    <hr class="w-75 d-block mx-auto my-5">
                                    <span class="text-primary font-700 ml-5">{{ 'Fill for each publisher'|trans }}</span>
                                    <div class="d-flex flex-column">
                                        <div class="d-flex mt-2 pl-5">
                                            <div class="mr-1">
                                                <button class="btn text-600"
                                                        :style="[publisherTypeNavigate === 'ppc' ? {backgroundColor: 'rgba(211, 223, 231, 0.65)'} : {backgroundColor: 'rgba(211, 223, 231, 0.25)'}]"
                                                        @click="publishersNavigate('ppc')">PPC</button>
                                            </div>
                                            <div class="mr-1" v-if="newCampaignDetails?.publishers['ppa_campaigns'] && newCampaignDetails?.campaign.applyMode === 1">
                                                <button class="btn text-600"
                                                        :style="[publisherTypeNavigate === 'ppa' ? {backgroundColor: 'rgba(211, 223, 231, 0.65)'} : {backgroundColor: 'rgba(211, 223, 231, 0.25)'}]"
                                                        @click="publishersNavigate('ppa')">PPA</button>
                                            </div>
                                            <div v-if="newCampaignDetails?.publishers['organic'] && newCampaignDetails?.campaign.applyMode === 1">
                                                <button class="btn text-600"
                                                        :style="[publisherTypeNavigate === 'organic' ? {backgroundColor: 'rgba(211, 223, 231, 0.65)'} : {backgroundColor: 'rgba(211, 223, 231, 0.25)'}]"
                                                        @click="publishersNavigate('organic')">ORGANIC</button>
                                            </div>
                                        </div>
        
                                        <div class="row position-relative">
                                            <div class="col-12 py-5 px-3 flex-wrap pl-5 ml-5 publisher-block" :class="[publisherTypeNavigate === 'ppc' ? 'active' : '']"
                                                 id="ppc-block">
                                                <div class="col-4 mr-2 p-2 rounded-2 mb-1"
                                                     v-for="ppc in orderItems(Object.values(newCampaignDetails.publishers.ppc_campaigns || {}), 'name', 'ASC', 'String')"
                                                     style="display: table-cell" :class=" isPublisherFilled ? 'isPublisherFilled' : 'bg-light' "
                                                     v-show="ppc.countries.includes(newCampaignDetails.campaign.country)">
                    
                                                    <img :src="ppc.logo" alt="" style="height: auto; width: 40px;" class="mx-auto img-fluid">
                                                    <span><% ppc.name %></span>
                                                    <div class="d-flex justify-content-end align-items-start">
                                                        <div class="custom-switch d-flex justify-content-center" >
                                                            <input type="checkbox" class="custom-control-input" :id="'ppcSwitch-' + ppc.id">
                                                            <label class="custom-control-label-campaign small d-block mt-auto" :for="'ppcSwitch-' + ppc.id" :class="{ inactive: !ppc.active }" @click="ppc.active = !ppc.active"></label>
                                                        </div>
                                                        <span class="text-underline small font-italic cursor-pointer" @click="showPublisherModalAction('ppc', ppc)">{{ 'edit'|trans }}</span>
                                                    </div>
                                                </div>
                                                <div v-show="!hasPublisherInCampaignCountry('ppc_campaigns')">
                                                    {{ 'No publisher available for the campaign country'|trans }}
                                                </div>
                                            </div>
                                            <div class="col-12 py-5 px-3 flex-wrap pl-5 ml-5 publisher-block" :class="[publisherTypeNavigate === 'ppa' ? 'active' : '']" id="ppa-block">
                                                <div class="col-4 mr-2 p-2 rounded-2 mb-1"
                                                     v-for="ppa in orderItems(Object.values(newCampaignDetails.publishers.ppa_campaigns || {}), 'name', 'ASC', 'String')" :class=" isPublisherFilled ? 'isPublisherFilled' : 'bg-light'"
                                                     style="display: table-cell" v-show="ppa.countries.includes(newCampaignDetails.campaign.country)">
                                                    <img :src="ppa.logo" alt="" style="height: auto; width: 40px;" class="mx-auto img-fluid">
                                                    <span><% ppa.name %></span>
                                                    <div class="d-flex justify-content-end align-items-start">
                                                        <div class="custom-switch d-flex justify-content-center" >
                                                            <input type="checkbox" class="custom-control-input" :id="'ppaSwitch-' + ppa.id">
                                                            <label class="custom-control-label-campaign small d-block mt-auto" :for="'ppaSwitch-' + ppa.id" :class="{ inactive: !ppa.active }" @click="ppa.active = !ppa.active"></label>
                                                        </div>
                                                        <span class="text-underline small font-italic cursor-pointer" @click="showPublisherModalAction('ppa', ppa)">{{ 'edit'|trans }}</span>
                                                    </div>
                                                </div>
                                                <div v-show="!hasPublisherInCampaignCountry('ppa_campaigns')">
                                                    {{ 'No publisher available for the campaign country'|trans }}
                                                </div>
                                            </div>
                                            <div class="col-12 py-5 px-3 flex-wrap pl-5 ml-5 publisher-block" :class="[publisherTypeNavigate === 'organic' ? 'active' : '']" id="organic-block">
                                                <div class="col-4 mr-2 p-2 rounded-2 mb-1"
                                                     v-for="organic in orderItems(Object.values(newCampaignDetails.publishers.organic || {}), 'name', 'ASC', 'String')" :class=" isPublisherFilled ? 'isPublisherFilled' : 'bg-light'"
                                                     style="display: table-cell" v-show="organic.countries.includes(newCampaignDetails.campaign.country)">
                                                    <img :src="organic.logo" alt="" style="height: auto; width: 40px;" class="mx-auto img-fluid">
                                                    <span><% organic.name %></span>
                                                    <div class="d-flex justify-content-end align-items-start">
                                                        <div class="custom-switch d-flex justify-content-center" >
                                                            <input type="checkbox" class="custom-control-input" :id="'organicSwitch-' + organic.id">
                                                            <label class="custom-control-label-campaign small d-block mt-auto" :for="'organicSwitch-' + organic.id" :class="{ inactive: !organic.active }" @click="organic.active = !organic.active"></label>
                                                        </div>
                                                        <span class="text-underline small font-italic cursor-pointer" @click="showPublisherModalAction('organic', organic)">{{ 'edit'|trans }}</span>
                                                    </div>
                                                </div>
                                                <div v-show="!hasPublisherInCampaignCountry('organic')">
                                                    {{ 'No publisher available for the campaign country'|trans }}
                                                </div>
                                            </div>
                                            {# PUBLISHER EDITION MODAL #}
                                            <transition name="fade">
                                                <div class="shadow-1 form-publisher bg-white rounded-2 p-4 col-8 mt-3 position-absolute" v-show="showPublisherModal"
                                                     style="top: 0; left: 50%; transform:translate(-50%, -50%);max-width: 550px;z-index: 1;" id="publisher-modal" ref="publisherModal">
                    
                                                    <div class="h-100 w-100 modal-bg position-absolute d-flex flex-column justify-content-center align-items-center rounded-2 fade-in-02"
                                                         style="top:0;left:0;z-index:2;" v-if="showConfirmClosePublisherModal">
                                                        <div class="bg-white p-5 rounded-2 shadow-1">
                                                            <p class="text-primary text-center">{{ 'Save modifications'|trans }} ?</p>
                                                            <div>
                                                                <button type="button" class="btn btn-primary" @click="savePublisherValues(campaignMode)">{{ 'Save'|trans }}</button>
                                                                <button type="button" class="btn btn-light" @click="closePublisherModal('not save')">{{ "Do not save"|trans }}</button>
                                                                <button type="button" class="btn btn-secondary" @click="showConfirmClosePublisherModal = false">{{ 'Cancel'|trans }}</button>
                                                            </div>
                                                        </div>
                                                    </div>
                    
                                                    <div class="col mb-3 position-absolute p-0" style="right: 15px; top: 15px;">
                                                        <div class="slider-icon-group active ml-auto cursor-pointer"
                                                             style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7); z-index: 1;"
                                                             @click="closePublisherModal">
                                                            <div class="slider-icon">
                                                                <i class="fal fa-times text-white"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col mt-4 d-flex justify-content-center align-items-center">
                                                        <img :src="tmpPublisher.logo" :alt="tmpPublisher.name + 'logo'" style="width: 40px;" class="img-fluid">
                                                        <span class="ml-2"><% tmpPublisher.name %></span>
                                                    </div>
                                                    <div class="col mt-3" v-if="tmpPublisher.type !== 'organic'">
                                                        <div class="form-label-group position-relative input-login">
                                                            <label for="form-publisher-bid" class="labelInput focusInput">
                                                                {{ 'Base Bid'|trans }}
                                                            </label>
                                                            <p v-show="tmpPublisherError.bid" class="text-danger font-weight-bold">
                                                                {{ 'Invalid bid : must be greater than %min% and inferior than or equal to %max%'|trans({'%min%': '0', '%max%': '30'}) }}
                                                            </p>
                                                            <div class="input-group">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text font-600"><% getCurrencyFromCodeIso(tmpPublisher.currency).symbole %></span>
                                                                </div>
                                                                <input type="number" id="form-publisher-bid" name="_form-publisher-bid"
                                                                       placeholder="Ex: 0.25" required="required"
                                                                       :class="[tmpPublisherError.bid ? 'border-danger text-danger' : '', 'form-control']"
                                                                       v-model.number="tmpPublisher.bid" min="0" max="30" step="0.1"
                                                                       @input="tmpPublisherError.bid = false">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col mt-3" v-if="tmpPublisher.type !== 'organic'">
                                                        <div class="form-label-group position-relative input-login">
                                                            <label for="publisher-default-minBid" class="labelInput focusInput">
                                                                {{ 'Min Bid'|trans }}
                                                                <i class="fa fa-question-circle cursor-pointer"
                                                                   :data-tippy-content="Translator.trans('This is the default min bid of this publisher. The value cannot be lower than this') + '. ' + Translator.trans('Min Bid') + ' : ' + amountWithCurrency(tmpPublisher.defaultMinBid, getCurrencyFromCodeIso(tmpPublisher.currency))"></i>
                            
                                                            </label>
                                                            <p v-show="tmpPublisherError.minBid" class="text-danger font-weight-bold">
                                                                {{ "Invalid bid : it must be equal to or superior than the publisher's min bid, and equal to or inferior than the publisher's max bid"|trans() }}
                                                            </p>
                                                            <div class="input-group">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text font-600"><% getCurrencyFromCodeIso(tmpPublisher.currency).symbole %></span>
                                                                </div>
                                                                <input type="number" id="publisher-default-minBid" name="_form-publisher-minBid"
                                                                       required="required" step="0.1"
                                                                       :class="[tmpPublisherError.minBid ? 'border-danger text-danger' : '', 'form-control']"
                                                                       v-model.number="tmpPublisher.minBid" :min="tmpPublisher.defaultMinBid" :max="tmpPublisher.defaultMaxBid"
                                                                       @input="tmpPublisherError.minBid = false">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col mt-3" v-if="tmpPublisher.type !== 'organic'">
                                                        <div class="form-label-group position-relative input-login">
                                                            <label for="publisher-default-maxBid" class="labelInput focusInput">
                                                                {{ 'Max Bid'|trans }}
                                                                <i class="fa fa-question-circle cursor-pointer"
                                                                   :data-tippy-content="Translator.trans('This is the default max bid of this publisher. The value cannot be greater than this') + '. ' + Translator.trans('Max Bid') + ' : ' +  amountWithCurrency(tmpPublisher.defaultMaxBid, getCurrencyFromCodeIso(tmpPublisher.currency))"></i>
                                                            </label>
                                                            <p v-show="tmpPublisherError.maxBid" class="text-danger font-weight-bold">
                                                                {{ "Invalid bid : it must be equal to or superior than the publisher's min bid, and equal to or inferior than the publisher's max bid"|trans() }}
                                                            </p>
                                                            <div class="input-group">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text font-600"><% getCurrencyFromCodeIso(tmpPublisher.currency).symbole %></span>
                                                                </div>
                                                                <input type="number" id="publisher-default-maxBid" name="_form-publisher-maxBid"
                                                                       required="required" step="0.1"
                                                                       :class="[tmpPublisherError.maxBid ? 'border-danger text-danger' : '', 'form-control']"
                                                                       v-model.number="tmpPublisher.maxBid" :min="tmpPublisher.defaultMinBid" :max="tmpPublisher.defaultMaxBid"
                                                                       @input="tmpPublisherError.maxBid = false">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col mt-3">
                                                        <div class="form-label-group position-relative input-login">
                                                            <label for="form-publisher-ul" class="labelInput focusInput">
                                                                {{ 'Job Url Rewriting'|trans }}
                                                                <i class="fa fa-question-circle cursor-pointer info-bulle"></i>
                                                            </label>
                                                            <p v-show="tmpPublisherError.urlRewriting" class="text-danger font-weight-bold">
                                                                {{ 'The url rewriting must contain at least the macro [[JOB_URL]] or [[JOB_URL_ENCOD]] or start with http'|trans }}
                                                            </p>
                                                            <div class="input-group">
                                                                <input type="text" id="form-publisher-ul" name="_form-publisher-url"
                                                                       placeholder="Ex: [[JOB_URL]]?utm_source=goldenbees" required="required"
                                                                       :class="[tmpPublisherError.urlRewriting ? 'border-danger text-danger' : '', 'form-control no-placeholder']"
                                                                       v-model="tmpPublisher.urlRewriting"
                                                                       @focus="tmpPublisherError.urlRewriting = false">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <button class="btn rounded-30 px-3 text-primary d-block mx-auto w-50 mt-5 mb-4"
                                                            @click="savePublisherValues(campaignMode)" :disabled="!isPublisherModified" style="background-color: rgb(218, 224, 239);">
                                                        {{ 'Save'|trans }}
                                                    </button>
                                                </div>
                                            </transition>
                                            {# PUBLISHER EDITION MODAL END #}
                                        </div>
                                    </div>
                                </template>
                            </div>
                            <div class="position-absolute d-flex" style="bottom: 0; right: 0;">
                                <div class="rounded-2 px-3 py-1 cursor-pointer" style="display: -webkit-inline-box; background-color: #DAE0EF;" id="previous-step" @click="changeCampaignPanelStep(1)">
                                    <div class="slider-icon-group active bg-primary my-1 circle-20" style="top: unset; left: unset; transform: unset;">
                                        <div class="slider-icon">
                                            <span class=""><i class="far fa-long-arrow-right" style="color: #DAE0EF;"></i></span>
                                        </div>
                                    </div>
                                    <span class="ml-2 my-auto d-block">{{ 'Previous Step'|trans }}</span>
                                </div>
                                <button v-if="campaignMode === 'new'" class="btn btn-primary rounded-30 ml-3 px-3" @click="updateCampaign(true)" :disabled="loading">
                                    {{ 'Create Campaign'|trans }}
                                </button>
                                <button v-else class="btn btn-primary rounded-30 ml-3 px-3" @click="updateCampaign(false)" :disabled="isFormCampaignModified ">
                                    {{ 'Save modifications'|trans }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        
        {#        Show detail campaign    #}
        <transition name="slide-right">
            <div class="bg-light showCampaign px-5 pt-4 pb-5 overflow-auto" id="showCampaign" v-if="showCampaignReportPanel">
                <div class="w-100">
                    <div class="header d-flex flex-column mb-3">
                        <div class="slider-icon-group active ml-auto" style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);" @click="closeSideModal('campaignDetail')">
                            <div class="slider-icon">
                                <i class="fal fa-times text-white"></i>
                            </div>
                        </div>
                        <div class="col-12 my-3"  v-if="campaignDetail.data.sumClicks == 0 && campaignDetail.data.sumApplies == 0 && campaignDetail.data.sumSpend == 0 &&
                        campaignDetail.data.percentApplies == 0 && campaignDetail.data.percentSpend == 0 && campaignDetail.data.percentClicks == 0 ">
                            <div class="alert alert-danger text-center">
                                <span><i class="fa fa-exclamation-triangle mr-2"></i> {{ 'There is no data for this'|trans }} <i><b>{{ 'period'|trans }}</b></i></span>
                            </div>
                        </div>
                        <div class="title mt-3 d-flex justify-content-between">
                            <div class="d-flex align-items-center">
                                <i class="fal fa-bars"></i>
                                <span class="ml-3 text-primary font-700">
                                    <% campaignDetail.name %>
                                <span class="chips chips_green" v-if="showActiveCampaignLabel">{{ 'active'|trans }}</span>
                                <span class="chips chips_red" v-else>{{ 'inactive'|trans }}</span>
                            </span>
                            </div>
                            <div class="text-right">
                                <div class="chips cursor-pointer chips_purple" @click="toggleExportModal('show')" data-tippy-content="{{ 'Export'|trans }} {{ 'this campaign'|trans }}">
                                    <i class="fa fa-download mr-2"></i>
                                    <span class="break-long-words">
                                    {{ 'Export'|trans }}  <b><% campaignDetail.name %></b>
                                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="body-form mt-2 mb-3">
                        <div class="d-flex">
                            <div class="col-md-9 d-flex bg-white rounded-2 pt-4">
                                <div class="col-12 d-flex flex-column">
                                    <div class="d-flex flex-wrap">
                                        <date-selector
                                            v-if="campaignDetail?.data?.campaign"
                                            :id="'campaignDetail'"
                                            :loading="loading"
                                            :date-widget-period="showDateWidgetSelected"
                                            :selected-period="campaignDetail.selectedPeriod"
                                            :selected-by-period="campaignDetail.selectedByPeriod"
                                            :model-config="modelConfig"
                                            :mode-date-picker="modeDatePicker"
                                            @select-period="selectPeriod"
                                            @select-by-period="selectByPeriod"
                                            class="mt-2 mr-2"
                                            key="main-selector"></date-selector>
                                        
                                        <div class="publishers-select mr-2 mt-2" v-if="campaignDetail?.data?.campaign?.type === 'self'">
                                            <button type="button" class="btn-select w-auto"
                                                    @click="showPublishersListCampaignDetail = !showPublishersListCampaignDetail">
                                                <% publisherNameSelectedCampaignDetail %>
                                                <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                            </button>
                                            <div class="publishers-card mt-2 position-absolute py-3 px-5 shadow-card rounded-2 bg-white" ref="campaignDetailPublisherListSelector" v-show="showPublishersListCampaignDetail">
                                                <div class="slider-icon-group active ml-auto mb-3 " @click="showPublishersListCampaignDetail = false"
                                                     style="top: unset; left: unset; transform: unset; right: -25px; background-color: rgba(192, 206, 235, 0.7);">
                                                    <div class="slider-icon">
                                                        <i class="fal fa-times text-white"></i>
                                                    </div>
                                                </div>
                                                <div class="headers-publishers d-flex col-12 px-0">
                                                    <span :class="[campaignDetail.filteredPublisherType === 'ppc_campaigns' ? '' : 'opacity-06', 'chips chips_purple cursor-pointer px-2 mr-2']" @click="campaignDetail.filteredPublisherType = 'ppc_campaigns'">PPC</span>
                                                    <span :class="[campaignDetail.filteredPublisherType === 'ppa_campaigns' ? '' : 'opacity-06', 'chips chips_purple cursor-pointer px-2 mr-2']" @click="campaignDetail.filteredPublisherType = 'ppa_campaigns'">PPA</span>
                                                    <span :class="[campaignDetail.filteredPublisherType === 'organic' ? '' : 'opacity-06', 'chips chips_purple cursor-pointer px-2']" @click="campaignDetail.filteredPublisherType = 'organic'">Organic</span>
                                                    <span class="chips chips_purple cursor-pointer px-2 ml-auto" @click="choosePublisherCampaignDetail('all')">{{ 'All publishers'|trans }}</span>
                                                </div>
                                                <div class="body-publishers mt-4 ">
                                                    <div id="ppc_publishers" class="row mx-0"
                                                         v-if="Object.keys(campaignDetail.data).length > 0">
                                                        <div class="chips_purple p-2 rounded-2 mb-2 mr-2" v-for="publisher in campaignDetailsPublisherFiltered">
                                                            <div class="cursor-pointer" @click="choosePublisherCampaignDetail(publisher)">
                                                                <img :src="publisher.logo" alt="" class="mr-2" style="width: 35px"/>
                                                                <span class="font-600">
                                                                <% publisher.name %>
                                                            </span>
                                                                <span class="chips chips_green" v-if="publisher.active">
                                                                {{ 'active'|trans }}
                                                            </span>
                                                                <span class="chips chips_red" v-else>
                                                                {{ 'inactive'|trans }}
                                                            </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="mt-2">
                                            <button type="button" @click="changeChartKPI('campaignDetails', 'spend')"
                                                    :class="[selectedChartKPI.campaignDetails.includes('spend') ? 'btn-primary' : 'btn-outline-primary', 'btn btn-no-focus']">
                                                {{ 'Spend'|trans }}
                                            </button>
                                            <button type="button" @click="changeChartKPI('campaignDetails', 'applies')"
                                                    :class="[selectedChartKPI.campaignDetails.includes('applies') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                                {{ 'Applies'|trans }}
                                            </button>
                                            <button type="button" @click="changeChartKPI('campaignDetails', 'clic')"
                                                    :class="[selectedChartKPI.campaignDetails.includes('clic') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                                {{ 'Clicks'|trans }}
                                            </button>
                                            <button type="button" @click="changeChartKPI('campaignDetails', 'jobs')"
                                                    :class="[selectedChartKPI.campaignDetails.includes('jobs') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                                {{ 'Jobs'|trans }}
                                            </button>
                                            <button type="button" @click="changeChartKPI('campaignDetails', 'cpa')"
                                                    :class="[selectedChartKPI.campaignDetails.includes('cpa') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                                CPA
                                            </button>
                                            <button type="button" @click="changeChartKPI('campaignDetails', 'cpc')"
                                                    :class="[selectedChartKPI.campaignDetails.includes('cpc') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                                CPC
                                            </button>
                                            <button type="button" @click="changeChartKPI('campaignDetails', 'cr')"
                                                    :class="[selectedChartKPI.campaignDetails.includes('cr') ? 'btn-primary' : 'btn-outline-primary', 'btn ml-2 btn-no-focus']">
                                                CR
                                            </button>
                                        </div>
                                    </div>
{#                                    <div class="mt-4">#}
{#                                        <button type="button" @click="showChartListCampaignDetail = !showChartListCampaignDetail" class="btn-select w-auto rounded-30 py-1">#}
{#                                            <span v-html="chartSelected.content"></span>#}
{#                                            <i class="ml-2 fal fa-chevron-down fa-1x"></i>#}
{#                                        </button>#}
{#                                        <div class="position-absolute bg-white py-4 dropdown-select-list shadow-1 rounded-2 mt-2 overflow-auto"#}
{#                                             v-show="showChartListCampaignDetail" ref="campaignDetailChartSelector">#}
{#                                            <div class="bg-white d-flex flex-column overflow-auto">#}
{#                                            <span class="py-2 px-4 cursor-pointer" @click="selectingChart(1)">#}
{#                                                <b>{{ 'chart'|trans }} 1 : </b>#}
{#                                                <i>{{ 'Clicks'|trans }} - {{ 'Applies'|trans }} - {{ 'Spend'|trans }} - {{ 'Jobs'|trans }} </i>#}
{#                                                <i class="fa fa-check-circle text-success ml-2" v-if="chartSelected.id === 1"></i>#}
{#                                            </span>#}
{#                                                <span class="py-2 px-4 cursor-pointer" @click="selectingChart(2)">#}
{#                                                <b>{{ 'chart'|trans }} 2 : </b>#}
{#                                                <i>CPA - CPC - CR</i>#}
{#                                                <i class="fa fa-check-circle text-success ml-2" v-if="chartSelected.id === 2"></i>#}
{#                                            </span>#}
{#                                            </div>#}
{#                                        </div>#}
{#                                    </div>#}
                                    <div class="my-auto">
                                        <line-chart :height="200"
                                                    :currency="advertiserCurrency"
                                                    key="chart-campaign-details"
                                                    :text-color="fontColor"
                                                    :chart-data="chartCampaignDetailsDS"
                                                    :chart-y-axes="chartCampaignDetailsYAxes"></line-chart>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 bg-white py-4 px-3 ml-2 rounded-2">
                                <div class="headers d-flex justify-content-between">
                                    <span class="publishers text-primary font-600 my-auto"><% publisherNameSelectedCampaignDetail %></span>
                                    <span class="period text-primary font-600 my-auto d-flex align-items-center">
                                        <i class="fal fa-clock mr-1"></i>
                                        <span class="small"><% campaignDetail.selectedPeriod.label %></span>
                                    </span>
                                </div>
                                <div class="content mb-3 mt-5">
                                    <div class="d-flex justify-content-between mt-2 pb-1">
                                        <span class="font-300">{{ 'Clicks'|trans }}</span>
                                        <div class="">
                                            <span class="font-700 text-primary"><% numberFormat(campaignDetail.data.sumClicks, 2) %></span>
                                            <span :class="[campaignDetail.data.percentClicks > 0 ? 'text-success' : 'text-danger', 'small font-italic']">
                                                <% campaignDetail.data.percentClicks > 0 ? '+' : '' %><% numberFormat(campaignDetail.data.percentClicks, 2) %>%
                                            </span>
                                            <i :class="[campaignDetail.data.percentClicks > 0 ? 'fa-long-arrow-up text-success' : 'fa-long-arrow-down text-danger', 'fas small']"></i>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-2 pb-1">
                                        <span class="font-300">{{ 'Applies'|trans }}</span>
                                        <div>
                                            <span class="font-700 text-primary"><% numberFormat(campaignDetail.data.sumApplies, 2) %></span>
                                            <span :class="[campaignDetail.data.percentApplies > 0 ? 'text-success' : 'text-danger', 'small font-italic']">
                                                <% campaignDetail.data.percentApplies > 0 ? '+' : '' %><% numberFormat(campaignDetail.data.percentApplies, 2) %>%
                                            </span>
                                            <i :class="[campaignDetail.data.percentApplies > 0 ? 'fa-long-arrow-up text-success' : 'fa-long-arrow-down text-danger', 'fas small']"></i>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-2 pb-1">
                                        <span class="font-300">{{ 'Spend'|trans }}</span>
                                        <div>
                                            <span class="font-700 text-primary">
                                                <% amountWithCurrency(numberFormat(campaignDetail.data.sumSpend, 0), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                            </span>
                                            <span :class="[campaignDetail.data.percentSpend > 0 ? 'text-success' : 'text-danger', 'small font-italic']">
                                                <% campaignDetail.data.percentSpend > 0 ? '+' : '' %><% numberFormat(campaignDetail.data.percentSpend, 2) %>%
                                            </span>
                                            <i :class="[campaignDetail.data.percentSpend > 0 ? 'fa-long-arrow-up text-success' : 'fa-long-arrow-down text-danger', 'fas small']"></i>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-2 pb-1">
                                        <span class="font-300">CPA</span>
                                        <div>
                                            <span class="font-700 text-primary">
                                                <% amountWithCurrency(numberFormat(campaignDetail.data.cpa, 2), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                            </span>
                                            <span :class="[campaignDetail.data.percentCpa > 0 ? 'text-danger' : 'text-success', 'small font-italic']">
                                                <% campaignDetail.data.percentCpa > 0 ? '+' : '' %><% numberFormat(campaignDetail.data.percentCpa, 2) %>%
                                            </span>
                                            <i :class="[campaignDetail.data.percentCpa > 0 ? 'fa-long-arrow-up text-danger' : 'fa-long-arrow-down text-success', 'fas small']"></i>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-2 pb-1">
                                        <span class="font-300">CPC</span>
                                        <div>
                                            <span class="font-700 text-primary">
                                                <% amountWithCurrency(numberFormat(campaignDetail.data.cpc, 2), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                            </span>
                                            <span :class="[campaignDetail.data.percentCpc > 0 ? 'text-danger' : 'text-success', 'small font-italic']">
                                                <% campaignDetail.data.percentCpc > 0 ? '+' : '' %><% numberFormat(campaignDetail.data.percentCpc, 2) %>%
                                            </span>
                                            <i :class="[campaignDetail.data.percentCpc > 0 ? 'fa-long-arrow-up text-danger' : 'fa-long-arrow-down text-success', 'fas small']"></i>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-2 pb-1">
                                        <span class="font-300">CR</span>
                                        <div>
                                            <span class="font-700 text-primary"><% numberFormat(campaignDetail.data.cr, 2) %>%</span>
                                            <span :class="[campaignDetail.data.percentCr > 0 ? 'text-success' : 'text-danger', 'small font-italic']">
                                                <% campaignDetail.data.percentCr > 0 ? '+' : '' %><% numberFormat(campaignDetail.data.percentCr, 2) %>%
                                            </span>
                                            <i :class="[campaignDetail.data.percentCr > 0 ? 'fa-long-arrow-up text-success' : 'fa-long-arrow-down text-danger', 'fas small']"></i>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-2 pb-1">
                                        <span class="font-300">{{ 'Jobs'|trans }}</span>
                                        <div>
                                            <span class="font-700 text-primary"><% numberFormat(campaignDetail.data.sumJob, 2) %></span>
                                            <span :class="[campaignDetail.data.percentCr > 0 ? 'text-success' : 'text-danger', 'small font-italic']">
                                                <% campaignDetail.data.percentJob > 0 ? '+' : '' %><% numberFormat(campaignDetail.data.percentJob, 2) %>%
                                            </span>
                                            <i :class="[campaignDetail.data.percentJob > 0 ? 'fa-long-arrow-up text-success' : 'fa-long-arrow-down text-danger', 'fas small']"></i>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-2 pb-1">
                                        <span class="font-300" data-tippy-content="{{ 'Number of jobs with applies by total of jobs'|trans }}">{{ 'Coverage rate'|trans }}</span>
                                        <div>
                                            <span class="font-700 text-primary"><% numberFormat(campaignDetail.data.coverage, 2) %></span>
                                            <span :class="[campaignDetail.data.percentCr > 0 ? 'text-success' : 'text-danger', 'small font-italic']">
                                                <% campaignDetail.data.percentCoverage > 0 ? '+' : '' %><% numberFormat(campaignDetail.data.percentCoverage, 2) %>%
                                            </span>
                                            <i :class="[campaignDetail.data.percentCoverage > 0 ? 'fa-long-arrow-up text-success' : 'fa-long-arrow-down text-danger', 'fas small']"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="simple-data-table mb-5 pb-3 mt-3 mr-n2">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-12 bg-white py-4 rounded-2 d-flex justify-content-between">
                                        <div class="px-0 d-flex my-auto">
                                            <span id="categoryFilter"
                                                  :class="[campaignDetail.filterTabSelected.key === 'consoCat'
                                                  ? 'chips_bordered' : 'chips_purple cursor-pointer',
                                                  'font-weight-bold mr-2 chips px-3 rounded-30']"
                                                  @click="campaignDetail.filterTabSelected = {label:'{{ 'categories'|trans }}', key: 'consoCat'}; reloadTippy()">
                                                {{ 'categories'|trans|capitalize }}
                                            </span>
                                            <span id="regionFilter"
                                                  :class="[campaignDetail.filterTabSelected.key === 'consoRegions'
                                                  ? 'chips_bordered' : 'chips_purple cursor-pointer',
                                                  'font-weight-bold mr-2 chips px-3 rounded-30']"
                                                  @click="campaignDetail.filterTabSelected = {label: '{{ 'Regions'|trans }}', key: 'consoRegions'}; reloadTippy()">
                                                {{ 'Regions'|trans }}
                                            </span>
                                            <span id="agregatorFilter"
                                                  :class="[campaignDetail.filterTabSelected.key === 'consoAgregators'
                                                  ? 'chips_bordered' : 'chips_purple cursor-pointer',
                                                  'font-weight-bold mr-2 chips px-3 rounded-30']"
                                                  @click="campaignDetail.filterTabSelected = {label: '{{ 'Publishers'|trans }}', key: 'consoAgregators'}; reloadTippy()"
                                                  v-if="campaignDetail?.data?.campaign?.type === 'self'">
                                                {{ 'Publishers'|trans }}
                                            </span>
                                            <span id="dateFilter"
                                                  :class="[campaignDetail.filterTabSelected.key === 'consoDates'
                                                  ? 'chips_bordered' : 'chips_purple cursor-pointer',
                                                  'font-weight-bold mr-2 chips px-3 rounded-30']"
                                                  @click="campaignDetail.filterTabSelected = {label: '{{ 'By date'|trans }}', key: 'consoDates'}; reloadTippy()">
                                                {{ 'By date'|trans }}
                                            </span>
                                            <span id="jobFilter"
                                                  :class="[campaignDetail.filterTabSelected.key === 'consoJobs'
                                                  ? 'chips_bordered' : 'chips_purple cursor-pointer',
                                                  'font-weight-bold mr-2 chips px-3 rounded-30']"
                                                  @click="campaignDetail.filterTabSelected = {label: '{{ 'jobs'|trans }}', key: 'consoJobs'}; reloadTippy()">
                                                {{ 'jobs'|trans|capitalize }}
                                            </span>
                                            <span id="mixFilter"
                                                  :class="[campaignDetail.filterTabSelected.key === 'consoCatRegion'
                                                  ? 'chips_bordered' : 'chips_purple cursor-pointer',
                                                  'font-weight-bold mr-2 chips px-3 rounded-30']"
                                                  @click="campaignDetail.filterTabSelected = {label: '{{ 'Find by'|trans }}', key: 'consoCatRegion'}; reloadTippy()">
                                                {{ 'Find by'|trans }}
                                            </span>
                                        </div>
                                        <div class="d-flex w-25 justify-content-end">
                                            <span class="publishers text-primary font-600 my-auto">
                                                <% publisherNameSelectedCampaignDetail %>
                                            </span>
                                            <span class="period text-primary font-600 ml-5 my-auto d-flex align-items-center">
                                                <i class="fal fa-clock mr-1"></i>
                                                <span class="small"><% campaignDetail.selectedPeriod.label %></span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-12 mt-2 bg-white py-3 rounded-2 d-flex justify-content-between align-items-center"
                                         v-if="campaignDetail.filterTabSelected.key === 'consoJobs'">
                                        <div class="d-flex align-items-center">
                                            <button type="button" class="btn rounded-30 mr-3 d-flex justify-content-center align-items-center"
                                                    :class="{ 'btn-success': campaignDetail.consoJobs.live, 'btn-default': !campaignDetail.consoJobs.live }"
                                                    @click="changeJobLive" :disabled="loading"
                                                    data-tippy-content="{{ 'Switch jobs currently live (in feed) / All campaign jobs'|trans }}"
                                                    style="height: 30px; width: 30px;">
                                                <i class="fa fa-bolt small"></i>
                                            </button>
                                            <div class="pagination position-relative">
                                                <span class="mr-3">{{ 'page'|trans|capitalize }} <b><% campaignDetail.consoJobs.page %></b> {{ 'page of'|trans }} <% jobPageLimit %></span>
                                                <div class="fade-in-02 d-flex" v-if="jobPageLimit > 1">
                                                    <i class="pr-2 fas fa-step-backward mr-2" :class="{disabled: loading || campaignDetail.consoJobs.page < 2}" @click="changePageConsoJob(-jobPageLimit)"></i>
                                                    <i class="pr-2 fal fa-chevron-left mr-2" :class="{disabled: loading || campaignDetail.consoJobs.page < 2}" @click="changePageConsoJob(-1)"></i>
                                                    <i class="pr-2 fal fa-chevron-right mr-2" :class="{disabled: loading || campaignDetail.consoJobs.page >= jobPageLimit}" @click="changePageConsoJob(1)"></i>
                                                    <i class="fas fa-step-forward" :class="{disabled: loading || campaignDetail.consoJobs.page >= jobPageLimit}" @click="changePageConsoJob(jobPageLimit)"></i>
                                                </div>
                                            </div>
                                        </div>
{#                                        <div class="btn-group btn-group-sm">#}
{#                                            <div class="btn-group btn-group-sm">#}
{#                                                <button type="button" class="btn border px-3"#}
{#                                                        :class="{ 'btn-success': campaignDetail.consoJobs.live, 'btn-default': !campaignDetail.consoJobs.live }"#}
{#                                                        @click="changeJobLive" :disabled="loading"#}
{#                                                        data-tippy-content="{{ 'Switch jobs currently live (in feed) / All campaign jobs'|trans }}">#}
{#                                                    <i class="fa fa-bolt small"></i>#}
{#                                                </button>#}
{#                                            </div>#}
{#                                            <div class="btn-group btn-group-sm cursor-default">#}
{#                                                <button type="button" class="btn btn-default cursor-default border btn-no-focus"><% consoJobs?.jobs ? consoJobs?.jobs.length : 0 %> jobs</button>#}
{#                                            </div>#}
{#                                            <div class="btn-group btn-group-sm">#}
{#                                                <button type="button" class="btn btn-default border cursor-default btn-no-focus">#}
{#                                                    Page <% campaignDetail.consoJobs.page %> / <% jobPageLimit %>#}
{#                                                </button>#}
{#                                            </div>#}
{#                                            <div class="btn-group btn-group">#}
{#                                                <button type="button" class="btn btn-default border" title="First"#}
{#                                                        :disabled="loading || campaignDetail.consoJobs.page < 2" @click="changePageConsoJob(-jobPageLimit)">#}
{#                                                    <i class="fa fa-step-backward small"></i>#}
{#                                                </button>#}
{#                                            </div>#}
{#                                            <div class="btn-group btn-group">#}
{#                                                <button type="button" class="btn btn-default border" title="Previous"#}
{#                                                        :disabled="loading || campaignDetail.consoJobs.page < 2" @click="changePageConsoJob(-1)">#}
{#                                                    <i class="fa fa-chevron-left small"></i>#}
{#                                                </button>#}
{#                                            </div>#}
{#                                            <div class="btn-group btn-group">#}
{#                                                <button type="button" class="btn btn-default border" title="Next"#}
{#                                                        :disabled="loading || campaignDetail.consoJobs.page >= jobPageLimit" @click="changePageConsoJob(1)">#}
{#                                                    <i class="fa fa-chevron-right small"></i>#}
{#                                                </button>#}
{#                                            </div>#}
{#                                            <div class="btn-group btn-group">#}
{#                                                <button type="button" class="btn btn-default border" title="Last"#}
{#                                                        :disabled="loading || campaignDetail.consoJobs.page >= jobPageLimit"#}
{#                                                        @click="changePageConsoJob(jobPageLimit)">#}
{#                                                    <i class="fa fa-step-forward small"></i>#}
{#                                                </button>#}
{#                                            </div>#}
{#                                        </div>#}
                                        <span class="chips chips_purple">
                                            <% consoJobs.filteredJobsCount %> {{ 'jobs'|trans }}
                                        </span>
                                        <div class="section-search input-group px-0 col-4">
                                            <input type="search" aria-controls="search-table" placeholder="{{ 'Search'|trans }}" class="form-control border"
                                                   v-model="campaignDetail.consoJobs.filter" @search="searchConsoJob">
                                            <span class="input-group-append">
                                                <button type="button" class="btn btn-outline-secondary" @click="searchConsoJob">
                                                    <i class="fal fa-search"></i>
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            {######################### CONSOS HEADERS ##########################}
                            
                            <div class="table-headers container-fluid rounded-2 mt-2 py-4 mb-2" style="box-shadow: none; background-color: rgba(235, 239, 248, 0.55);">
                                
                                {######################### CONSOS PUBLISHERS AND DATES ##########################}
                                <div class="row text-center"
                                     v-show="campaignDetail.filterTabSelected.key === 'consoAgregators' || campaignDetail.filterTabSelected.key === 'consoDates'">
                                    <div class="col-md-3 text-left my-auto overflow-hidden position-relative">
                                        <span class="cursor-pointer" @click="orderConso(campaignDetail.filterTabSelected.key, 'name', 'String')">
                                            <% campaignDetail.filterTabSelected.label %>
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso(campaignDetail.filterTabSelected.key, 'name', 'String')"
                                           :class="{'fa-sort-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option !== 'name',
                                            'fa-sort-amount-down-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'name' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'name' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-2 px-1 my-auto overflow-hidden position-relative overflow-hidden position-relative">
                                        <span class="cursor-pointer" data-tippy-content="{{ 'All applications for this campaign'|trans }}"
                                              @click="orderConso(campaignDetail.filterTabSelected.key, 'applies', 'Number')">
                                            {{ 'Applies'|trans }}
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso(campaignDetail.filterTabSelected.key, 'applies', 'Number')"
                                           :class="{'fa-sort-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option !== 'applies',
                                            'fa-sort-amount-down-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'applies' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'applies' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-2 px-1 my-auto overflow-hidden position-relative">
                                        <span class="cursor-pointer" data-tippy-content="{{ 'All clicks for this campaign'|trans }}"
                                              @click="orderConso(campaignDetail.filterTabSelected.key, 'clicks', 'Number')">
                                            {{ 'Clicks'|trans }}
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso(campaignDetail.filterTabSelected.key, 'clicks', 'Number')"
                                           :class="{'fa-sort-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option !== 'clicks',
                                            'fa-sort-amount-down-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'clicks' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'clicks' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-2 px-1 my-auto overflow-hidden position-relative">
                                        <span class="cursor-pointer" data-tippy-content="{{ 'Already used expense for this campaign'|trans }}"
                                              @click="orderConso(campaignDetail.filterTabSelected.key, 'spend', 'Number')">
                                            {{ 'Spend'|trans }}
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso(campaignDetail.filterTabSelected.key, 'spend', 'Number')"
                                           :class="{'fa-sort-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option !== 'spend',
                                            'fa-sort-amount-down-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'spend' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'spend' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-1 my-auto overflow-hidden position-relative">
                                        <span class="cursor-pointer" data-tippy-content="{{ 'Total spend by total applies for this campaign'|trans }}"
                                              @click="orderConso(campaignDetail.filterTabSelected.key, 'cpa', 'Number')">
                                            CPA
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso(campaignDetail.filterTabSelected.key, 'cpa', 'Number')"
                                           :class="{'fa-sort-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option !== 'cpa',
                                            'fa-sort-amount-down-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'cpa' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'cpa' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-1 my-auto overflow-hidden position-relative">
                                        <span class="cursor-pointer" data-tippy-content="{{ 'Total spend by total clicks for this campaign'|trans }}"
                                              @click="orderConso(campaignDetail.filterTabSelected.key, 'cpc', 'Number')">
                                            CPC
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso(campaignDetail.filterTabSelected.key, 'cpc', 'Number')"
                                           :class="{'fa-sort-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option !== 'cpc',
                                            'fa-sort-amount-down-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'cpc' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'cpc' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-1 my-auto overflow-hidden position-relative">
                                        <span class="cursor-pointer" data-tippy-content="{{ 'Percentage of applies by clicks for this campaign'|trans }}"
                                              @click="orderConso(campaignDetail.filterTabSelected.key, 'cr', 'Number')">
                                            CR
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso(campaignDetail.filterTabSelected.key, 'cr', 'Number')" style="right: 10px;"
                                           :class="{'fa-sort-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option !== 'cr',
                                            'fa-sort-amount-down-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'cr' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'cr' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'DESC'}"></i>
                                    </div>
                                </div>
                                
                                {######################### CONSOS CATEGORIES / REFGIONS / MIX ##########################}
                                <div class="row text-center" v-show="campaignDetail.filterTabSelected.key === 'consoCat' || campaignDetail.filterTabSelected.key === 'consoRegions' || campaignDetail.filterTabSelected.key === 'consoCatRegion'">
                                    <div class="col-md-6 text-left my-auto overflow-hidden position-relative">
                                        <span class="cursor-pointer" @click="orderConso(campaignDetail.filterTabSelected.key, 'name', 'String')">
                                            <% capitalize(campaignDetail.filterTabSelected.label) %>
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso(campaignDetail.filterTabSelected.key, 'name', 'String')"
                                           :class="{'fa-sort-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option !== 'name',
                                            'fa-sort-amount-down-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'name' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'name' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-1 my-auto overflow-hidden position-relative">
                                        <span class="cursor-pointer" :data-tippy-content="campaignTypeSwitch === 'self'
                                              ? '{{ 'All Jobs for a campaign'|trans }}' : '{{ 'All jobs with minimum one click or one application' |trans}}'"
                                              @click="orderConso(campaignDetail.filterTabSelected.key, 'nbJob', 'Number')">
                                            {{ 'Jobs'|trans }}
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso(campaignDetail.filterTabSelected.key, 'nbJob', 'Number')"
                                           :class="{'fa-sort-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option !== 'nbJob',
                                            'fa-sort-amount-down-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'nbJob' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'nbJob' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-2 px-1 my-auto overflow-hidden position-relative">
                                        <span class="cursor-pointer" data-tippy-content="{{ 'All applications for this campaign'|trans }}"
                                              @click="orderConso(campaignDetail.filterTabSelected.key, 'applies', 'Number')">
                                            {{ 'Applies'|trans }}
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso(campaignDetail.filterTabSelected.key, 'applies', 'Number')"
                                           :class="{'fa-sort-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option !== 'applies',
                                            'fa-sort-amount-down-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'applies' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'applies' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-1 my-auto overflow-hidden position-relative">
                                        <span class="cursor-pointer" data-tippy-content="{{ 'Total spend by total applies for this campaign'|trans }}"
                                              @click="orderConso(campaignDetail.filterTabSelected.key, 'cpa', 'Number')">
                                            CPA
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso(campaignDetail.filterTabSelected.key, 'cpa', 'Number')"
                                           :class="{'fa-sort-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option !== 'cpa',
                                            'fa-sort-amount-down-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'cpa' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'cpa' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-2 my-auto overflow-hidden position-relative">
                                        <span class="cursor-pointer" @click="orderConso(campaignDetail.filterTabSelected.key, 'moy', 'Number')">
                                            {{ 'Average applies by job'|trans }}
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso(campaignDetail.filterTabSelected.key, 'moy', 'Number')" style="right: 10px;"
                                           :class="{'fa-sort-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option !== 'moy',
                                            'fa-sort-amount-down-alt': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'moy' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail[campaignDetail.filterTabSelected.key].order.option === 'moy' && campaignDetail[campaignDetail.filterTabSelected.key].order.direction === 'DESC'}"></i>
                                    </div>
                                </div>
                                
                                {######################### CONSOS JOBS ##########################}
                                <div class="row text-center" v-show="campaignDetail.filterTabSelected.key === 'consoJobs'">
                                    <div class="col text-left overflow-hidden text-ellipsis position-relative">
                                        <span class="cursor-pointer" @click="orderConso('consoJobs', 'id_ext', 'String')">
                                            {{ 'Id'|trans }}
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso('consoJobs', 'id_ext', 'String')"
                                           :class="{'fa-sort-alt': campaignDetail.consoJobs.order?.option !== 'id_ext',
                                            'fa-sort-amount-down-alt': campaignDetail.consoJobs.order?.option === 'id_ext' && campaignDetail.consoJobs.order?.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail.consoJobs.order?.option === 'id_ext' && campaignDetail.consoJobs.order?.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-3 text-left overflow-hidden text-ellipsis position-relative">
                                        <span class="cursor-pointer text-capitalize" @click="orderConso('consoJobs', 'title', 'String')">
                                            <% campaignDetail.filterTabSelected.label %>
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso('consoJobs', 'title', 'String')"
                                           :class="{'fa-sort-alt': campaignDetail.consoJobs.order?.option !== 'title',
                                            'fa-sort-amount-down-alt': campaignDetail.consoJobs.order?.option === 'title' && campaignDetail.consoJobs.order?.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail.consoJobs.order?.option === 'title' && campaignDetail.consoJobs.order?.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col overflow-hidden text-ellipsis position-relative">
                                        <span class="cursor-pointer" data-tippy-content="{{ 'All applications for this job'|trans }}"
                                              @click="orderConso('consoJobs', 'applies', 'Number')">
                                            {{ 'Applies'|trans }}
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso('consoJobs', 'applies', 'Number')"
                                           :class="{'fa-sort-alt': campaignDetail.consoJobs.order?.option !== 'applies',
                                            'fa-sort-amount-down-alt': campaignDetail.consoJobs.order?.option === 'applies' && campaignDetail.consoJobs.order?.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail.consoJobs.order?.option === 'applies' && campaignDetail.consoJobs.order?.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col overflow-hidden text-ellipsis position-relative">
                                        <span class="cursor-pointer" data-tippy-content="{{ 'Already used expense for this job'|trans }}"
                                              @click="orderConso('consoJobs', 'spend', 'Number')">
                                            {{ 'Spend'|trans }}
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso('consoJobs', 'spend', 'Number')"
                                           :class="{'fa-sort-alt': campaignDetail.consoJobs.order?.option !== 'spend',
                                            'fa-sort-amount-down-alt': campaignDetail.consoJobs.order?.option === 'spend' && campaignDetail.consoJobs.order?.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail.consoJobs.order?.option === 'spend' && campaignDetail.consoJobs.order?.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-1 overflow-hidden text-ellipsis position-relative">
                                        <span class="cursor-pointer" data-tippy-content="{{ 'All clicks for this job'|trans }}"
                                              @click="orderConso('consoJobs', 'clicks', 'Number')">
                                            {{ 'Clicks'|trans }}
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso('consoJobs', 'clicks', 'Number')"
                                           :class="{'fa-sort-alt': campaignDetail.consoJobs.order?.option !== 'clicks',
                                            'fa-sort-amount-down-alt': campaignDetail.consoJobs.order?.option === 'clicks' && campaignDetail.consoJobs.order?.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail.consoJobs.order?.option === 'clicks' && campaignDetail.consoJobs.order?.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-1">
                                        <span class="cursor-pointer" data-tippy-content="{{ 'Total spend by total applies for this job'|trans }}"
                                              @click="orderConso('consoJobs', 'cpa', 'Number')">
                                            CPA
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso('consoJobs', 'cpa', 'Number')"
                                           :class="{'fa-sort-alt': campaignDetail.consoJobs.order?.option !== 'cpa',
                                            'fa-sort-amount-down-alt': campaignDetail.consoJobs.order?.option === 'cpa' && campaignDetail.consoJobs.order?.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail.consoJobs.order?.option === 'cpa' && campaignDetail.consoJobs.order?.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-1">
                                        <span class="cursor-pointer" data-tippy-content="{{ 'Total spend by total clicks for this job'|trans }}"
                                              @click="orderConso('consoJobs', 'cpc', 'Number')">
                                            CPC
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso('consoJobs', 'cpc', 'Number')"
                                           :class="{'fa-sort-alt': campaignDetail.consoJobs.order?.option !== 'cpc',
                                            'fa-sort-amount-down-alt': campaignDetail.consoJobs.order?.option === 'cpc' && campaignDetail.consoJobs.order?.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail.consoJobs.order?.option === 'cpc' && campaignDetail.consoJobs.order?.direction === 'DESC'}"></i>
                                    </div>
                                    <div class="col-md-1">
                                        <span class="cursor-pointer" data-tippy-content="{{ 'Percentage of applies by clicks for this job'|trans }}"
                                              @click="orderConso('consoJobs', 'cr', 'Number')">
                                            CR
                                        </span>
                                        <i class="fa small column-sorter" @click="orderConso('consoJobs', 'cr', 'Number')" style="right: 15px;"
                                           :class="{'fa-sort-alt': campaignDetail.consoJobs.order?.option !== 'cr',
                                            'fa-sort-amount-down-alt': campaignDetail.consoJobs.order?.option === 'cr' && campaignDetail.consoJobs.order?.direction === 'ASC',
                                            'fa-sort-amount-down': campaignDetail.consoJobs.order?.option === 'cr' && campaignDetail.consoJobs.order?.direction === 'DESC'}"></i>
                                    </div>
                                </div>
                            </div>
    
                            {######################### CONSOS CATEGORIES ##########################}
                            <div id="categoriesFilter" class="table-content" v-show="campaignDetail.filterTabSelected.key === 'consoCat'">
                                <div id="categoriesFilterLoader" class="small-loader" v-show="campaignDetailsLoader.consoCat"></div>
                                <div class="container-fluid py-3 mb-2 bg-white rounded-2 simple-line-data" v-for="category in orderedConsoCat">
                                    <div class="row text-center">
                                        <div class="col-md-6 text-left">
                                            <% category.name %>
                                        </div>
                                        <div class="col-md-1 border-left">
                                            <% numberFormat(category.nbJob, 0) %>
                                        </div>
                                        <div class="col-md-2 border-left">
                                            <% numberFormat(category.applies, 0) %>
                                        </div>
                                        <div class="col-md-1 mx-0 border-left">
                                            <% amountWithCurrency(numberFormat(category.cpa, 2), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                        </div>
                                        <div class="col-md-2 border-left">
                                            <% numberFormat(category.moy, 2) %>
                                        </div>
                                    </div>
                                </div>
                            </div>
    
                            {######################### CONSOS REGIONS ##########################}
                            <div id="regionsFilter" class="table-content" v-show="campaignDetail.filterTabSelected.key === 'consoRegions'">
                                <div id="regionsFilterLoader" class="small-loader" v-show="campaignDetailsLoader.consoRegions"></div>
                                <div class="container-fluid py-3 mb-2 bg-white rounded-2 simple-line-data" v-for="region in orderedConsoRegions">
                                    <div class="row text-center">
                                        <div class="col-md-6 text-left">
                                            <% region.name %>
                                        </div>
                                        <div class="col-md-1 border-left">
                                            <% numberFormat(region.nbJob, 0) %>
                                        </div>
                                        <div class="col-md-2 border-left">
                                            <% numberFormat(region.applies, 0) %>
                                        </div>
                                        <div class="col-md-1 mx-0 border-left">
                                            <% amountWithCurrency(numberFormat(region.cpa, 2), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                        </div>
                                        <div class="col-md-2 border-left">
                                            <% numberFormat(region.moy, 2) %>
                                        </div>
                                    </div>
                                </div>
                            </div>
    
                            {######################### CONSOS MIX ##########################}
                            <div id="mixesFilter" v-show="campaignDetail.filterTabSelected.key === 'consoCatRegion'">
                                <div class="bg-white px-5 py-5">
                                    <div class="d-flex mx-4 mt-4">
                                        <div class="col pl-4 pr-0">
                                            <input-dropdown
                                            v-model="campaignDetail.filterCategorySelected"
                                            :init-value="campaignDetail.filterCategorySelected"
                                            placeholder="{{ 'Select a category'|trans }}"
                                            label="{{ 'Select a category'|trans }}"
                                            :data-list="formattedCategoriesForSelectOption"
                                            id="filterCategorySelected">
                                            </input-dropdown>
                                        </div>
                                        <div class="col pl-4 pr-0">
                                            <input-dropdown
                                            v-model="campaignDetail.filterRegionSelected"
                                            :init-value="campaignDetail.filterRegionSelected"
                                            placeholder="{{ 'Select a region'|trans }}"
                                            label="{{ 'Select a region'|trans }}"
                                            :data-list="formattedRegionsForSelectOption"
                                            id="filterRegionSelected">
                                            </input-dropdown>
                                        </div>
                                    </div>
                                    <div class="col pl-4 my-auto pt-4 text-center">
                                        <button class="btn btn-primary rounded-30 px-4"
                                                :disabled="!isCatOrRegionFilterSelected"
                                                @click="getCampaignDetailDataFiltered">{{ 'submit'|trans|capitalize }}</button>
                                    </div>
                                </div>
                                <div class="container-fluid py-3 mb-2 bg-white rounded-2 table-content">
                                    <div id="mixFilterLoader" class="small-loader" v-show="campaignDetailsLoader.mixFilter"></div>
                                    <div class="row text-center align-items-center" v-if="!hasMsgInConsoCatRegion && Object.keys(consoCatRegion).length > 0">
                                        <div class="col-md-6 text-left" v-html="consoCatRegion.name">
                                        </div>
                                        <div class="col-md-1 border-left">
                                            <% numberFormat(consoCatRegion.nbJob, 0) %>
                                        </div>
                                        <div class="col-md-2 border-left">
                                            <% numberFormat(consoCatRegion.applies, 0) %>
                                        </div>
                                        <div class="col-md-1 border-left">
                                            <% amountWithCurrency(numberFormat(consoCatRegion.cpa), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                        </div>
                                        <div class="col-md-2 border-left">
                                            <% numberFormat(consoCatRegion.moy) %>
                                        </div>
                                    </div>
                                    <div class="row" v-if="hasMsgInConsoCatRegion && consoCatRegion.msg.info !== undefined">
                                        <span class="font-600 col-12 text-center text-primary"> <% consoCatRegion.msg.info %></span>
                                    </div>
                                    <div class="alert alert-danger text-danger py-1 text-center" v-if="hasMsgInConsoCatRegion && consoCatRegion.msg.error !== undefined">
                                        <i class="fa fa-exclamation-triangle"></i>
                                        <span class="font-600 text-primary"> <% consoCatRegion.msg.error %></span>
                                    </div>
                                </div>
                            </div>
    
                            {######################### CONSOS PUBLISHERS ##########################}
                            <div id="agregatorsFilter" class="table-content" v-show="campaignDetail.filterTabSelected.key === 'consoAgregators'">
                                <div id="agregatorsFilterLoader" class="small-loader" v-show="campaignDetailsLoader.consoAgregators"></div>
                                <div class="container-fluid py-3 mb-2 bg-white rounded-2 simple-line-data" v-for="agregator in orderedConsoAgregators">
                                    <div class="row text-center align-items-center">
                                        <div class="col-md-3 text-left">
                                            <img :src="agregator.logo" alt="" class="mr-2" style="width: 35px"/>
                                            <% agregator.name %>
                                        </div>
                                        <div class="col-md-2 border-left">
                                            <% numberFormat(agregator.applies, 0) %>
                                        </div>
                                        <div class="col-md-2 border-left">
                                            <% numberFormat(agregator.clicks, 0) %>
                                        </div>
                                        <div class="col-md-2 border-left">
                                            <% amountWithCurrency(numberFormat(agregator.spend, 0), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                        </div>
                                        <div class="col-md-1 border-left">
                                            <% amountWithCurrency(numberFormat(agregator.cpa), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                        </div>
                                        <div class="col-md-1 border-left">
                                            <% amountWithCurrency(numberFormat(agregator.cpc), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                        </div>
                                        <div class="col-md-1 border-left">
                                            <% numberFormat(agregator.cr, 2) + '%' %>
                                        </div>
                                    </div>
                                </div>
                            </div>
    
                            {######################### CONSOS DATES ##########################}
                            <div class="table-content" v-show="campaignDetail.filterTabSelected.key === 'consoDates'">
                                <div id="datesFilterLoader" class="small-loader" v-show="campaignDetailsLoader.consoDates"></div>
                                <div class="container-fluid py-3 mb-2 bg-white rounded-2 simple-line-data" v-for="consoPeriod in orderedConsoDates">
                                    <div class="row text-center">
                                        <div class="col-md-3 text-left">
                                            <% consoPeriod.name %>
                                        </div>
                                        <div class="col-md-2 border-left">
                                            <% numberFormat(consoPeriod.applies, 0) %>
                                        </div>
                                        <div class="col-md-2 border-left">
                                            <% numberFormat(consoPeriod.clicks, 0) %>
                                        </div>
                                        <div class="col-md-2 border-left">
                                            <% amountWithCurrency(numberFormat(consoPeriod.spend, 0), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                        </div>
                                        <div class="col-md-1 border-left">
                                            <% amountWithCurrency(numberFormat(consoPeriod.cpa), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                        </div>
                                        <div class="col-md-1 border-left">
                                            <% amountWithCurrency(numberFormat(consoPeriod.cpc), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                        </div>
                                        <div class="col-md-1 border-left">
                                            <% numberFormat(consoPeriod.cr, 2) + '%' %>
                                        </div>
                                    </div>
                                </div>
                            </div>
    
                            {######################### CONSOS JOBS ##########################}
                            <div class="table-content" v-show="campaignDetail.filterTabSelected.key === 'consoJobs'">
                                <div id="jobsFilterLoader" class="small-loader" v-show="campaignDetailsLoader.consoJobs"></div>
                                <div class="container-fluid py-3 mb-2 bg-white rounded-2 simple-line-data" v-for="consoJob in consoJobs.jobs">
                                    <div class="row text-center align-items-center">
                                        <div class="col text-left overflow-hidden text-ellipsis">
                                            <% consoJob.idExt %>
                                        </div>
                                        <div class="col-md-3 text-left overflow-hidden text-ellipsis border-left">
                                            <% consoJob.title %>
                                        </div>
                                        <div class="col border-left">
                                            <% numberFormat(consoJob.applies, 0) %>
                                        </div>
                                        <div class="col border-left">
                                            <% amountWithCurrency(numberFormat(consoJob.spend, 0), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                        </div>
                                        <div class="col-md-1 border-left">
                                            <% numberFormat(consoJob.clicks, 0) %>
                                        </div>
                                        <div class="col-md-1 border-left">
                                            <% amountWithCurrency(numberFormat(consoJob.cpa), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                        </div>
                                        <div class="col-md-1 border-left">
                                            <% amountWithCurrency(numberFormat(consoJob.cpc), getCurrencyFromCodeIso(campaignDetail.data?.campaign?.currency)) %>
                                        </div>
                                        <div class="col-md-1 border-left">
                                            <% numberFormat(consoJob.cr, 2) + '%' %>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>

{#        #}{#        Start Histories      #}
{#        <div class="bg-white histories-modal d-none px-5 pt-4 pb-5" id="modal-histories">#}
{#            <div class="h-100 w-100 overflow-hidden">#}
{#                <div class="header d-flex flex-column pl-2 mb-5">#}
{#                    <div class="slider-icon-group active ml-auto" style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);" @click="closeSideModal('campaignHistory')">#}
{#                        <div class="slider-icon">#}
{#                            <i class="fal fa-times text-white"></i>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="title mt-3">#}
{#                        <div class="">#}
{#                            #}{#                            <i class="fal fa-tasks"></i>#}
{#                            <i class="fal fa-history font-800" style="color: #1d446b; font-weight: 800;"  ></i>#}
{#                            <span class="ml-3 text-secondary">Campaign history</span>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="body-form mt-2 h-100 histories" style="overflow-y: scroll;">#}
{#                    <div class="w-100 px-2 py-3 history-teaser cursor-pointer" style="border-left: 7px solid #7FEF00; background-color: rgba(127, 239, 0, .06)" @click="showViewHistory">#}
{#                        <div class="d-flex justify-content-between">#}
{#                            <span class="font-500 text-success">Current version</span>#}
{#                            <span class="font-italic ">from</span>#}
{#                            <span class="font-italic font-600 text-success">19/02/2020</span>#}
{#                        </div>#}
{#                        <div class="d-flex justify-content-between mt-1">#}
{#                            <small class="font-italic text-success">Modify</small>#}
{#                            <span>by</span>#}
{#                            <span class="font-600 text-primary">Test. B</span>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="w-100 px-2 py-3 mt-1 history-teaser cursor-pointer" style="border-left: 7px solid rgb(181, 181, 181); background-color: rgba(181, 181, 181, .06)" @click="showViewHistory">#}
{#                        <div class="d-flex justify-content-between">#}
{#                            <span class="font-500">version 11</span>#}
{#                            <span class="font-italic">from</span>#}
{#                            <span class="font-italic font-600">19/02/2020</span>#}
{#                        </div>#}
{#                        <div class="d-flex justify-content-between mt-1">#}
{#                            <small class="font-italic">Modify</small>#}
{#                            <span>by</span>#}
{#                            <span class="font-600">Test. B</span>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="w-100 px-2 py-3 mt-1 history-teaser cursor-pointer" style="border-left: 7px solid rgb(181, 181, 181); background-color: rgba(181, 181, 181, .06)" @click="showViewHistory">#}
{#                        <div class="d-flex justify-content-between">#}
{#                            <span class="font-500">version 11</span>#}
{#                            <span class="font-italic">from</span>#}
{#                            <span class="font-italic font-600">19/02/2020</span>#}
{#                        </div>#}
{#                        <div class="d-flex justify-content-between mt-1">#}
{#                            <small class="font-italic">Modify</small>#}
{#                            <span>by</span>#}
{#                            <span class="font-600">Test. B</span>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="w-100 px-2 py-3 mt-1 history-teaser cursor-pointer" style="border-left: 7px solid rgb(181, 181, 181); background-color: rgba(181, 181, 181, .06)" @click="showViewHistory">#}
{#                        <div class="d-flex justify-content-between">#}
{#                            <span class="font-500">version 11</span>#}
{#                            <span class="font-italic">from</span>#}
{#                            <span class="font-italic font-600">19/02/2020</span>#}
{#                        </div>#}
{#                        <div class="d-flex justify-content-between mt-1">#}
{#                            <small class="font-italic">Modify</small>#}
{#                            <span>by</span>#}
{#                            <span class="font-600">Test. B</span>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="w-100 px-2 py-3 mt-1 history-teaser cursor-pointer" style="border-left: 7px solid rgb(181, 181, 181); background-color: rgba(181, 181, 181, .06)" @click="showViewHistory">#}
{#                        <div class="d-flex justify-content-between">#}
{#                            <span class="font-500">version 11</span>#}
{#                            <span class="font-italic">from</span>#}
{#                            <span class="font-italic font-600">19/02/2020</span>#}
{#                        </div>#}
{#                        <div class="d-flex justify-content-between mt-1">#}
{#                            <small class="font-italic">Modify</small>#}
{#                            <span>by</span>#}
{#                            <span class="font-600">Test. B</span>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="w-100 px-2 py-3 mt-1 history-teaser cursor-pointer" style="border-left: 7px solid rgb(181, 181, 181); background-color: rgba(181, 181, 181, .06)" @click="showViewHistory">#}
{#                        <div class="d-flex justify-content-between">#}
{#                            <span class="font-500">version 11</span>#}
{#                            <span class="font-italic">from</span>#}
{#                            <span class="font-italic font-600">19/02/2020</span>#}
{#                        </div>#}
{#                        <div class="d-flex justify-content-between mt-1">#}
{#                            <small class="font-italic">Modify</small>#}
{#                            <span>by</span>#}
{#                            <span class="font-600">Test. B</span>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#        #}{#        End Histories      #}

{#        #}{#    start  cart histoires     #}
{#        <div class="bg-white modal-history-modal px-5 pt-4 pb-5" id="modal-view-history">#}
{#            <div class="h-100 w-100 overflow-hidden">#}
{#                <div class="header d-flex flex-column pl-2 mb-5">#}
{#                    <div class="slider-icon-group active ml-auto d-none" style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);" @click="closeSideModal('campaignHistoryDetail')">#}
{#                        <div class="slider-icon">#}
{#                            <i class="fal fa-times text-white"></i>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="title mt-3 d-flex justify-content-between">#}
{#                        <div class="">#}
{#                            #}{#                            <i class="fal fa-tasks"></i>#}
{#                            <i class="fal fa-history font-800" style="color: #1d446b; font-weight: 800;"  ></i>#}
{#                            <span class="mx-3 font-700 text-secondary">Version 11</span>#}
{#                            <i class="text-secondary">from</i>#}
{#                            <span class="ml-3 font-700">19/02/2020  15:35</span>#}
{#                        </div>#}
{#                        <div>#}
{#                            <i class="text-secondary">modify by</i>#}
{#                            <span class="ml-3 font-700">Test T.</span>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="body-form mt-2 h-100 histories" style="overflow-y: scroll;">#}
{#                    <table class="table table-striped my-5">#}
{#                        <thead>#}
{#                        <tr>#}
{#                            <th scope="col">#</th>#}
{#                            <th scope="col">Name</th>#}
{#                            <th scope="col">Spend</th>#}
{#                            <th scope="col">Applies</th>#}
{#                            <th scope="col">CPC</th>#}
{#                            <th scope="col">CPA</th>#}
{#                            <th scope="col">CR</th>#}
{#                            <th scope="col">Budget</th>#}
{#                            <th scope="col">Status</th>#}

{#                        </tr>#}
{#                        </thead>#}
{#                        <tbody>#}
{#                        <tr>#}
{#                            <th scope="row">recent</th>#}
{#                            <td> <span class="text-danger font-700 border">C</span>adremploi_<span class="text-danger font-700  border">all</span></td>#}
{#                            <td> <span class="text-danger font-700  border">10,000.00 €</span> </td>#}
{#                            <td>50k</td>#}
{#                            <td>150</td>#}
{#                            <td>0</td>#}
{#                            <td>€ 1,0<span class="text-danger font-700  border">3</span></td>#}
{#                            <td>€ 3,889.41</td>#}
{#                            <td>active</td>#}
{#                        </tr>#}
{#                        <tr>#}
{#                            <th scope="row">Old</th>#}
{#                            <td>cadremploi</td>#}
{#                            <td>8,000.00 €</td>#}
{#                            <td>50k</td>#}
{#                            <td>150</td>#}
{#                            <td>0</td>#}
{#                            <td>€ 1,05</td>#}
{#                            <td>€ 3,889.41</td>#}
{#                            <td><span class="text-danger font-700  border">inactive</span></td>#}
{#                        </tr>#}
{#                        </tbody>#}
{#                    </table>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#        #}{#    end  cart histoires     #}

        <div class="modal fade" id="history-modal" tabindex="-1" role="dialog" aria-labelledby="campaignmodal" 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" id="campaignmodal">{{ '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>

        <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">
                        <div id="exportModalLoader" class="small-loader" style="display: none;"></div>

                        <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>
                        </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="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 ? '{{ 'those campaigns'|trans }}' : '{{ 'this campaign'|trans }}' %> ?</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;" 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">
                            <span>{{ 'Restore confirmation'|trans }}</span>
                        </h4>
                    </div>
                    <div class="modal-body p-5">
                        <p class="text-center text-primary mb-4">
                            <span v-show="campaignToRestoreId === null">
                                {{ 'Choose the new status for the restored campaign'|trans({'%count%': 2}) }}
                            </span>
                            <span v-show="campaignToRestoreId !== null">
                                {{ 'Choose the new status for the restored campaign'|trans({'%count%': 1}) }}
                            </span>
                        </p>
                        <div class="d-flex justify-content-center align-items-center">
                            <button type="button" class="btn btn-success rounded-30 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 class="modal-footer border-0 d-flex justify-content-center mb-3">
                        <button type="reset" class="btn btn-light px-4" data-dismiss="modal" @click="restoreCampaignModalAction('hide')">
                            {{ 'Cancel'|trans }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

{#        <div class="fade modal-backdrop d-none" id="modal_export_backdrop" style="z-index: 99998;"></div>#}
        <div :class="[showCampaignReportPanel || showCampaignDetailPanel ? 'show' : '', 'modal-backdrop']" style="visibility: visible !important;"
             id="modal-backdrop" ref="modalBackdrop" v-show="showCampaignReportPanel || showCampaignDetailPanel"></div>
        
        <span class="d-none invisible twig-data-advertiser-id" data-advertiser-id="{{ advertiser.id }}"></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-countries" data-countries="{{ countries|json_encode }}"></span>
        <span class="d-none invisible twig-data-ppc-labels" data-ppc-labels="{{ ppcLabels|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-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-campaign-edit" data-path-ajax-campaign-edit="{{ path('ajax_campaign_edit', { 'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-stats-get" data-path-ajax-campaign-stats-get="{{ path('ajax_campaign_stats_get', { advertiser: advertiser.id, campaign: ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-details" data-path-ajax-campaign-details="{{ path('ajax_campaign_get', {advertiser: advertiser.id, campaign: ':cid'}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-status" data-path-ajax-campaign-status="{{ path('ajax_campaign_status_edit', {advertiser: advertiser.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-get" data-path-ajax-campaign-get="{{ path('ajax_campaign_get', {advertiser: advertiser.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-new" data-path-ajax-campaign-new="{{ path('ajax_campaign_new', {advertiser: advertiser.id }) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-flight-get" data-path-ajax-campaign-flight-get="{{ path('ajax_campaign_flight_get', {advertiser: advertiser.id, campaign: ':cid'}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-flight-add" data-path-ajax-campaign-flight-add="{{ path('ajax_campaign_flight_add', {advertiser: advertiser.id, campaign: ':cid'}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-flight-remove" data-path-ajax-campaign-flight-remove="{{ path('ajax_campaign_flight_remove', {advertiser: advertiser.id, campaign: ':cid'}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-archive" data-path-ajax-campaign-archive="{{ path('ajax_campaign_archive', {advertiser: advertiser.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-conso-category-get" data-path-ajax-campaign-conso-category-get="{{ path('ajax_campaign_conso_category_get', {'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-conso-region-get" data-path-ajax-campaign-conso-region-get="{{ path('ajax_campaign_conso_region_get', {'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-conso-dates-get" data-path-ajax-campaign-conso-dates-get="{{ path('ajax_campaign_conso_dates_get', {'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-conso-agregators-get" data-path-ajax-campaign-conso-agregators-get="{{ path('ajax_campaign_conso_agregators_get', {'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-conso-job-get" data-path-ajax-campaign-conso-job-get="{{ path('ajax_campaign_conso_job_get', {'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-conso-mix-get" data-path-ajax-campaign-conso-mix-get="{{ path('ajax_advertiser_conso_mix_get', {'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-report" data-path-ajax-campaign-report="{{ path('ajax_campaign_report', {'advertiser': advertiser.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-ppc-label-create" data-path-ajax-campaign-ppc-label-create="{{ path('ajax_campaign_ppcLabel_create', {'advertiser': advertiser.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-campaign-history" data-path-ajax-campaign-history="{{ path('ajax_campaign_history', {'advertiser': advertiser.id, 'campaign': ":cid"}) }}"></span>
    </div>
{% endblock %}

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