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

{% block body %}
    <main class="row main mx-0 min-vw-100 overflow-hidden">
        {{ include('Includes/aside.html.twig') }}
        <div id="ats_index" class="w-100 fade-in" v-cloak>
            <section class="content-area p-r-l-6">
                <div class="px-0 pb-4 mb-2 container-fluid rounded-2 page-header">
                    <div class="position-relative d-flex align-items-center nav nav-tabs">
                        <a :class="[activePanel === 'configuration' ? 'active' : '', 'btn-tab nav-link']"
                           href="#configuration" @click="switchPanel('configuration')">{{ 'configuration'|trans }}</a>
                        <a :class="[activePanel === 'filter' ? 'active' : '', 'btn-tab nav-link']"
                           href="#filter" @click="switchPanel('filter')">{{ 'Filter'|trans }}</a>
                        <a :class="[activePanel === 'status' ? 'active' : '', 'btn-tab nav-link']"
                           href="#status" @click="switchPanel('status')">{{ 'Overview'|trans }}</a>
                    </div>
                </div>
                <div class="row col-md-12 my-4 m-0 px-0 bg-white pt-4 pb-4 rounded-2"
                     v-if="activePanel === 'configuration' && atsConfiguration !== null">
                    {% include "CvLibrary/Ats/ats_configuration.html.twig" %}
                </div>
                <div class="row col-md-12 my-4 m-0 px-0 bg-white pt-4 pb-4 rounded-2"
                     v-if="activePanel === 'filter'">
                    {% include "CvLibrary/Ats/ats_filter.html.twig" %}
                </div>
                <div class="row col-md-12 my-4 m-0 px-0 pb-4"
                     v-if="activePanel === 'status'">
                    {% include "CvLibrary/Ats/ats_status.html.twig" %}
                </div>
            </section>
        </div>
        <span class="d-none invisible twig-data-path-current-route" data-path-current-route="{{ path(routeName, {'advertiser': advertiser.id, 'dafInstance': ':did' }) }}"></span>
        <span class="d-none invisible twig-data-advertiser-id" data-advertiser-id="{{ advertiser.id }}"></span>
        <span class="d-none invisible twig-data-daf-id" data-daf-id="{{ dafInstance.id }}"></span>
        <span class="d-none invisible twig-data-daf-token" data-daf-token="{{ dafInstance.token }}"></span>
        <span class="d-none invisible twig-data-dafinstances" data-dafinstances="{{ dafInstances|json_encode }}"></span>

        <span class="d-none invisible twig-data-path-ajax-ats-conf" data-ats-conf="{{ path('ajax_ats_conf', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-get-all-ats" data-get-all-ats="{{ path('ajax_get_all_ats', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-update-ats" data-update-ats="{{ path('ajax_save_ats_conf', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-get-ats-connection-test-get" data-get-ats-connection-test-get="{{ path('ajax_get_ats_connection_test_get', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-get-ats-connection-test-post" data-get-ats-connection-test-post="{{ path('ajax_get_ats_connection_test_post', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-check-ats-connection" data-check-ats-connection="{{ path('ajax_check_check_ats_connection', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-get-api-filter" data-get-api-filter="{{ path('ajax_get_api_filter', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-get-custom-questions-answers" data-get-custom-questions-answers="{{ path('ajax_get_custom_questions_answers', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-save-ats-filters" data-save-ats-filters="{{ path('ajax_save_ats_filters', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-get-ats-status-period" data-get-ats-status-period="{{ path('ajax_get_ats_status_with_period', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-get-applies-url-error" data-get-ats-applies-url-error="{{ path('cvlibrary_form_applies', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
    </main>
{% endblock %}
{% block specificJS %}
    {{ encore_entry_script_tags('cvlibrary-daf-selector-header') }}
    {{ encore_entry_script_tags('cvlibrary-form-ats-index') }}
{% endblock %}