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

{% block title %}{{ parent() }} - Admin Brief Mapping{% endblock %}

{% block body %}
<div id="brief-mapping" v-cloak>
    <main class="row main mx-0 fade-in">
        <section class="content-area p-r-l-6">

            <div class="col-12 main-data-table px-0 mt-4">
                <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-6 col-sm-12 text-left d-flex data-options align-items-center">
                        <div class="pagination pr-3 my-auto flex-wrap align-items-center">
                            <span class="mr-3">Page <b><% page %></b> {{ "page of"|trans }} <% nbrPages %></span>
                            <div class="fade-in-02 d-flex" v-if="nbrPages > 1">
                                <i class="pr-2 fas fa-step-backward mr-2" :class="{disabled: page === 1 || loading}"
                                   @click="navigatePage('backward')"></i>
                                <i class="pr-2 fal fa-chevron-left mr-2" :class="{disabled: page === 1 || loading}"
                                   @click="navigatePage('prev')"></i>
                                <i class="pr-2 fal fa-chevron-right mr-2"
                                   :class="{disabled: page === nbrPages || loading}"
                                   @click="navigatePage('next')"></i>
                                <i class="fas fa-step-forward" :class="{disabled: page === nbrPages || loading}"
                                   @click="navigatePage('forward')"></i>
                            </div>
                        </div>
                        <span class="mr-3">{{ "Rows by page"|trans }}:</span>
                        <input-dropdown v-model="pageLimit"
                                        :id="'pagination-page-limit'"
                                        :data-list="pageLimitOptions"
                                        :init-value="pageLimit"
                                        style="width: 100px">
                        </input-dropdown>
                        <p class="mb-0 ml-3">
                            <span>{{ "Total rows"|trans }}:</span>
                            <span class="chips chips_purple py-2"><% briefs.length %></span>
                        </p>
                    </div>
                    <div class="col-md-6 section-search text-right mt-xs-3">
                        <div class="w-50 px-0 d-inline-block">
                            <div class="input-group">
                                <input id="searchTable"
                                       type="search" class="form-control border"
                                       aria-controls="search-table"
                                       placeholder="{{ 'Search'|trans }}"
                                       v-model="filter">
                                <span class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button">
                                                <i class="fal fa-search"></i>
                                            </button>
                                        </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 main-data-table-content px-0 mt-4 mb-4">
                {# data-table header #}
                <div class="main-data-table-line col-12 rounded-2 mt-2 py-4 sum-values"
                     style="box-shadow: none; background-color: rgba(235, 239, 248, 0.55);transition: none">
                    <div class="col-12 row pr-0 justify-content-between">
                        <div class="col-md-5 text-center">
                            <span class="font-700">{{ 'Title'|trans }}</span>
                        </div>
                        <div class="col-md-2 text-center border-left">
                            <span class="font-700">{{ 'Reference'|trans }}</span>
                        </div>
                        <div class="col-md-1 text-center border-left">
                            <span class="font-700">{{ 'Start'|trans }}</span>
                        </div>
                        <div class="col-md-1 text-center border-left">
                            <span class="font-700">{{ 'End'|trans }}</span>
                        </div>
                        <div class="col-md-2 text-center border-left">
                            <span class="font-700">{{ 'Company'|trans }}</span>
                        </div>
                        <div class="col-md-1 text-center border-left">
                            <span class="font-700">{{ 'Action'|trans }}</span>
                        </div>
                    </div>
                </div>
                {# data-table values #}
                <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 line-animation"
                     v-for="(item, index) in paginatedData" :key="item.id"
                     :id="'item-row-'+ item.id">
                    <div class="col-12 row pr-0 content-line text-decoration-none">
                        <div class="col-md-5 d-flex align-items-center justify-content-between">
                            <span><% item.title %></span>
                            <a :href="item.hubspotDealPath" target="_blank" class="slider-icon ml-2 text-decoration-none"
                               data-tippy-content="{{ 'Show associated transaction in Hubspot'|trans }}">
                                <i class="custom-icon icon-hubspot"></i>
                            </a>
                        </div>
                        <div class="col-md-2 text-center border-left">
                            <span class="m-auto"><% item.reference %></span>
                        </div>
                        <div class="col-md-1 text-center border-left">
                            <span class="m-auto"><% item.startDate %></span>
                        </div>
                        <div class="col-md-1 text-center border-left">
                            <span class="my-auto"><% item.endDate %></span>
                        </div>
                        <div class="col-md-2 text-center border-left">
                            <span class="my-auto"><% item.company %></span>
                        </div>
                        <div class="col-md-1 text-center">
                            <div class="my-auto d-flex justify-content-around px-0 ml-auto">
                                <button type="button" class="button slider-icon bg-transparent"
                                        data-tippy-content="{{ 'Show details'|trans }}"
                                        style="width: 30px; height: 30px"
                                        @click="openBriefForm(item.id)">
                                    <i class="fal fa-eye"></i>
                                </button>
                                <button type="button" class="button slider-icon bg-transparent"
                                      data-tippy-content="{{ 'Choose an advertiser'|trans }}"
                                      style="width: 30px; height: 30px"
                                      @click="doShowMappingPanel(item.id)">
                                    <i class="fal fa-link"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>

            <!--############# BOTTOM PAGINATION ###############-->
            <div class="simple-data-headers bg-white py-3 rounded-2 row mx-0 my-4"
                 v-show="filteredData.length > 0 && nbrPages > 1">
                <div class="col-md-6 col-sm-12 text-left d-flex data-options align-items-center">
                    <div class="pagination pr-3 my-auto flex-wrap align-items-center">
                        <span class="mr-3">Page <b><% page %></b> {{ "page of"|trans }} <% nbrPages %></span>
                        <div class="d-flex">
                            <i class="pr-2 fas fa-step-backward mr-2" :class="{disabled: page === 1 || loading}"
                               @click="navigatePage('backward', true)"></i>
                            <i class="pr-2 fal fa-chevron-left mr-2" :class="{disabled: page === 1 || loading}"
                               @click="navigatePage('prev', true)"></i>
                            <i class="pr-2 fal fa-chevron-right mr-2"
                               :class="{disabled: page === nbrPages || loading}"
                               @click="navigatePage('next', true)"></i>
                            <i class="fas fa-step-forward" :class="{disabled: page === nbrPages || loading}"
                               @click="navigatePage('forward', true)"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <brief-mapping-panel :path-brief-map="pathBriefMap"
                         :path-brief-advertisers="pathBriefAdvertisers"
                         :path-brief-advertisers-recommend="pathBriefAdvertisersRecommend"
                         :brief="brief"
                         ref="briefMappingPanel"
                         @updated="getBriefs"
    ></brief-mapping-panel>

    <brief-form ref="briefForm"
                :advertiser-id="0"
                :advertiser-name="''"
                :advertiser-currency="{}"
                :path-brief-get="pathBriefGet"
                :user-list="[]"
                :media-list="[]"
                :ats-list="[]"
                :status-list="[]"
                :id-brief="idBriefShow"
                :role-backend="true"
                :user-team="5"
                @get-briefs="getBriefs"
    ></brief-form>
</div>

<span class="d-none invisible twig-data-path-brief-mapping-list"
      data-path-brief-mapping-list="{{ path('ajax_admin_brief_mapping_get') }}"></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-get"
      data-path-brief-get="{{ path('ajax_brief_get', { 'advertiser': ':aid', 'brief': ':bid' }) }}"></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>

{% endblock %}

{% block specificJS %}
    {{ encore_entry_script_tags('admin-brief-mapping') }}
{% endblock %}