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

{% block body %}
    <main class="row main mx-0">
        <section class="content-area p-r-l-6 fade-in pb-5" id="vue_app_mission_control" v-cloak>
            <div class="px-3 py-4 rounded-2 bg-white row mx-0 position-relative">
                <div class="text-primary font-700 col-12 d-flex align-items-center mb-3">
                    {{ 'Page filters'|trans }}
                    <button type="button" :class="[showAdvancedFilters ? 'btn-primary' : 'btn-outline-primary', 'd-inline ml-3 btn btn-sm rounded-30 py-0']" @click="showAdvancedFilters = !showAdvancedFilters">
                        <i class="fal fa-sm fa-search-plus mr-2"></i>{{ 'Advanced search'|trans }}
                    </button>
                    <form-input id="userOi"
                                class="ml-2"
                                :value="showOnlyUserOI"
                                @input="handleShowUserOi"
                                :label="Translator.trans('My OIs')"
                                :disabled="loading"
                                :no-border="true"
                                info-tooltip-content="{{ 'Display only OIs from our subscribed advertiser without assigned people, or OIs assigned to us (from all advertiser)'|trans }}"
                                type="checkbox"></form-input>
                    <form-input id="userBackOi"
                                v-show="showOnlyUserOI"
                                class="ml-2"
                                :value="showOnlyBackOI"
                                @input="handleShowBackOi"
                                :label="Translator.trans('My Backup OIs')"
                                :disabled="loading || !showOnlyUserOI"
                                :no-border="true"
                                info-tooltip-content="{{ "Display in addition OIs that I'm backup"|trans }}"
                                type="checkbox"></form-input>
                    <button class="btn btn-primary rounded-30 ml-auto" @click="exportBriefs">
                        {{ 'Export'|trans }}
                        <i class="fa fa-download ml-2"></i>
                    </button>
                </div>
                <div class="col-12 d-flex flex-wrap align-items-center">
                    <date-selector
                            :selected-period="selectedPeriod"
                            :model-config="{type: 'string', masks: 'YYYY-MM-DD'}"
                            mode-date-picker="range"
                            :periods="[
                                    {key: '7days', label: '7 ' + Translator.trans('days')},
                                    {key: '14days', label: '14 ' + Translator.trans('days')},
                                    {key: '30days', label: '30 ' + Translator.trans('days')},
                                    {key: 'lifetime', label: Translator.trans('Lifetime')}]"
                            @select-period="handleDateRangeChanged"
                            label="{{ 'Date'|trans }}"
                            class="position-relative mr-2 mt-2"
                            key="date-selector-missioncontrol"
                            style="margin-top: 0 !important;"
                            :input-height="34"
                    ></date-selector>
                    <div class="px-0" style="min-width: 250px;">
                        <multi-select-dropdown id="advertiserSelector"
                                               :data="advertiserList"
                                               :init-value="selectedAdvertisers"
                                               :value-as-tag="true"
                                               :tags-flex-wrap="false"
                                               :searchable="true"
                                               label="{{ 'Advertiser'|trans }}"
                                               label-key="name"
                                               class="my-3 mr-2"
                                               @input="handleSelectedAdvertiser"
                                               key="advertiserSelector"
                                               :disabled="loading">
                        </multi-select-dropdown>
                    </div>
                    <multi-select-dropdown :label="Translator.trans('Status')"
                                           id="statusSelector"
                                           v-model="selectedStatus"
                                           :init-value="selectedStatus"
                                           :data="statusList"
                                           :placeholder="Translator.trans('Status')"
                                           label-key="label"
                                           class="my-3 mr-2"
                                           :value-as-tag="true"
                                           style="min-width: 250px"
                                           key="statusSelector"
                                           :disabled="loading"
                    ></multi-select-dropdown>
                    <input-dropdown id="goalSelector"
                                    :init-value="selectedLive"
                                    :data-list="liveList"
                                    label="Live"
                                    placeholder="Live"
                                    v-model="selectedLive"
                                    :disabled="loading"
                                    class="my-3 mr-2"
                    ></input-dropdown>
                    <multi-select-dropdown label="Media"
                                           id="mediaSelector"
                                           v-model="selectedMedia"
                                           :init-value="selectedMedia"
                                           :data="mediaList"
                                           placeholder="Media"
                                           label-key="name"
                                           class="my-3 mr-2 fade-in"
                                           :value-as-tag="true"
                                           style="min-width: 250px"
                                           key="mediaSelector"
                                           :disabled="loading"
                    ></multi-select-dropdown>
                    <template v-if="showAdvancedFilters">
                        <multi-select-dropdown label="{{ 'Goal'|trans }}"
                                               id="goalSelector"
                                               v-model="selectedGoal"
                                               :init-value="selectedGoal"
                                               :data="goalList"
                                               placeholder="{{ 'Goal'|trans }}"
                                               label-key="name"
                                               class="my-3 mr-2 fade-in"
                                               :value-as-tag="true"
                                               style="min-width: 250px"
                                               key="goalSelector"
                                               :disabled="loading"
                        ></multi-select-dropdown>
{#                        <input-dropdown id="goalSelector"#}
{#                                        :init-value="selectedOiType"#}
{#                                        :data-list="oiTypeList"#}
{#                                        label="{{ 'OI type'|trans }}"#}
{#                                        placeholder="{{ 'OI type'|trans }}"#}
{#                                        v-model="selectedOiType"#}
{#                                        :disabled="loading"#}
{#                                        class="my-3 mr-2 fade-in"#}
{#                        ></input-dropdown>#}
                        <input-dropdown v-if="roleBackend" id="advertiserTierSelector"
                                        :init-value="selectedTier"
                                        :data-list="tierList"
                                        label="{{ 'Advertiser tier'|trans }}"
                                        placeholder="{{ 'Advertiser tier'|trans }}"
                                        v-model="selectedTier"
                                        :disabled="loading"
                                        class="my-3 mr-2 fade-in"
                                        style="width: 180px"
                        ></input-dropdown>
                        <input-dropdown id="csmSelector"
                                        :init-value="selectedCsm"
                                        :data-list="usersTeamCsm"
                                        label="CSM"
                                        placeholder="CSM"
                                        v-model="selectedCsm"
                                        :disabled="loading"
                                        class="my-3 mr-2 fade-in"
                        ></input-dropdown>
                        <input-dropdown id="traderSelector"
                                        :init-value="selectedTrader"
                                        :data-list="usersTeamTrader"
                                        label="Trader"
                                        placeholder="Trader"
                                        v-model="selectedTrader"
                                        :disabled="loading"
                                        class="my-3 mr-2 fade-in"
                        ></input-dropdown>
                        <input-dropdown id="amSelector"
                                        :init-value="selectedAm"
                                        :data-list="usersTeamAm"
                                        label="AM"
                                        placeholder="AM"
                                        v-model="selectedAm"
                                        :disabled="loading"
                                        class="my-3 mr-2 fade-in"
                        ></input-dropdown>
                    </template>
                </div>
            </div>
            <div class="col-12 simple-data-table px-0 mt-4">
                {# ################# PAGINATION ################# #}
                <div class="simple-data-headers bg-white py-3 rounded-2 mt-3 mb-2 row mx-0" id="pagination-top">
                    <div class="col-md-8 col-sm-12 text-left d-flex justify-content-between data-options align-items-center">
                        <div class="text-left d-flex data-options align-items-center">
                            <div class="pagination pr-3 my-auto flex-wrap align-items-center justify-content-center">
                                <span class="mx-2 my-1">Page <b><% page %></b> <% Translator.trans('page of') %> <% nbrPages %></span>
                                <div class="fade-in-02 d-flex" v-if="nbrPages > 1">
                                    <i class="pr-2 fas fa-step-backward mr-2" :class="{disabled: page === 1 || loading}"
                                       @click="navigatePage('backward')"></i>
                                    <i class="pr-2 fal fa-chevron-left mr-2" :class="{disabled: page === 1 || loading}"
                                       @click="navigatePage('prev')"></i>
                                    <i class="pr-2 fal fa-chevron-right mr-2" :class="{disabled: page === nbrPages || loading}"
                                       @click="navigatePage('next')"></i>
                                    <i class="fas fa-step-forward" :class="{disabled: page === nbrPages || loading}"
                                       @click="navigatePage('forward')"></i>
                                </div>
                            </div>
                            <div class="ml-3 d-flex align-items-center justify-content-center flex-wrap">
                                <span class="mx-2 my-1"><% Translator.trans('Rows by page') %>:</span>
                                <input-dropdown v-model="pageLimit"
                                                :id="'pagination-page-limit'"
                                                :data-list="pageLimitOptions"
                                                :init-value="pageLimit"
                                                style="width: 100px"></input-dropdown>
                            </div>

                            <p class="mb-0 ml-3 d-flex align-items-center justify-content-center flex-wrap">
                                <span class="mx-2 my-1"><% Translator.trans('Total rows') %>:</span>
                                <span class="chips chips_purple py-2"><% totalBriefs %></span>
                            </p>
                        </div>
                        <div>
                            <multi-select-dropdown v-model="selectedMaskedColumn" :data="maskColumnList"
                                                   :placeholder="Translator.trans('Pick a column to hide')"
                                                   :data-tippy-content="Translator.trans('Pick a column to hide')"
                                                   id="maskedColumnSelector"
                                                   :init-value="selectedMaskedColumn"
                                                   label-key="name"
                                                   :limit="20"
                                                   class="my-3 mr-4 input-group .form-control.last-child"
                                                   :input-value-text="Translator.trans('Hide columns')"
                                                   key="maskedColumnSelector"
                                                   :disabled="loading"
                                                   style="width: 150px"
                            ></multi-select-dropdown>
                        </div>
                    </div>
                    <div class="col-md-4 section-search d-flex justify-content-end align-items-end">
                        <div class="w-100 px-0 my-3">
                            <div class="input-group">
                                <input id="searchAdv" v-model="searchValue"
                                       type="search" class="form-control border"
                                       aria-controls="search-table"
                                       @search="getBriefs"
                                       :disabled="loading"
                                       :placeholder="Translator.trans('Search')">
                                <span class="input-group-append">
                                     <button class="btn btn-outline-secondary" type="button">
                                     <i class="fal fa-search"></i>
                                     </button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="fade-in-02" v-show="briefs.length > 0 && !loading" style="display: flex;">
                    <table class="px-0 roundedRow" style="border-collapse: separate; border-spacing: 0 0.3rem; width: 850px;padding-top: 13px;padding-bottom: 13px">
                        <thead class="table-headers container-fluid mt-2 mb-2" style="box-shadow: none; background-color: rgba(235, 239, 248, 0.55);">
                            <tr class="text-center" style="height: 50px;">
                                <th class="px-3 my-auto overflow-hidden position-relative py-3">
                                    <span class="font-700">{{ 'Advertiser'|trans }}</span>
                                    <i class="fa small column-sorter"
                                       @click="order('advertiserName', 'String')"
                                       :class="{'fa-sort-alt': briefsOrder.option !== 'advertiserName',
                                                       'fa-sort-amount-down-alt': briefsOrder.option === 'advertiserName' && briefsOrder.direction === 'ASC',
                                                       'fa-sort-amount-down': briefsOrder.option === 'advertiserName' && briefsOrder.direction === 'DESC'}">
                                    </i>
                                </th>
                                <th class="px-3 my-auto overflow-hidden position-relative py-3">
                                    <span class="font-700">{{ 'Title'|trans }}</span>
                                    <i class="fa small column-sorter"
                                       @click="order('title', 'String')"
                                       :class="{'fa-sort-alt': briefsOrder.option !== 'title',
                                                       'fa-sort-amount-down-alt': briefsOrder.option === 'title' && briefsOrder.direction === 'ASC',
                                                       'fa-sort-amount-down': briefsOrder.option === 'title' && briefsOrder.direction === 'DESC'}">
                                    </i>
                                </th>
                                <th class="px-3 my-auto overflow-hidden position-relative py-3">
                                    <span class="font-700">{{ 'Status'|trans }}</span>
                                    <i class="fa small column-sorter" style="right: 10px"
                                       @click="order('status', 'String')"
                                       :class="{'fa-sort-alt': briefsOrder.option !== 'status',
                                                       'fa-sort-amount-down-alt': briefsOrder.option === 'status' && briefsOrder.direction === 'ASC',
                                                       'fa-sort-amount-down': briefsOrder.option === 'status' && briefsOrder.direction === 'DESC'}">
                                    </i>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="table-content fade-in-02">
                            <tr class="container-fluid bg-white simple-line-data position-relative" v-for="(brief, index) in briefs"
                                :key="index + 'static-table'">
                                <td class="text-center">
                                    <div style="height: 35px; max-height: 35px !important;" class="d-flex align-items-center justify-content-center">
                                        <a v-if="brief.advertiserId !== ''" :href="pathOI.replace(':aid', brief.advertiserId)" class="position-relative">
                                            <i v-if="roleBackend" :class="[brief.advertiserTier === 1 ? 'color-gold' : '',
                                                        brief.advertiserTier === 2 ? 'color-silver' : '',
                                                        brief.advertiserTier === 3 ? 'color-bronze' : '', 'fa fa-crown position-absolute']" style="font-size: 1.1rem;top: -15px;left: 8px;">
                                            </i>
                                            <img :src="brief.advertiserLogo" :alt="brief.advertiserName" :height="35" :width="35"
                                                 class="rounded-circle border" style="max-width: 35px;max-height: 35px"
                                                 :data-tippy-content="`${brief.advertiserName} (${brief.advertiserId})`"
                                                 data-tippy-maxWidth="500"
                                                 data-tippy-placement="right">
                                        </a>
                                        <span v-else class="rounded-circle d-flex align-items-center justify-content-center position-relative">
                                            <i class="fa fa-exclamation-triangle text-danger "
                                               data-tippy-placement="right"
                                               data-tippy-content="{{ 'Advertiser not defined'|trans }}"></i>

                                            <button @click="openMappingAdvertiserForm(brief.id)"
                                                    class="button slider-icon ml-auto bg-transparent position-absolute"
                                                    style="right: -25px;bottom: -12px;width: 25px;min-width: 25px;height: 25px;"
                                                    data-tippy-content="{{ 'Modify'|trans }}"
                                                    data-tippy-placement="right">
                                                <i class="fal fa-sm fa-pencil"></i>
                                            </button>
                                        </span>
                                    </div>
                                </td>
                                <td style="width: 300px" class="py-1">
                                    <div class="border-left px-3 d-flex align-items-center position-relative" style="height: 35px; max-height: 35px !important;">
                                        <button-multiple :content-position="'left'">
                                            <template v-slot:main-btn>
                                                      <span class="button slider-icon bg-transparent ml-2">
                                                        <i class="custom-icon icon-gitlab"></i>
                                                      </span>
                                                <span :class="[brief.activeTasks > 0 ? 'badge-sonar badge-sonar-warning-gitlab' : 'd-none']" id="sonar-oi-alert"><% brief.activeTasks %></span>
                                            </template>
                                            <template v-slot:extra-btn>
                                                <span v-if="brief.urlTask.length > 0"  type="button" class="btn btn-primary px-4 d-flex align-items-center justify-content-between"
                                                   @click=""
                                                    style="width: 210px">
                                                    <i class="fal fa-sticky-note"></i> {{ 'Tracking OI'|trans }}
                                                    <a :href="brief.urlTask" target="_blank"
                                                       class="slider-icon text-decoration-none"
                                                       data-tippy-content="{{ 'Show Tracking OI ticket'|trans }}"
                                                       @click="">
                                                        <i class="fal fa-eye" style="color: white"></i>
                                                    </a>
                                                    <a class="slider-icon text-decoration-none"
                                                       data-tippy-content="{{ 'Add a comment to the Tracking OI ticket'|trans }}"
                                                       @click="openModalComment($event,brief.id)">
                                                        <i class="fal fa-pen" style="width: 15px"></i>
                                                    </a>
                                                </span>
                                                <button type="button" class="btn btn-primary px-4 mt-1"
                                                        @click="openTaskListPanel(brief.id)">
                                                    <i class="fal fa-list"></i> {{ 'Show tasks'|trans }}
                                                </button>
                                                <button type="button" class="btn btn-primary px-4 mt-1"
                                                        @click="openNewTaskForm(brief.id)">
                                                    <i class="fal fa-plus-circle"></i> {{ 'Add a task'|trans }}
                                                </button>
                                            </template>
                                        </button-multiple>
                                        <a :href="`https://desk.goldenbees.fr/advertiser/${brief.advertiserId}/campaign?idb=${brief.id}`" target="_blank" class="slider-icon text-decoration-none"
                                           style="width: 25px;min-width: 25px;height: 25px;"
                                           v-if="brief.campaignNumber !== 0"
                                           :data-tippy-content="Translator.trans('Show campaigns')">
                                            <i class="fal fa-list" style="width: 15px"></i>
                                        </a>
                                        <a :href="brief.hubspotDealPath" target="_blank" class="slider-icon text-decoration-none"
                                           style="width: 25px;min-width: 25px;height: 25px;"
                                           :data-tippy-content="Translator.trans('Show associated transaction in Hubspot')">
                                            <i class="custom-icon icon-hubspot" style="width: 15px"></i>
                                        </a>
                                        <span @click="brief.advertiserId !== '' ? openBriefForm(brief.id, undefined) : false"
                                              :class="[brief.advertiserId === '' ? 'cursor-not-allowed font-italic' : 'cursor-pointer font-600',
                                              'text-ellipsis overflow-hidden text-nowrap d-block text-left']"
                                              :data-tippy-content="brief.advertiserId !== '' ? `${brief.title} (id: ${brief.id})`: Translator.trans('You must define an advertiser before modifying the brief')"
                                              data-tippy-maxWidth="500"
                                              data-tippy-placement="right"
                                              :style="{width: brief.childrenNumber ? '255px' : '300px'}"
                                        >
{#                                            <button :disabled="brief.advertiserId === ''" style="width: 25px;min-width: 25px;height: 25px;"#}
{#                                                    class="button slider-icon ml-auto bg-transparent mr-1 d-inline">#}
{#                                                <i class="fal fa-cog"></i>#}
{#                                            </button>#}
                                            <% brief.title %>
                                        </span>
                                        <a v-if="brief.childrenNumber" style="right: 8px;" role="button" :disabled="brief.advertiserId === ''"
                                           :href="`${pathOI.replace(':aid', brief.advertiserId)}?bid=${brief.id}&action=showRebooking`"
                                           data-tippy-content="{{ 'Show rebooking'|trans }}" data-tippy-placement="right"
                                           :class="[brief.advertiserId === '' ? 'disabled pointer-events-none' : '', 'chips chips_purple rounded align-items-center d-flex align-items-center px-2 py-1 font-700 position-absolute']">
                                            <i class="fal fa-calendar-star mr-2"></i>
                                            <% brief.childrenNumber %>
                                        </a>
                                    </div>
                                </td>
                                <td class="text-center py-1">
                                    <div class="border-left m-auto px-3 text-nowrap d-flex flex-column align-items-center justify-content-center" style="height: 35px; max-height: 35px !important;">
                                        <span class="chips py-0 cursor-pointer"
                                              data-tippy-placement="right"
                                              data-tippy-content="{{ 'Click to modify the status'|trans }}"
                                              :class="[statusChipsClass(brief.status.id)]"
                                              @click="toggleStatusSelector(brief.id)">
                                            <i v-if="brief.status.id < 6 && brief.live"
                                               data-tippy-content="{{ "Some campaigns are live but the brief's status is not \"Ready\""|trans }}"
                                               class="fa fa-sm fa-exclamation-triangle text-danger mr-2"></i>
                                            <% brief.status.label %>
                                        </span>
                                        <span class="mt-1 font-italic" style="font-size: 9px">
                                            {{ 'Since'|trans }} <b style="font-size: 10px"><% brief.statusUpdatedAt %></b>
                                        </span>
                                        <input-dropdown :id="`${brief.id}_status_selector`"
                                                        :init-value="brief.status.id"
                                                        :data-list="brief.statusList"
                                                        :hide-input="true"
                                                        :return-raw-option="true"
                                                        :disabled="loading"
                                                        :ref="`${brief.id}_status_selector`"
                                                        props-displayed-value="label"
                                                        @input="updateBriefStatus($event, brief.id, brief.advertiserId)"
                                                        @close="toggleStatusSelector(brief.id)"
                                                        style="z-index: 1; width: max-content; top: -40px"
                                                        class="d-none position-absolute"
                                        ></input-dropdown>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="overflow-hidden">
                        <div ref="wrapper1" class="overflow-overlay ml-1">
                            <div :style="{ width: tableRowWidth, height: '7px' }"></div>
                        </div>
                        <div ref="wrapper2" class="overflow-overlay ml-1" style="padding-bottom: 7px">
                            <table class="px-0 roundedRow" :style="{ 'border-collapse': 'separate', 'border-spacing': '0 0.3rem', 'width': tableRowWidth }">
                                <thead class="table-headers container-fluid mt-2 mb-2" style="box-shadow: none; background-color: rgba(235, 239, 248, 0.55);" >
                                    <tr class="text-center" style="height: 50px;">
                                        <th v-show="isShowColumn('live')" class="px-3 my-auto overflow-hidden position-relative py-3" style="width: 66px !important;">
                                            <span class="font-700 text-nowrap">Live</span>
                                        </th>
                                        <th v-show="isShowColumn('budget')" class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap" style="width: 200px !important;">
                                            <span class="font-700">{{ 'Budget'|trans }}</span>
                                            <i class="fa small column-sorter"
                                               @click="order('budget', 'String')"
                                               :class="{'fa-sort-alt': briefsOrder.option !== 'budget',
                                                           'fa-sort-amount-down-alt': briefsOrder.option === 'budget' && briefsOrder.direction === 'ASC',
                                                           'fa-sort-amount-down': briefsOrder.option === 'budget' && briefsOrder.direction === 'DESC'}">
                                            </i>
                                        </th>
                                        <th v-show="isShowColumn('goal')"  class="px-3 my-auto overflow-hidden position-relative py-3" style="width: 140px !important;">
                                            <span class="font-700">{{ 'Goal'|trans }}</span>
                                            <i class="fa small column-sorter"
                                               @click="order('goal', 'String')"
                                               :class="{'fa-sort-alt': briefsOrder.option !== 'goal',
                                                           'fa-sort-amount-down-alt': briefsOrder.option === 'goal' && briefsOrder.direction === 'ASC',
                                                           'fa-sort-amount-down': briefsOrder.option === 'goal' && briefsOrder.direction === 'DESC'}">
                                            </i>
                                        </th>
                                        <th v-show="isShowColumn('briefPlan')" class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap" style="width: 230px !important;">
                                            <span class="font-700">{{ 'Leviers'|trans }}</span>
                                        </th>
{#                                        <th class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap">#}
{#                                            <span class="font-700">Objectif chiffre</span>#}
{#                                        </th>#}
                                        <th v-show="isShowColumn('dates')" class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap" style="width: 230px !important;">
                                            <span class="font-700">{{ 'Campaigns dates'|trans }}</span>
{#                                            <i class="fa small column-sorter"#}
{#                                               @click="order('dates', 'String')"#}
{#                                               :class="{'fa-sort-alt': briefsOrder.option !== 'dates',#}
{#                                                           'fa-sort-amount-down-alt': briefsOrder.option === 'dates' && briefsOrder.direction === 'ASC',#}
{#                                                           'fa-sort-amount-down': briefsOrder.option === 'dates' && briefsOrder.direction === 'DESC'}">#}
{#                                            </i>#}
                                        </th>
                                        <th v-show="isShowColumn('satisfaction')" class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap" style="width: 130px !important;">
                                            <span class="font-700">{{ "Satisfaction"|trans }}</span>
                                            <i class="fa small column-sorter"
                                               @click="order('satisfaction', 'String')"
                                               :class="{'fa-sort-alt': briefsOrder.option !== 'satisfaction',
                                                           'fa-sort-amount-down-alt': briefsOrder.option === 'satisfaction' && briefsOrder.direction === 'ASC',
                                                           'fa-sort-amount-down': briefsOrder.option === 'satisfaction' && briefsOrder.direction === 'DESC'}">
                                            </i>
                                        </th>
                                        <th v-show="isShowColumn('businessGoal')" class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap" style="width: 230px !important;">
                                            <span class="font-700">{{ 'Business Goal'|trans }}</span>
                                        </th>
                                        <th v-show="isShowColumn('nextMeet')" class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap" style="width: 230px !important;">
                                            <span class="font-700">{{ 'Next meeting'|trans }}</span>
                                        </th>
                                        <th v-show="isShowColumn('comment')" class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap" style="width: 230px !important;">
                                            <span class="font-700">{{ 'Comment'|trans }}</span>
                                        </th>
                                        <th v-show="isShowColumn('drive')" class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap" style="width: 130px !important;">
                                            <span class="font-700">{{ 'Drive folder'|trans }}</span>
                                        </th>
                                        <th v-show="isShowColumn('timeSpent')" class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap" style="width: 180px !important;">
                                            <span class="font-700">{{ 'Time spent'|trans }}</span>
                                        </th>
                                        <th v-show="isShowColumn('frequency')" class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap" style="width: 180px !important;">
                                            <span class="font-700">{{ 'Follow-up frequency'|trans }}</span>
                                        </th>
                                        <th v-show="isShowColumn('am')" class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap" style="width: 180px !important;">
                                            <span class="font-700">AM</span>
                                        </th>
                                        <th v-show="isShowColumn('csm')" class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap" style="width: 180px !important;">
                                            <span class="font-700">CSM</span>
                                        </th>
                                        <th v-show="isShowColumn('trader')" class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap" style="width: 180px !important;">
                                            <span class="font-700">Trader</span>
                                        </th>
                                        <th v-show="isShowColumn('atsStatus')" class="px-3 my-auto overflow-hidden position-relative py-3 text-nowrap" style="width: 130px !important;">
                                            <span class="font-700">{{ 'ATS Status'|trans }}</span>
                                        </th>
                                    </tr>
                                </thead>
                                {# ################# TABLE BODY ################# #}
                                <tbody class="table-content fade-in-02">
                                    <tr class="container-fluid bg-white simple-line-data" v-for="(brief, index) in briefs"
                                        :key="index + 'overflow-table'" style="height: 50px;">
                                        <td v-show="isShowColumn('live')" class="text-center py-1">
                                            <div class="border-right m-auto px-3 d-flex align-items-center justify-content-center" style="height: 35px; max-height: 35px !important;">
                                                <span :class="[brief.live ? 'bg-success' : 'bg-secondary opacity-06', 'rounded-circle']" style="height: 15px;width: 15px"></span>
                                            </div>
                                        </td>
                                        <td v-show="isShowColumn('budget')" class="text-center py-1">
                                            <div class="m-auto px-3 d-flex align-items-center justify-content-center">
                                                <div v-if="brief.budget > 0" class="d-inline-block" style="width: 150px;">
                                                    <div class="progress" style="height: 5px;"
                                                         :data-tippy-content="numberFormat(brief.percentSpent, 2) + ' %'"
                                                         data-tippy-placement="left-end">
                                                        <div data-percentage="0%"
                                                             :style="{
                                                                width: numberFormat(brief.percentSpent,0,'en-GB') + '%',
                                                                backgroundColor: progressChartColor(numberFormat(brief.percentSpent,2,'en-GB'),numberFormat(brief.durationPercent,2,'en-GB')).color
                                                             }"
                                                             aria-valuenow=""
                                                             class="progress-bar"
                                                             role="progressbar"
                                                             aria-valuemin="0"
                                                             aria-valuemax="100"
                                                             :data-value="numberFormat(brief.percentSpent,0,'en-GB')">
                                                        </div>
                                                    </div>
                                                    <span style="font-size: 11px;" class="font-700">
                                                        <% brief.advertiserId !== ''
                                                                ? `${amountWithCurrency(numberFormat(brief.spend, 0), brief.advertiserCurrency)} / ${amountWithCurrency(numberFormat(brief.mediaAmountBeforeDiscountWithRebooking, 0), brief.advertiserCurrency)}`
                                                                : `${numberFormat(brief.spend, 0)} € / ${numberFormat(brief.mediaAmountBeforeDiscountWithRebooking, 0)} €`
                                                        %>
                                                    </span>
                                                    <div class="progress" style="height: 5px;"
                                                         :data-tippy-content="numberFormat(brief.durationPercent, 2) + ' %'"
                                                         data-tippy-placement="left-end">
                                                        <div data-percentage="0%"
                                                             :style="{ width: numberFormat(brief.durationPercent,0) + '%', backgroundColor: '#54D87D' }"
                                                             aria-valuenow=""
                                                             class="progress-bar"
                                                             role="progressbar"
                                                             aria-valuemin="0"
                                                             aria-valuemax="100"
                                                             :data-value="numberFormat(brief.durationPercent,0)">
                                                        </div>
                                                    </div>
                                                    <small style="font-size: 9px; " class="font-italic font-600 text-info chips_purple mt-1 mx-auto rounded-2 px-1 py-1">
                                                        <% brief.durationPercent === 100
                                                                ? Translator.trans('Finished')
                                                                : (brief.pastDays > 0
                                                                        ? `${brief.pastDays} / ${brief.totalDays} ${Translator.trans('days')}`
                                                                        : Translator.trans('Not started yet')) %>
                                                    </small>
                                                </div>
                                                <span v-else class="font-italic small">{{ 'Not defined'|trans }}</span>
                                            </div>
                                        </td>
                                        <td v-show="isShowColumn('goal')" class="text-center py-1">
                                            <div class="border-left m-auto px-3 d-flex align-items-center justify-content-center" style="height: 35px; max-height: 35px !important;">
                                                <span v-if="brief.goal !== null" :class="[goalChipsClass(brief.goal), 'chips py-0']">
                                                    <% brief.goal %>
                                                </span>
                                                <span v-else class="font-italic small">{{ 'Not defined'|trans }}</span>
                                            </div>
                                        </td>
                                        <td v-if="isShowColumn('briefPlan')" class="col d-flex text-center align-items-center "
                                            @mouseenter="startScroll(brief)"
                                            @mouseleave="stopScroll(brief)"
                                            style="width: 230px !important; height: 59px !important;">
                                            <div v-show="isShowColumn('briefPlan')" class="border-left m-auto px-3 d-flex align-items-center justify-content-center" style="height: 35px; max-height: 35px !important; width: 230px !important; max-width: 230px !important; margin-top: 12px !important;">
                                                <i class="fa border-right fa-chevron-left" :id=`left-icon-${brief.id}` style="opacity: 0%"></i>
                                                <div class="m-auto d-flex flex-nowrap overflow-auto small-scrollbar"
                                                     style="width: 150px; height: 50px; max-height: 50px !important;">
                                                    <template v-if="brief.briefPlans.length > 0" >
                                                        <div v-for="(briefPlan, k) in brief.briefPlans"
                                                             class="rounded-circle position-relative m-auto cursor-pointer"
                                                                {#                                                         @click="openBriefForm(brief.id, briefPlan.id)">#}
                                                             @click="redirectToCampaign(brief.advertiserId,brief.id)">
                                                            <img :src="briefPlan.logo" :alt="briefPlan.mediaName + '_logo'"
                                                                 class="rounded-circle m-1 media-logo" style="height: 35px; width: 35px"
                                                                 :data-tippy-content="briefPlan.name"
                                                                 data-tippy-placement="top">
                                                            <div v-if="brief.referenceParent !== '' && briefPlan.budget === 0"
                                                                 class="bg-light position-absolute w-100 h-100 top-0 left-0 opacity-075 rounded-circle"></div>
                                                        </div>
                                                    </template>
                                                    <template v-else>
                                                        <p class="m-auto font-italic small">{{ 'No media has been set'|trans }}</p>
                                                    </template>
                                                </div>
                                                <i class="fas fa-chevron-right" :id=`right-icon-${brief.id}` style="opacity: 0%"></i>
                                            </div>
                                        </td>

                                        <td v-show="isShowColumn('dates')" class="text-center py-1" style="width: 230px !important;">
                                            <div class="border-left m-auto px-3 d-flex align-items-center justify-content-center" style="height: 35px; max-height: 35px !important; width: 230px !important; max-width: 230px !important;">
                                                <span v-if="brief.campaignStartDate !== null" class="text-nowrap chips chips_purple py-0">
                                                    <% brief.campaignStartDate.split("T")[0].split('-').reverse().join('-') %> | <% brief.campaignEndDate.split("T")[0].split('-').reverse().join('-') %>
                                                     <i v-if="isToday1DayAfter(brief.campaignStartDate)  && !brief.live"
                                                        data-tippy-content="{{ "Aucune dépense enregistrée la journée précédente et les dates des briefs sont dépassées d'un jour"|trans }}"
                                                        class="fa fa-sm fa-exclamation-triangle text-danger mr-2"></i>
                                                </span>
                                                <span v-else class="font-italic small">{{ 'No campaigns defined'|trans }}</span>
                                            </div>
                                        </td>
                                        <td v-show="isShowColumn('satisfaction')" class="text-center py-1">
                                            <div class="border-left m-auto px-3 d-flex align-items-center justify-content-center" style="height: 35px; max-height: 35px !important; max-width: 228px !important">
                                                <span :class="getSatisfactionColor(brief.clientSatisfaction)"
                                                      style="height: 15px;width: 15px"
                                                      :ref="`${brief.id}_satisfaction_indicator`"
                                                      data-tippy-placement="right"
                                                      data-tippy-content="{{ "Click to modify the client's satisfaction"|trans }}"
                                                      @click="toggleSatisfactionSelector(brief.id)"></span>
                                                <input-dropdown :id="`${brief.id}_satisfaction_selector`"
                                                                :init-value="brief.clientSatisfaction"
                                                                :data-list="satisfactionList"
                                                                :hide-input="true"
                                                                :return-raw-option="true"
                                                                :disabled="loading"
                                                                :ref="`${brief.id}_satisfaction_selector`"
                                                                props-displayed-value="label"
                                                                @input="updateSatisfaction(brief.id,$event)"
                                                                @close="toggleSatisfactionSelector(brief.id)"
                                                                style="z-index: 1; width: fit-content; top: -40px"
                                                                class="d-none"
                                                ></input-dropdown>
                                            </div>
                                        </td>
                                        <td v-show="isShowColumn('businessGoal')" class="text-center py-1">
                                            <div class="border-left m-auto px-3 d-flex align-items-center justify-content-center"
                                                 :data-tippy-content="brief.businessGoal !== '' ? brief.businessGoal : Translator.trans('Not defined')"
                                                 style="height: 35px; max-height: 35px !important;">
                                                <form-input :id="`${brief.id}_businessGoal`"
                                                            :key="`${brief.id}_businessGoal`"
                                                            v-model="brief.businessGoal"
                                                            @focus="openModal($event,brief,'modifyBusinessGoal')"
                                                            type="text" class="col-12 mt-2"></form-input>
                                            </div>
                                        </td>
                                        <td v-show="isShowColumn('nextMeet')" class="text-center py-1">
                                            <div class="border-left m-auto px-3 d-flex align-items-center justify-content-center"
                                                 style="height: 35px; max-height: 35px !important;">
{#                                                <span class="text-nowrap chips chips_blue py-0" v-if="brief.nextMeet !== ''"><% brief.nextMeet %></span>#}
{#                                                <span v-else class="font-italic small">{{ 'Not defined'|trans }}</span>#}
                                                <form-input :id="`${brief.id}_nextMeet`"
                                                            :key="`${brief.id}_nextMeet`"
                                                            v-model="brief.nextMeet"
                                                            @focus="saveCurrentNextMeet(brief.nextMeet)"
                                                            @blur="checkChangeDate(brief)"
                                                            :masks="masks" :model-config="modelConfig" date-picker-mode="date"
                                                            type="date" class="col-12 mt-2"></form-input>
                                            </div>
                                        </td>
                                        <td v-show="isShowColumn('comment')" class="text-center py-1">
                                            <div class="border-left m-auto px-3 d-flex align-items-center justify-content-center"
                                                 :data-tippy-content="brief.information !== '' ? brief.information : Translator.trans('Not defined')"
                                                 style="height: 35px; max-height: 35px !important;">
                                                <form-input :id="`${brief.id}_information`"
                                                            :key="`${brief.id}_information`"
                                                            v-model="brief.information"
                                                            @focus="openModal($event,brief,'modifySpecifications')"
                                                            type="text" class="col-12 mt-2"></form-input>
                                            </div>
                                        </td>
                                        <td v-show="isShowColumn('drive')" class="text-center py-1">
                                            <div class="border-left m-auto px-3 d-flex align-items-center justify-content-center" style="height: 35px; max-height: 35px !important;width: 130px !important; ">
                                                <a v-if="brief.driveLink !== ''" :href="brief.driveLink" target="_blank"
                                                   class="text-ellipsis overflow-hidden text-nowrap d-block text-center"
                                                   style="width: 50px;">
                                                    <i class="fa fal fa-external-link"></i>
{#                                                    <% brief.driveLink %>#}
                                                </a>
                                                <span v-else class="font-italic small">{{ 'Not defined'|trans }}</span>
                                            </div>
                                        </td>
                                        <td v-show="isShowColumn('timeSpent')" class="text-center py-1">
                                            <div class="border-left m-auto px-3 d-flex align-items-center justify-content-center" style="height: 35px; max-height: 35px !important;">
                                                <span class="text-nowrap"><% timeSpentFormatted(brief.timeSpent) %></span>
                                            </div>
                                        </td>
                                        <td v-show="isShowColumn('frequency')" class="text-center py-1" style="width: 180px !important;">
                                            <div class="border-left m-auto text-nowrap flex-column px-3 d-flex align-items-center justify-content-center" style="height: 35px; max-height: 35px !important;">
                                                <input-dropdown v-model="brief.suiviFreq"
                                                                :id="`${brief.id}_frequency_selector`"
                                                                :data-list="freqList"
                                                                :init-value="brief.suiviFreq ?? ''"
                                                                props-displayed-value="label"
                                                                props-return-value="label"
                                                                @change="updateBrief(brief.id)"
                                                                ></input-dropdown>
                                            </div>
                                        </td>
                                        <td v-show="isShowColumn('am')" class="text-center py-1">
                                            <div class="border-left m-auto px-3 d-flex align-items-center justify-content-center" style="height: 35px; max-height: 35px !important;">
{#                                                <span v-if="brief.am !== ''"><% brief.am.name %></span>#}
{#                                                <span v-else class="font-italic small">{{ 'Not defined'|trans }}</span>#}
                                                <input-dropdown :id="`${brief.id}_am_selector`"
                                                                :data-list="usersTeamAm"
                                                                :init-value="brief.am.id"
                                                                v-model="brief.am.id"
                                                                :disabled="loading"
                                                                @change="updateBrief(brief.id)"></input-dropdown>
                                            </div>
                                        </td>
                                        <td v-show="isShowColumn('csm')" class="text-center py-1">
                                            <div class="border-left m-auto px-3 d-flex align-items-center justify-content-center" style="height: 35px; max-height: 35px !important;">
{#                                                <span v-if="brief.csm !== ''"><% brief.csm.name %></span>#}
{#                                                <span v-else class="font-italic small">{{ 'Not defined'|trans }}</span>#}
                                                <input-dropdown :id="`${brief.id}_csm_selector`"
                                                                :data-list="usersTeamCsm"
                                                                :init-value="brief.csm.id"
                                                                v-model="brief.csm.id"
                                                                :disabled="loading"
                                                                @change="updateBrief(brief.id)"></input-dropdown>
                                            </div>
                                        </td>
                                        <td v-show="isShowColumn('trader')" class="text-center py-1">
                                            <div class="border-left m-auto px-3 d-flex align-items-center justify-content-center" style="height: 35px; max-height: 35px !important;">
{#                                                <span v-if="brief.trader !== ''"><% brief.trader.name %></span>#}
{#                                                <span v-else class="font-italic small">{{ 'Not defined'|trans }}</span>#}
                                                <input-dropdown :id="`${brief.id}_trader_selector`"
                                                                :data-list="usersTeamTrader"
                                                                :init-value="brief.trader.id"
                                                                v-model="brief.trader.id"
                                                                :disabled="loading"
                                                                @change="updateBrief(brief.id)"></input-dropdown>
                                            </div>
                                        </td>
                                        <td v-show="isShowColumn('atsStatus')" class="text-center py-1" style="width: 130px !important;">
{#                                            <div class="border-left m-auto px-3 d-flex align-items-center justify-content-center text-nowrap" style="height: 50px; max-height: 50px !important;">#}
{#                                                <span v-if="brief.ats.name !== null"><% brief.ats.name %></span>#}
{#                                                <span v-else class="font-italic small">{{ 'Not defined'|trans }}</span>#}
{#                                                <input-dropdown :id="`${brief.id}_ats_selector`"#}
{#                                                                :data-list="atsList"#}
{#                                                                :init-value="brief.ats.id"#}
{#                                                                v-model="brief.ats.id"#}
{#                                                                :disabled="loading"#}
{#                                                                @change="updateBrief(brief.id)"></input-dropdown>#}
{#                                            </div>#}
                                            <div class="border-left m-auto px-3 d-flex align-items-center justify-content-center" style="height: 35px; max-height: 35px !important;width: 130px !important; ">
                                                <a :href=`https://desk.goldenbees.fr/advertiser/${brief.advertiserId}/cvlibrary#atsGlobal` target="_blank"
                                                   class="text-ellipsis overflow-hidden text-nowrap d-block text-center"
                                                   style="width: 50px;">
                                                    <i class="fa fal fa-external-link"></i>
                                                    {#                                                    <% brief.driveLink %>#}
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!--############# BOTTOM PAGINATION ###############-->
                <div class="simple-data-headers bg-white py-3 rounded-2 row mx-0 mt-3" v-show="briefs.length > 0 && nbrPages > 1 && !loading">
                    <div class="col-md-6 col-sm-12 text-left d-flex data-options align-items-center">
                        <div class="pagination pr-3 my-auto flex-wrap align-items-center">
                            <span class="mr-3">Page <b><% page %></b> {{ 'page of'|trans }} <% nbrPages %></span>
                            <div class="d-flex">
                                <i class="pr-2 fas fa-step-backward mr-2" :class="{disabled: page === 1 || loading}" @click="navigatePage('backward', true)"></i>
                                <i class="pr-2 fal fa-chevron-left mr-2" :class="{disabled: page === 1 || loading}" @click="navigatePage('prev', true)"></i>
                                <i class="pr-2 fal fa-chevron-right mr-2" :class="{disabled: page === nbrPages || loading}" @click="navigatePage('next', true)"></i>
                                <i class="fas fa-step-forward" :class="{disabled: page === nbrPages || loading}" @click="navigatePage('forward', true)"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-show="briefs.length === 0 && !loading"
                     class="alert alert-info mt-4 text-center border-0 fade-in">
                    {{ 'No OI fits those filters'|trans }}
                </div>

                <brief-form ref="briefForm"
                            :advertiser-id="formBriefAdvertiser.id"
                            :advertiser-name="formBriefAdvertiser.name"
                            :advertiser-currency="formBriefAdvertiser.currency"
                            :path-brief-plan-get="pathBriefPlanGet"
                            :path-brief-plan-remove="pathBriefPlanRemove"
                            :path-brief-plan-upsert="pathBriefPlanUpsert"
                            :path-brief-plan-validation="pathBriefPlanValidation"
                            :path-campaign="pathCampaign"
                            :path-brief-update="pathBriefUpdate"
                            :path-brief-validation-edit="pathBriefValidationEdit"
                            :path-brief-get="pathBriefGet"
                            :path-task-create="pathTaskCreate"
                            :path-task-upload="pathTaskUpload"
                            :path-task-update="pathTaskUpdate"
                            :path-task-default-get="pathTaskDefaultGet"
                            :path-task-labels-get="pathTaskLabelsGet"
                            :path-task-user-list="pathTaskUserList"
                            :path-task-spend-time-add="pathTaskSpendTimeAdd"
                            :path-brief-map="pathBriefMap"
                            :path-brief-advertisers="pathBriefAdvertisers"
                            :path-brief-advertisers-recommend="pathBriefAdvertisersRecommend"
                            :user-list="userList"
                            :media-list="[]"
                            :ats-list="atsList"
                            :status-list="statusList"
                            :id-brief="idBriefShow"
                            :role-backend="roleBackend"
                            :user-team="userTeam"
                            @get-brief="getBrief"
                            @get-briefs="getBriefs"
                ></brief-form>
                <task-list-panel id="taskListPanel"
                                 ref="taskListPanel"
                                 :title="Translator.trans('Brief tasks')"
                                 :tasks="filteredTasksForPanel"
                                 :path-task-update="pathTaskUpdate"
                                 :path-task-spend-time-add="pathTaskSpendTimeAdd"
                                 @task-updated="updateTask"
                                 @task-time-spent-updated="updateTaskSpentTime"
                ></task-list-panel>
                <task-form id="taskForm"
                           :advertiser-name="formBriefAdvertiser.name"
                           :advertiser-id="formBriefAdvertiser.id"
                           :path-task-create="pathTaskCreate"
                            :path-task-upload="pathTaskUpload"
                           :path-task-default-get="pathTaskDefaultGet"
                           :path-task-labels-get="pathTaskLabelsGet"
                           :path-task-user-list="pathTaskUserList"
                           :entity-list="taskFormEntityList"
                           @new-task-created="updateTask"
                           ref="taskForm"
                ></task-form>
                <brief-mapping-panel v-if="selectedBrief !== null" :path-brief-map="pathBriefMap"
                                     :path-brief-advertisers="pathBriefAdvertisers"
                                     :path-brief-advertisers-recommend="pathBriefAdvertisersRecommend"
                                     :brief="selectedBrief"
                                     ref="briefMappingPanel"
                                     @updated="handleUpdatedBriefMapping"
                ></brief-mapping-panel>
            </div>
            <comment-modal :id="'modifyBusinessGoal'"
                           :e-save-with-comment="modifyBusinessGoal"
                           :target-id="currentBriefId"
                            :allow-null="true"
                           :x="specificationModalPos.top"
                           :y="specificationModalPos.left"
                           :message-default="currentBriefBusinessGoal"
                           :btn-message="Translator.trans('Save')"
            ></comment-modal>
            <comment-modal :id="'modifySpecifications'"
                           :e-save-with-comment="modifySpecifications"
                           :target-id="currentBriefId"
                           :allow-null="true"
                           :x="specificationModalPos.top"
                           :y="specificationModalPos.left"
                           :message-default="currentBriefMessage"
                           :btn-message="Translator.trans('Save')"
            ></comment-modal>
            <comment-modal v-if="roleBackend"
                           :id="'addCommentToSuiviTicket'"
                           :e-save-with-comment="addCommentToSuiviOI"
                           :target-id="currentBriefId"
                           :x="commentModalPos.top"
                           :y="commentModalPos.left"
            ></comment-modal>
        </section>

        <span class="d-none invisible twig-data-ats" data-ats="{{ ats|json_encode }}"></span>
        <span class="d-none invisible twig-data-users" data-users="{{ users|json_encode }}"></span>
        <span class="d-none invisible twig-data-advertisers" data-advertisers="{{ advertisers|json_encode }}"></span>
        <span class="d-none invisible twig-data-medias" data-medias="{{ medias|json_encode }}"></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-user-team" data-user-team="{{ userTeam }}"></span>
        <span class="d-none invisible twig-data-brief-status" data-brief-status="{{ briefStatus|json_encode }}"></span>

        <span class="d-none invisible twig-data-path-brief-get-all" data-path-brief-get-all="{{ path('ajax_mission_control_brief_get_all') }}"></span>
        <span class="d-none invisible twig-data-path-brief-export" data-path-brief-export="{{ path('ajax_mission_control_brief_export') }}"></span>
        <span class="d-none invisible twig-data-path-brief-get" data-path-brief-get="{{ path('ajax_brief_get', { 'advertiser': ':aid', 'brief': ':bid' }) }}"></span>
        <span class="d-none invisible twig-data-path-brief-update" data-path-brief-update="{{ path('ajax_brief_update', { 'advertiser': ':aid', 'brief': ':bid' }) }}"></span>
        <span class="d-none invisible twig-data-path-brief-comment" data-path-brief-comment="{{ path('ajax_brief_comment', { 'advertiser': ':aid', 'brief': ':bid' }) }}"></span>
        <span class="d-none invisible twig-data-path-brief-validation-edit" data-path-brief-validation-edit="{{ path('ajax_brief_validation_edit', { 'advertiser': ':aid', 'brief': ':bid' }) }}"></span>

        <span class="d-none invisible twig-data-path-brief-plan-get" data-path-brief-plan-get="{{ path('ajax_brief_plan_get', { 'advertiser': ':aid', 'brief': ':bid', 'briefPlan': ':bpid' }) }}"></span>
        <span class="d-none invisible twig-data-path-brief-plan-upsert" data-path-brief-plan-upsert="{{ path('ajax_brief_plan_upsert', { 'advertiser': ':aid', 'brief': ':bid' }) }}"></span>
        <span class="d-none invisible twig-data-path-brief-plan-remove" data-path-brief-plan-remove="{{ path('ajax_brief_plan_remove', { 'advertiser': ':aid', 'brief': ':bid', 'briefPlan': ':bpid' }) }}"></span>
        <span class="d-none invisible twig-data-path-brief-plan-validation" data-path-brief-plan-validation="{{ path('ajax_brief_plan_validation_edit', { 'advertiser': ':aid', 'brief': ':bid', 'briefPlan': ':bpid' }) }}"></span>

        <span class="d-none invisible twig-data-path-task-create" data-path-task-create="{{ path('ajax_task_create') }}"></span>
        <span class="d-none invisible twig-data-path-task-upload" data-path-task-upload="{{ path('ajax_task_upload') }}"></span>
        <span class="d-none invisible twig-data-path-task-update" data-path-task-update="{{ path('ajax_task_update') }}"></span>
        <span class="d-none invisible twig-data-path-task-default-get" data-path-task-default-get="{{ path('ajax_task_default_get') }}"></span>
        <span class="d-none invisible twig-data-path-task-labels-get" data-path-task-labels-get="{{ path('ajax_task_labels_get') }}"></span>
        <span class="d-none invisible twig-data-path-task-user-list" data-path-task-user-list="{{ path('ajax_task_user_list') }}"></span>
        <span class="d-none invisible twig-data-path-task-spend-time-add" data-path-task-spend-time-add="{{ path('ajax_task_spend_time_add') }}"></span>

        <span class="d-none invisible twig-data-path-brief-mapping-map" data-path-brief-mapping-map="{{ path('ajax_admin_brief_mapping_map') }}"></span>
        <span class="d-none invisible twig-data-path-brief-mapping-advertisers" data-path-brief-mapping-advertisers="{{ path('ajax_admin_brief_mapping_search_advertisers') }}"></span>
        <span class="d-none invisible twig-data-path-brief-mapping-advertisers-recommend" data-path-brief-mapping-advertisers-recommend="{{ path('ajax_admin_brief_mapping_recommend_advertisers') }}"></span>

        <span class="d-none invisible twig-data-path-campaign" data-path-campaign="{{ path('advertiser_campaigns_index', { 'advertiser': ':aid' }) }}"></span>
        <span class="d-none invisible twig-data-path-oi" data-path-oi="{{ path('advertiser_oi_index', { 'advertiser': ':aid' }) }}"></span>
    </main>
{% endblock %}

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