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

{% block body %}
    <main class="row main mx-0" id="vue_app_cv_library" v-cloak>
        <section class="content-area p-r-l-6 fade-in">
            <div class="px-0 pb-4 mb-2 rounded-2 page-header">
                <p class="pb-2 text-primary">
                    {{ 'Create, edit and manage your forms'|trans }}
                </p>
                <div class="border-bottom position-relative d-flex align-items-center nav nav-tabs">
                    <a :class="[activePanel === 'form' ? 'active' : '', 'btn-tab nav-link']"
                       href="#form" @click="switchPanel('form')">{{ 'Forms List'|trans }}</a>
                    <a :class="[activePanel === 'overview' ? 'active' : '', 'btn-tab nav-link']"
                       href="#overview" @click="switchPanel('overview')">{{ 'Statistics'|trans }}</a>
                    {% if is_granted('ROLE_ATS_CONNECTT') or is_granted('ROLE_BACKEND') %}
                    <a :class="[activePanel === 'atsGlobal' ? 'active' : '', 'btn-tab nav-link']"
                       href="#atsGlobal" @click="switchPanel('atsGlobal')">ATS Global</a>
                    {% endif %}
                    {% if is_granted('ROLE_ATS_CONNECTT') %}
                        <button class="btn btn-primary text-white rounded-30 px-4 py-2 my-auto ml-auto" @click="openModalNewDafInstance">
                            {{ 'New Form'|trans }}
                            <i class="fal fa-plus-circle ml-2"></i>
                        </button>
                    {% endif %}
                </div>
            </div>

            <div class="mb-4 fade-in overflow-hidden" v-show="activePanel === 'form'">
                {% include "CvLibrary/form.html.twig" %}
            </div>
            <div class="mb-4 fade-in" v-show="activePanel === 'overview'">
                <div class="loader" v-show="chartLoading"></div>
                {% include "CvLibrary/Overview.html.twig" %}
            </div>
            <div class="mb-4 fade-in" v-show="activePanel === 'atsGlobal'">
                <div class="loader" v-show="atsLoading"></div>
                {% include "CvLibrary/ats_status_global.html.twig" %}
            </div>

            <div :class="[showDafInstancePanel ? 'show' : '', 'modal-backdrop']"
                 style="visibility: visible !important;" id="modal-backdrop" ref="modalBackdrop"
                 v-show="showDafInstancePanel"></div>
            <transition name="slide-right">
                <div id="newDafModal" class="bg-white newOffer form-campaign px-5 pt-4 pb-5 active" v-if="showDafInstancePanel">
                    <div class="w-100 mb-5 pb-4">
                        <div class="header d-flex flex-column pl-2 mb-5">
                            <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);" @click="closeSideModal">
                                <div class="slider-icon">
                                    <i class="fal fa-times text-white"></i>
                                </div>
                            </div>
                            <div class="title mt-3">
                                <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"></path>
                                </svg>
                                <h5 class="ml-3 text-primary font-weight-bold d-inline">{{ 'New Form'|trans }}</h5>
                            </div>
                        </div>

                        <div class="body-form">
                            <div class="pb-4 mb-3 container-fluid rounded-2 px-0 page-header">
                                <div class="container-fluid">
                                    <div class="card card-header-actions h-100 border-0">
                                        <div class="card-body row">
                                            <div class="col-12 mt-4 form-group form-label-group position-relative input-login">
                                                <label for="nameInstance" class="labelInput focusInput font-500">{{ 'Form name'|trans }}</label>
                                                <input type="text" id="nameInstance" name="_nameInstance" placeholder="{{ 'Form name'|trans }}"
                                                       class="form-control no-placeholder" v-model="newDaf.name">
                                            </div>
                                            <div class="col-6 mt-4 form-group form-label-group position-relative input-login">
                                                <label for="jobgroupForm" class="control-label labelInput focusInput font-500">{{ 'Job Group'|trans }}</label>
                                                <input-dropdown
                                                        v-model="newDaf.jobgroupId"
                                                        :init-value="newDaf.jobgroupId"
                                                        placeholder="{{ ''|trans }}"
                                                        label="{{ ''|trans }}"
                                                        :data-list="jobgroupList" id="jobgroupForm"
                                                        :required="false">
                                                </input-dropdown>
                                            </div>
                                            <div class="col-6 mt-4 form-group form-label-group position-relative input-login">
                                                <label for="modeForm" class="control-label labelInput focusInput font-500">{{ 'Mode'|trans }}</label>
                                                <input-dropdown
                                                        v-model="newDaf.mode"
                                                        :init-value="newDaf.mode"
                                                        placeholder="{{ ''|trans }}"
                                                        label="{{ ''|trans }}"
                                                        :data-list="modeForm" id="modeForm"
                                                        :required="false">
                                                </input-dropdown>
                                            </div>
                                            <div class="col-12 mt-5 d-flex justify-content-end">
                                                <button-multiple :content-position="'right'" class="ml-3">
                                                    <template v-slot:main-btn>
                                                        <button type="button" class="btn btn-primary cursor-pointer rounded-30 px-4"
                                                                :disabled="isLoading" @click="triggerSave(null, false)">
                                                            {{ 'Save'|trans }}
                                                        </button>
                                                    </template>
                                                    {% if is_granted('ROLE_BACKEND') %}
                                                        <template v-slot:extra-btn>
                                                            <button type="button" class="btn btn-primary cursor-pointer rounded-30 px-4"
                                                                    :disabled="isLoading" @click="openModalComment">{{ 'Save with a comment'|trans }}
                                                            </button>
                                                        </template>
                                                    {% endif %}
                                                </button-multiple>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% if is_granted('ROLE_BACKEND') %}
                            <save-and-comment :name-with-comment="Translator.trans('Save with a comment')"
                                              :is-linked-brief="false"
                                              :id="'newDafInstance'"
                                              :e-save-with-comment="triggerSave"
                            ></save-and-comment>
                        {% endif %}
                    </div>
                </div>
            </transition>
            <span class="d-none invisible twig-data-advertiser-id" data-advertiser-id="{{ advertiser.id }}"></span>
            <span class="d-none invisible twig-data-advertiser-name" data-advertiser-name="{{ advertiser.name }}"></span>
            <span class="d-none invisible twig-data-dafinstances" data-dafinstances="{{ dafInstances|json_encode }}"></span>
            <span class="d-none invisible twig-data-jobgroup-list" data-jobgroup-list="{{ jobgroupList|json_encode }}"></span>
            <span class="d-none invisible twig-data-path-ajax-get-link-preview" data-path-ajax-get-link-preview="{{ path('ajax_get_link_preview', {advertiser: advertiser.id}) }}"></span>
            <span class="d-none invisible twig-data-path-ajax-advertiser-get-ats-status-period" data-path-ajax-advertiser-get-ats-status-period="{{ path('ajax_advertiser_get_ats_status_with_period', {advertiser: advertiser.id}) }}"></span>
            <span class="d-none invisible twig-data-path-ajax-create-new-daf" data-path-ajax-create-new-daf="{{ path('ajax_create_new_daf', {advertiser: advertiser.id}) }}"></span>
            <span class="d-none invisible twig-data-path-ajax-duplicate-daf" data-path-ajax-duplicate-daf="{{ path('ajax_duplicate_daf', {advertiser: advertiser.id}) }}"></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>
        </section>
    </main>
{% endblock %}
{% block specificJS %}
    {{ encore_entry_script_tags('cvlibrary-overview-index') }}
{% endblock %}