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

{% block body %}
    <div id="applyData" v-cloak>
        <main class="row main mx-0 fade-in">
            <section class="content-area p-r-l-6">
                <div class="px-0 pb-4 mb-2 container-fluid rounded-2 page-header">
                    <div class="border-bottom position-relative d-flex align-items-center nav nav-tabs">
                        <a :class="[activePanel === 'candidates' ? 'active' : '', 'btn-tab nav-link']"
                           href="#candidates" @click="switchPanel('candidates')">{{ 'Candidates'|trans }}</a>
                        <a :class="[activePanel === 'jobs' ? 'active' : '', 'btn-tab nav-link']"
                           href="#jobs" @click="switchPanel('jobs')">{{ 'Jobs'|trans }}</a>

                        <template v-if="activePanel === 'candidates'">
                            <span class="chips chips_green ml-auto">
                                <% `${unreadCount} ${Translator.transChoice('unread', unreadCount, {count: unreadCount}).toLowerCase()}` %>
                            </span>
                            <span class="chips_purple ml-2 chips"
                                  :class="{'ml-auto': unreadCount === 0 || dafActive == 0}">{{ 'Total applies'|trans }} <b>{{ appliesCount.total }}</b></span>
                        </template>
                        <template v-else>
                            <span class="chips_purple ml-auto chips">{{ 'Total Jobs'|trans }} <b><% jobsCount %></b></span>
                        </template>
                    </div>
                </div>
                <div v-show="activePanel === 'jobs'">
                    {% include "CvLibrary/Applies/offers.html.twig" %}
                </div>

                <div v-show="activePanel === 'candidates'">
                    {% include "CvLibrary/Applies/applies.html.twig" %}
                </div>

                <span class="d-none invisible twig-data-advertiser-id" data-advertiser-id="{{ advertiser.id }}"></span>
                <span class="d-none invisible twig-data-daf-token" data-daf-token="{{ dafInstance.token }}"></span>
                <span class="d-none invisible twig-data-daf-api-id"
                      data-daf-api-id="{{ dafInstance.apiId|json_encode }}"></span>
                <span class="d-none invisible twig-data-daf-reasons"
                      data-daf-reasons="{{ dafReasons|json_encode }}"></span>
                <span class="d-none invisible twig-data-is-mail" data-is-mail="{{ isMail|json_encode }}"></span>
                <span class="d-none invisible twig-data-apply-status-id-label"
                      data-apply-status-id-label="{{ applyStatusIdLabel }}"></span>
                <span class="d-none invisible twig-data-nb-new" data-nb-new="{{ nbNew }}"></span>
                <span class="d-none invisible twig-data-daf-options"
                      data-daf-options="{{ dafOptions|json_encode }}"></span>
                <span class="d-none invisible twig-data-daf-infos" data-daf-infos="{{ dafInfos|json_encode }}"></span>
                <span class="d-none invisible twig-data-daf-id" data-daf-id="{{ dafInstance.id }}"></span>
                <span class="d-none invisible twig-data-daf-apply-status"
                      data-daf-apply-status="{{ apply_status }}"></span>
                <span class="d-none invisible twig-data-daf-active" data-daf-active="{{ dafInstance.active }}"></span>

                <span class="d-none invisible twig-data-applies-count"
                      data-applies-count="{{ appliesCount|json_encode }}"></span>

                <span class="d-none invisible twig-data-job-group-list"
                      data-job-group-list="{{ jobGroupList|json_encode }}"></span>
                <span class="d-none invisible twig-data-job-group-rules"
                      data-job-group-rules="{{ jobGroupRules|json_encode }}"></span>
                <span class="d-none invisible twig-data-job-categories"
                      data-job-categories="{{ jobCategories|json_encode }}"></span>
                <span class="d-none invisible twig-data-daf-api-error-type"
                      data-daf-api-error-type="{{ dafApiErrorType|json_encode }}"></span>

                <span class="d-none invisible twig-data-path-ajax-cvlibrary-applies-history"
                      data-path-ajax-cvlibrary-applies-history="{{ path('ajax_cvlibrary_applies_history', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
                <span class="d-none invisible twig-data-path-ajax-cvlibrary-applies-event-history"
                      data-path-ajax-cvlibrary-applies-event-history="{{ path('ajax_cvlibrary_applies_history_event', {advertiser: advertiser.id, dafInstance: dafInstance.id, apply: ":id"}) }}"></span>
                <span class="d-none invisible twig-data-path-ajax-cvlibrary-applies-share"
                      data-path-ajax-cvlibrary-applies-share="{{ path('ajax_cvlibrary_applies_share', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
                <span class="d-none invisible twig-data-path-ajax-cvlibrary-applies-check"
                      data-path-ajax-cvlibrary-applies-check="{{ path('ajax_cvlibrary_applies_check', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
                <span class="d-none invisible twig-data-path-ajax-cvlibrary-applies-cv"
                      data-path-ajax-cvlibrary-applies-cv="{{ path('ajax_cvlibrary_applies_cv', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
                <span class="d-none invisible twig-data-path-ajax-cvlibrary-applies-get-filtered"
                      data-path-ajax-cvlibrary-applies-get-filtered="{{ path('ajax_cvlibrary_applies_get_filtered', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
                <span class="d-none invisible twig-data-path-ajax-cvlibrary-applies-qualif-edit"
                      data-path-ajax-cvlibrary-applies-qualif-edit="{{ path('ajax_cvlibrary_applies_qualif_edit', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
                <span class="d-none invisible twig-data-path-ajax-cvlibrary-applies-by-candidate"
                      data-path-ajax-cvlibrary-applies-by-candidate="{{ path('ajax_cvlibrary_applies_by_candidate', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
                <span class="d-none invisible twig-data-path-ajax-cvlibrary-applies-by-job"
                      data-path-ajax-cvlibrary-applies-by-job="{{ path('ajax_cvlibrary_applies_by_job', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
                <span class="d-none invisible twig-data-path-ajax-cvlibrary-applies-jobs-get"
                      data-path-ajax-cvlibrary-applies-jobs-get="{{ path('ajax_cvlibrary_applies_jobs_get', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
                <span class="d-none invisible twig-data-path-ajax-cvlibrary-applies-scoring-report-download"
                      data-path-ajax-cvlibrary-applies-scoring-report-download="{{ path('ajax_cvlibrary_applies_scoring_report_download', {advertiser: advertiser.id, dafInstance: dafInstance.id, apply : ":id"}) }}"></span>
                <span class="d-none invisible twig-data-path-ajax-cvlibrary-applies-export"
                      data-path-ajax-cvlibrary-applies-export="{{ path('ajax_cvlibrary_applies_export', {advertiser: advertiser.id, dafInstance: dafInstance.id, apply : ":id"}) }}"></span>

                <span class="d-none invisible twig-data-dafinstances"
                      data-dafinstances="{{ dafInstances|json_encode }}"></span>
                <span class="d-none invisible twig-data-is-subscribe"
                      data-is-subscribe="{{ isSubscribe ? "1" : "0" }}"></span>
                <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-path-ajax-repush-applies"
                      data-path-ajax-repush-applies="{{ path('ajax_cvlibrary_applies_repush', {advertiser: advertiser.id, dafInstance: dafInstance.id}) }}"></span>
                <span class="d-none invisible twig-data-path-ajax-golden-apply-score"
                      data-path-ajax-golden-apply-score="{{ path('ajax_golden_apply_score',  {advertiser: advertiser.id, dafInstance: dafInstance.id, applyId : ":id"}) }}"></span>
            </section>
        </main>
        {{ include('CvLibrary/Applies/modals_job.html.twig') }}
        {{ include('CvLibrary/Applies/modals_repush_applies.twig') }}
        {{ include('CvLibrary/Applies/modals_applies_score.twig') }}
    </div>
{% endblock %}

{% block specificJS %}
    {{ encore_entry_script_tags('cvlibrary-daf-selector-header') }}
    {{ encore_entry_script_tags('cvlibrary-applies-index') }}
{% endblock %}