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

{% block title %}Daf ATS{% endblock %}

{% block pageheader %}Daf ATS{% endblock %}

{% block body %}
    
    {% set breadcrumb_nav = "home" %}
    
    <div id="applyData" v-cloak>
        
        <main class="row main mx-0 min-vw-100">
            {{ include('Includes/aside_ats.html.twig') }}
            <section class="content-area p-r-l-6">
                <div class="title-page col-12 text-left pb-4 mb-2 pl-0 d-none">
                    <h2 class="lead font-300">{{ 'Applies Overview'|trans }}</h2>
                </div>
                <div class="col-12 mb-4 px-0 d-flex pt-4">
                    <div class="px-0">
                        <span class="font-weight-bold mr-2 title-page">{{ 'Tableau de candidatures'|trans }}</span>
                        <span v-if="unreadCount > 0" class="chips chips_green"><% unreadCount %> {{ 'unread'|trans }}</span>
                    
                    </div>
                    <div class="text-right px-0">
                        <span class="chips_purple ml-2 font-500 chips">{{ 'Total applies'|trans }} <b>{{ appliesCount.total }}</b></span>
                        {% if  dafInstance.active == 0 %}
                            <span class="chips status-form ml-5 chips_red ">
                            inactive
                            </span>
                        {% endif %}
                    </div>
                </div>
                <div class="col-12 main-data-table px-0">
                    {#                    data-tables options                       #}
                    <div class="data-table-headers bg-white py-3 rounded-2 col-sm-12">
                        <div class="col-12 d-flex flex-row panels-headers">
                            <a class="panel-title toqualify" v-on:click="page=1;currentPage=1;getAppliesInstance('toqualify', pageLimit)">
                                <p class="mr-3">{{ 'To qualify'|trans }}</p>
                                <span><% totalAppliesToqualify %></span>
                            </a>
                            <a class="panel-title qualified" v-on:click="page=1;currentPage=1;getAppliesInstance('qualified', pageLimit)">
                                <p class="mr-3">{{ 'Qualified'|trans }}</p>
                                <span><% totalAppliesQualified %></span>
                            </a>
                            <a class="panel-title hired" v-on:click="page=1;currentPage=1;getAppliesInstance('hired', pageLimit)">
                                <p class="mr-3">{{ 'Hired'|trans }}</p>
                                <span><% totalAppliesHired %></span>
                            </a>
                            <a class="panel-title unqualified" v-on:click="page=1;currentPage=1;getAppliesInstance('unqualified', pageLimit)">
                                <p class="mr-3">{{ 'Unqualified'|trans }}</p>
                                <span><% totalAppliesUnqualified %></span>
                            </a>
                        </div>
                        <div class="col-md-12 section-search text-right mt-xs-3">
                            <div class="col-md-3 px-0 d-inline-block">
                                <div class="input-group">
                                    <input v-model="filterApply"
                                           @keyup.enter="filteringApply()"
                                           type="search" class="form-control border"
                                           aria-controls="search-table"
                                           placeholder="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 class="advanced-search mt-2 w-25 ml-auto" id="advanced-search-button" @click="isAdvanced = !isAdvanced">
                                <span>{{ 'add Filters'|trans }}</span>
                                <i class="fal fa-arrow-down"></i>
                            </div>
                        </div>
                        <div class="col-md-12 text-left d-flex data-options">
                            <div class="pagination pr-4">
                                <span class="">Page <b> <% page %></b> of <% Math.ceil(appliesCount / pageLimit) %></span>
                                <div class="pl-4">
                                    <i class="pr-2 fas fa-step-backward mr-2" @click="navigatePage('backward')" :class="{ disable: disabledArrowBackward }"></i>
                                    <i class="pr-2 fal fa-chevron-left mr-2" @click="navigatePage('prev')" :class="{ disable: disabledArrowPrev }" ></i>
                                    <i class="pr-2 fal fa-chevron-right mr-2" @click="navigatePage('next')" :class="{ disable: disabledArrowNext }"></i>
                                    <i class="fas fa-step-forward" @click="navigatePage('forward')" :class="{ disable: disabledArrowForward }"></i>
                                </div>
                            </div>
                            {#                                    <span class="pr-4 pl-4 cursor-pointer" @click="printAll()">View all</span>#}
                            <div class="pr-2 pl-4 d-flex">
                                <p class="mb-0 mr-2">Date</p>
                                <i class="fal fa-arrow-down" @click="filteringbyDate('ddesc')"></i>
                                <i class="fal fa-arrow-up" @click="filteringbyDate('dasc')"></i>
                            </div>
                            <span v-if="unreadFilter" class="chips chips_green new-job-chips my-auto mr-2 cursor-pointer" title="clear" @click="unreadFilter = false; getAppliesInstance(appliesType, pageLimit)">
                                {{ 'unread'|trans }}
                                <i class="fal fa-times"></i>
                            </span>
                        </div>
                    </div>
                    {#                    data-tables advanced search              #}
                    <div class="advanced-search bg-white my-3 p-4 rounded-2" id="advanced-search" style="display: none">
                        <div class="well">
                            <div class="title-page col-12 text-left pb-2 mb-2 d-flex">
                                <h3 class="lead font-600">{{ 'Advanced search'|trans }} </h3>
                            </div>
                            <div class="row">
                                <div class="col-sm-4 px-4">
                                    <div class="form-group">
                                        <label for="">{{ 'Job ID'|trans }}</label>
                                        <input type="text" class="form-control rounded-30" v-model="advancedSearch.idExt">
                                    </div>
                                    <div class="form-group">
                                        <label for="">{{ 'Job title'|trans }}</label>
                                        <input type="text" class="form-control rounded-30" v-model="advancedSearch.title">
                                    </div>
                                    <div class="form-group">
                                        <label for="">{{ 'Job Location'|trans }}</label>
                                        <input type="text" class="form-control rounded-30" v-model="advancedSearch.location">
                                    </div>
                                </div>
                                <div class="col-sm-4 px-4" style="border-left: .5px dashed #e4e4e4">
                                    <div class="form-group">
                                        <label for="">{{ 'Candidate Name'|trans }}</label>
                                        <input type="text" class="form-control rounded-30" v-model="advancedSearch.name">
                                    </div>
                                    <div class="form-group">
                                        <label for="">{{ 'Candidate email'|trans }}</label>
                                        <input type="text" class="form-control rounded-30" v-model="advancedSearch.email">
                                    </div>
                                </div>
                                <div class="col-sm-4 px-4 mb-4" style="border-left: .5px dashed #e4e4e4">
                                    {#                                    <% dafInfos.customFields %>#}
                                    <template v-for="customField in dafInfos.customFields">
                                        <div v-if="customField.type !== 'default'">
                                            <div class="form-group">
                                                <label for=""><% customField.name %></label>
                                                
                                                <input v-if="customField.type=='text'" id="typeFields"
                                                       class="form-control rounded-30" type="text"
                                                       v-model="advancedSearch.customFields[customField.name.replace(/\s/g, '_')]">
                                                
                                                <input v-if="customField.type=='date'" id="typeFields"
                                                       class="form-control rounded-30" type="date"
                                                       v-model="advancedSearch.customFields[customField.name.replace(/\s/g, '_')]">
                                                
                                                <div v-if="customField.type=='checkbox'">
                                                    <input id="typeFields"
                                                           class="rounded-30" type="checkbox"
                                                           v-model="advancedSearch.customFields[customField.name.replace(/\s/g, '_')]" true-value="customField.name" false-value="">
                                                </div>
                                                
                                                <div v-if="customField.type=='radio'" class="text-right">
                                                    <div>
                                                        <span class="control-label col-sm-6">{{ 'No value'|trans }}: </span>
                                                        <span class="control-label col-sm-6 text-left"><input
                                                            class="rounded-30"  type="radio"
                                                            :name="customField.name.replace(/\s/g, '_')+'_TQ'"
                                                            :checked="advancedSearch.customFields[customField.name.replace(/\s/g, '_')]==''"
                                                            v-model="advancedSearch.customFields[customField.name.replace(/\s/g, '_')]" value=""></span>
                                                    </div>
                                                    <div v-for="value in customField.listValues">
                                                        <span class="control-label col-sm-6"><% value.name %>: </span>
                                                        <span class="col-sm-6 text-left">
                                                                    <input class="rounded-30"
                                                                           type="radio"
                                                                           :name="customField.name.replace(/\s/g, '_')+'_TQ'"
                                                                           :checked="advancedSearch.customFields[customField.name.replace(/\s/g, '_')]==value.code"
                                                                           v-model="advancedSearch.customFields[customField.name.replace(/\s/g, '_')]" v-bind:value="value.code">
                                                                </span>
                                                    </div>
                                                </div>
                                                
                                                <div v-if="customField.type=='multicheckboxes'" class="text-right">
                                                    
                                                    <div v-for="value in customField.listValues">
                                                        <span class="control-label col-sm-6"><% value.name %>: </span>
                                                        <span class="col-sm-6 text-left">
                                                                    <input class="rounded-30"
                                                                           type="checkbox"
                                                                           v-model="advancedSearch.customFields[customField.name.replace(/\s/g, '_') + '|' + value.code]" v-bind:value="value.code">
                                                                </span>
                                                    </div>
                                                </div>
                                                
                                                <input v-if="customField.type=='slider'"
                                                       class="form-control rounded-30" id="typeFields"
                                                       min="1" max="5" type="range"
                                                       v-model="advancedSearch.customFields[customField.name.replace(/\s/g, '_')]">
                                                
                                                
                                                <select v-if="customField.type=='list'" class="form-control rounded-30"
                                                        id="typeFields"
                                                        v-model="advancedSearch.customFields[customField.name.replace(/\s/g, '_')]">
                                                    <option value=""></option>
                                                    <option v-for="value in customField.listValues"
                                                            :value="value.code"><% value.name %>
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                            <div class="row">
                                {#                                         <div id="filter-date">#}
                                <div class="col-sm-12 col-md-4 px-4">
                                    <div class="form-group">
                                        {#                                                     <% date1 %>#}
                                        {#                                                     <% date2 %>#}
                                        {#                                                     <div class="datepicker-trigger">#}
                                        {#                                                         <input type="text" id="trigger-range" :value="date1 + ' - ' + date2" readonly>#}
                                        {#                                                         <airbnb-style-datepicker#}
                                        {#                                                                 :trigger-element-id="'trigger-range'"#}
                                        {#                                                                 :date-one="date1"#}
                                        {#                                                                 :date-two="date2"#}
                                        {#                                                                 v-on:date-one-selected="function(val) { date1 = val }"#}
                                        {#                                                                 v-on:date-two-selected="function(val) { date2 = val }"#}
                                        {#                                                         ></airbnb-style-datepicker>#}
                                        {#                                                     </div>#}
                                    </div>
                                    <div class="form-group">
                                        <span class="mb-2 d-block">{{ 'Filter by date'|trans }} </span>
                                        <div class="">
                                            <v-date-picker :mode='modeDatePicker' v-model="selectedDate" locale="en" is-range is-double-paned />
                                        </div>
                                    </div>
                                </div>
                                {#                                         </div>#}
                            </div>
                            <div class="row p-3 justify-content-end">
                                <button class="btn btn-light mr-2" @click="resetAdvancedSearch()">{{ 'Reset'|trans }}</button>
                                <button class="btn btn-outline-primary mr-2" @click="exportAll = true; exportApplies(exportAllApplies)">{{ 'Export'|trans }}</button>
                                <button class="btn btn-primary" @click="isAdvanced = true; getAppliesInstance(appliesType, pageLimit)">{{ 'Search'|trans }}</button>
                            </div>
                            {#                                    #}
                            <div class="row col-sm-12 text-center" @click="isAdvanced = false">
                                <div class="slider-icon-group position-absolute active" id="button-up-advanced-search" style="left: 50%;">
                                    <div class="slider-icon">
                                        <i class="fal fa-arrow-down"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {#                    data-tables applies                     #}
                    
                    <div class="main-data-table-content mb-5 pb-3">
                        {#                     data-tables headers                    #}
                        {% if (dafInfos['geoDistance'] == false) and (dafInfos['scoring'] == true) %}
                            {% set col = 1 %}
                        {% elseif (dafInfos['geoDistance'] == true) and (dafInfos['scoring'] == false) %}
                            {% set col = 2 %}
                        {% elseif (dafInfos['scoring'] == false) and (dafInfos['geoDistance'] == false) %}
                            {% set col = 3 %}
                        {% else %}
                            {% set col = 4 %}
                        {% endif %}
                        <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 py-4 table-headers" style="box-shadow: none">
                            <div class="col-12 row pr-0">
                                {#                                <div>#}
                                {#                                    <input class="inp-cbx" type="checkbox" @change="checkAll" v-model="allAppliesChecked"/>#}
                                {#                                </div>#}
                                <div class="col-3 my-auto user-profile p-0 d-flex justify-content-start align-items-center">
                                    <div class="checkbox my-auto mr-4">
                                        <input class="inp-cbx" id="checkAll" type="checkbox"
                                               style="display: none;"
                                               @change="checkAll" v-model="allAppliesChecked"/>
                                        <label class="cbx" for="checkAll">
                                              <span>
                                                   <svg width="10px" height="10px" viewbox="0 0 10 10">
                                                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                                   </svg>
                                              </span>
                                        </label>
                                    </div>
                                    <span>
                                        <b class="mr-2">{{ 'Name'|trans }}</b>
                                    </span>
                                </div>
                                <div class="col-3 my-auto job-title">
                                    <b>{{ 'Job title'|trans }}</b>
                                </div>
                                
                                <div class="col-3 my-auto job-location text-center">
                                    <b>{{ 'Job Location'|trans }}</b>
                                </div>
                                
                                {#                               Relevance && Distance              #}
                                {#                                {% if dafInfos['scoring'] == true and dafInfos['geoDistance'] == true %}#}
                                {#                                    <div class="col-2 my-auto text-center">#}
                                {#                                        <b>Relevance</b>#}
                                {#                                    </div>#}
                                {#                                {% elseif col == 1 %}#}
                                {#                                    <div class="col-2 my-auto text-left">#}
                                {#                                        <b>Relevance</b>#}
                                {#                                    </div>#}
                                {#                                {% endif %}#}
                                
                                {#                                {% if (dafInfos['scoring'] == true and dafInfos['geoDistance'] == true) or col == 2 %}#}
                                {#                                <div class="col-2 my-auto d-grid my-auto text-center px-0 d-none">#}
                                {#                                    <span class="my-auto d-block text-left">#}
                                {#                                        <b>distance</b>#}
                                {#                                    </span>#}
                                {#                                </div>#}
                                {#                                {% endif %}#}
                                {#                    End           Relevance && Distance              #}
                                
                                <div class="col-2 my-auto px-0 text-center">
                                    <b>{{ 'Status'|trans }}</b>
                                </div>
                            </div>
                        </div>
                        
                        <div v-if="noData" class="alert alert-info mt-4 text-center border-0">
                            {{ 'no apply found'|trans }}
                        </div>
                        {#                     data-tables data                    #}
                        <div v-else class="main-data-table-line col-12 rounded-2 bg-white mt-2 py-2 line-animation" v-for="(apply,i) in applies" >
                            <div class="col-12 row pr-0 content-line" style="min-height: 50px;">
                                <div class="col-sm-3 my-auto user-profile p-0 d-flex justify-content-start align-items-center">
                                    <div class="checkbox my-auto mr-4">
                                        <input class="inp-cbx" :id="apply.id" type="checkbox"
                                               style="display: none;" :value="apply.id"
                                               v-model="checkedApplies" @change="allAppliesChecked = (applies.length == checkedApplies.length);"/>
                                        <label class="cbx" :for="apply.id">
                                              <span>
                                                   <svg width="10px" height="10px" viewbox="0 0 10 10">
                                                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                                   </svg>
                                              </span>
                                        </label>
                                    </div>
                                    <div>
                                       <span class="font-600 mr-2 my-auto d-block" v-if="apply.name"> <% humanizeText(apply.name) %>
                                             <br>
                                                <a class="cursor-pointer" @click="modalOtherApplies(apply)">
                                                    <i v-if="countAppliesByUser[apply.email]-1 > 0" class="small text-info text-underline">
                                                    <% countAppliesByUser[apply.email]-1 %> Other Applies</i>
                                                </a>
                                       </span>
                                    </div>
                                    <span v-if="apply.checked == 0" class="chips chips_green new-job-chips my-auto mr-2 cursor-pointer" @click="unreadFilter = true; getAppliesInstance(appliesType, pageLimit)">{{ 'unread'|trans }}</span>
                                </div>
                                
                                <div class="col-sm-3 my-auto text-center d-flex justify-content-between">
                                    <a class="rounded-2 link-modal-job" @click="showKanbanJobModal(apply)" data-tippy-content="see the applies for this Job"><% apply.jobName %>
                                        <span class="font-italic small text-danger d-block text-left" v-if="!apply.active">{{ 'expired job'|trans }}</span>
                                    </a>
                                    <i class="fal fa-folder-open ml-auto cursor-pointer" @click="showKanbanJobModal(apply)" data-tippy-content="{{ 'see all applies for this Job'|trans }}" v-if="apply.jobName"></i>
                                </div>
                                
                                <div class="col-sm-3 my-auto job-location text-center">
                                    <span v-if="apply.city !== null"><% humanizeText(apply.city) %></span>
                                    <span v-else><% humanizeText(apply.state) %></span>
                                </div>
                                
                                {#                                    {% if col == 1 or col == 2 or col == 3 %}#}
                                {#                                    <div class="col-sm-4 my-auto job-location text-center" v-on:click="expandLineApply(apply.id)">#}
                                {#                                        <span v-if="apply.city !== null"><% humanizeText(apply.city) %></span>#}
                                {#                                        <span v-else><% humanizeText(apply.state) %></span>#}
                                {#                                    </div>#}
                                {#                                    {% else %}#}
                                {#                                    <div class="col-sm-3 my-auto job-location text-center" v-on:click="expandLineApply(apply.id)">#}
                                {#                                            <span v-if="apply.city !== null"><% humanizeText(apply.city) %></span>#}
                                {#                                            <span v-else><% humanizeText(apply.state) %></span>#}
                                {#                                        </div>#}
                                {#                                    {% endif %}#}
                                
                                
                                {#                                    Distance && Relevance Data        #}
                                
                                {#                                    {% if dafInfos['scoring'] == true and dafInfos['geoDistance'] == true %}#}
                                {#                                    <div class="col-sm-2 my-auto apply-scoring text-center" v-on:click="expandLineApply(apply.id)">#}
                                {#                                            <div v-if="apply.score !== null" class="d-inline-block mx-auto">#}
                                {#                                                <div class="progress" style="height: 7px; width: 100px;">#}
                                {#                                                    <div data-percentage="0%" v-bind:style="{ width: apply.score + '%' }" aria-valuenow=""#}
                                {#                                                         class="progress-bar"#}
                                {#                                                         role="progressbar"#}
                                {#                                                         aria-valuemin="0"#}
                                {#                                                         aria-valuemax="100"#}
                                {#                                                         :data-value="apply.score">#}
                                {#                                                    </div>#}
                                {#                                                </div>#}
                                {#                                                <span style="font-size: 10px; font-weight: 600" class="d-none"> <% apply.score %>%</span>#}
                                {#                                            </div>#}
                                {#                                            <div v-else>#}
                                {#                                                <span class="font-400"> <i class="fal fa-user-clock mr-1"></i> in progress</span>#}
                                {#                                            </div>#}
                                {#                                    </div>#}
                                {#                                    {% elseif col == 1 %}#}
                                {#                                    <div class="col-sm-3 my-auto apply-scoring text-center" v-on:click="expandLineApply(apply.id)">#}
                                {#                                        <div v-if="apply.score !== null" class="d-inline-block mx-auto">#}
                                {#                                            <div class="progress" style="height: 7px; width: 100px;">#}
                                {#                                                <div data-percentage="0%" v-bind:style="{ width: apply.score + '%' }" aria-valuenow=""#}
                                {#                                                     class="progress-bar"#}
                                {#                                                     role="progressbar"#}
                                {#                                                     aria-valuemin="0"#}
                                {#                                                     aria-valuemax="100"#}
                                {#                                                     :data-value="apply.score">#}
                                {#                                                </div>#}
                                {#                                            </div>#}
                                {#                                            <span style="font-size: 10px; font-weight: 600" class="d-none"> <% apply.score %>%</span>#}
                                {#                                        </div>#}
                                {#                                        <div v-else>#}
                                {#                                            <span class="font-400"> <i class="fal fa-user-clock mr-1"></i> in progress</span>#}
                                {#                                        </div>#}
                                {#                                    </div>#}
                                {#                                    {% endif %}#}
                                
                                {#                            Start        Distance && Relevance Data        #}
                                
                                {#                                    {% if (dafInfos['scoring'] == true and dafInfos['geoDistance'] == true) or col == 2 %}#}
                                {#                                    <div class="col-sm-2 my-auto d-grid my-auto text-center px-0 apply-distance" v-on:click="expandLineApply(apply.id)">#}
                                {#                                        <div class="my-auto d-block">#}
                                {#                                                <div v-if="Number.isInteger(apply.geoDistance) && apply.geoDistance" class="d-flex content-distance">#}
                                {#                                                    <div v-if="apply.geoDistance < 10" title="Distance less than 10km" data-tippy-content="Distance less than 10km"#}
                                {#                                                           class="my-auto mx-auto d-flex geo-distance align-items-baseline very-close" style="width: 120px;">#}
                                
                                {#                                                            <i class="far fa-walking position-absolute" style="top: -5px;"></i>#}
                                {#                                                                <div class="progress-line">#}
                                {#                                                                   <span class="small" style="opacity: .6;">#}
                                {#                                                                        Very Close#}
                                {#                                                                    </span>#}
                                {#                                                                </div>#}
                                {#                                                            <i class="fas fa-map-marker-alt position-absolute"></i>#}
                                
                                
                                {#                                                            <i class="fas fa-map-marker-alt" style="color: #54D87D"></i>#}
                                {#                                                            <p class="mb-0 pl-1 ">Very close</p>#}
                                
                                {#                                                    </div>#}
                                {#                                                    <div v-else-if="(apply.geoDistance >= 10 && apply.geoDistance <= 30)"#}
                                {#                                                          title="Distance between 10 and 30km"#}
                                {#                                                          class="my-auto geo-distance align-items-baseline mx-auto d-flex closeDistance" style="width: 120px;" data-tippy-content="Distance between 10 and 30km">#}
                                
                                {#                                                         <i class="far fa-walking position-absolute" style="top: -5px;"></i>#}
                                {#                                                                <div class="progress-line">#}
                                {#                                                                    <span class="small" style="opacity: .6;">#}
                                {#                                                                        Close#}
                                {#                                                                    </span>#}
                                {#                                                                </div>#}
                                {#                                                            <i class="fas fa-map-marker-alt position-absolute"></i>#}
                                
                                {#                                                            <i class="fas fa-map-marker-alt" style="color: greenyellow;"></i>#}
                                {#                                                            <p class="mb-0 mt-2 ml-2">Close</p>#}
                                
                                {#                                                    </div>#}
                                {#                                                    <div v-else-if="(apply.geoDistance > 30 && apply.geoDistance <= 50)"#}
                                {#                                                          title="Distance between 30 and 50km"#}
                                {#                                                          class="my-auto align-items-baseline mx-auto d-flex geo-distance far"#}
                                {#                                                          data-tippy-content="Distance between 30 and 50km"#}
                                {#                                                          style="width: 120px;">#}
                                
                                {#                                                            <i class="fas fa-map-marker-alt" style="color: gold;"></i>#}
                                {#                                                            <p class="mb-0 mt-2 ml-2">Far</p>#}
                                
                                {#                                                         <i class="far fa-walking position-absolute" style="top: -5px;"></i>#}
                                {#                                                                <div class="progress-line">#}
                                {#                                                                    <span class="small" style="opacity: .6;">#}
                                {#                                                                        Far#}
                                {#                                                                    </span>#}
                                {#                                                                </div>#}
                                {#                                                            <i class="fas fa-map-marker-alt position-absolute"></i>#}
                                
                                {#                                                    </div>#}
                                {#                                                    <div v-else-if="(apply.geoDistance > 50 && apply.geoDistance <= 100)"#}
                                {#                                                          title="Distance between 50 and 100km"#}
                                {#                                                          data-tippy-content="Distance between 50 and 100km"#}
                                {#                                                          class="my-auto align-items-baseline mx-auto d-flex geo-distance very-far" style="width: 120px;">#}
                                
                                {#                                                          <i class="far fa-walking position-absolute" style="top: -5px;"></i>#}
                                {#                                                                <div class="progress-line">#}
                                {#                                                                    <span class="small" style="opacity: .6;">#}
                                {#                                                                        Very Far#}
                                {#                                                                    </span>#}
                                {#                                                                </div>#}
                                {#                                                            <i class="fas fa-map-marker-alt position-absolute"></i>#}
                                
                                {#                                                        <i class="fas fa-map-marker-alt"#}
                                {#                                                               style="color: orange"></i>#}
                                {#                                                            <p class="mb-0 mt-2 ml-2">Very far</p>#}
                                
                                {#                                                    </div>#}
                                {#                                                    <div v-else-if="(apply.geoDistance > 100 && apply.geoDistance <= 1000)"#}
                                {#                                                          title="Distance between 100 and 1000km"#}
                                {#                                                          class="my-auto align-items-baseline mx-auto d-flex geo-distance out-of-aera"#}
                                {#                                                          style="width: 120px;"#}
                                {#                                                          data-tippy-content="Distance between 100 and 1000km">#}
                                
                                {#                                                            <i class="fas fa-map-marker-alt"#}
                                {#                                                               style="color: orangered"></i>#}
                                {#                                                            <p class="mb-0 mt-2 ml-2">Out of area</p>#}
                                {#                                                         <i class="far fa-walking position-absolute" style="top: -5px;"></i>#}
                                {#                                                                <div class="progress-line">#}
                                {#                                                                     <span class="small" style="opacity: .6;">#}
                                {#                                                                       Out of area#}
                                {#                                                                    </span>#}
                                {#                                                                </div>#}
                                {#                                                            <i class="fas fa-map-marker-alt position-absolute"></i>#}
                                
                                {#                                                    </div>#}
                                {#                                                    <span v-else-if="apply.geoDistance > 1000"#}
                                {#                                                          title="Distance greater than 1000km"#}
                                {#                                                          data-tippy-content="Distance greater than 1000km"#}
                                {#                                                          class="my-auto align-items-baseline mx-auto d-flex geo-distance out-of-country">#}
                                
                                {#                                                            <i class="fas fa-map-marker-alt"#}
                                {#                                                               style="color: red"></i>#}
                                {#                                                            <p class="mb-0 mt-2 ml-2">Out of country</p>#}
                                {#                                                         <i class="fas fa-male position-absolute" style=" top: -5px;"></i>#}
                                {#                                                                <div class="progress-line">#}
                                {#                                                                     <span class="small" style="opacity: .6;">#}
                                {#                                                                       Out of Country#}
                                {#                                                                    </span>#}
                                {#                                                                </div>#}
                                {#                                                            <i class="fas fa-map-marker-alt position-absolute"></i>#}
                                
                                
                                {#                                                    </span>#}
                                {#                                                </div>#}
                                {#                                        </div>#}
                                {#                                    </div>#}
                                {#                                    {% endif %}#}
                                
                                {#                                   End Distance && Relevance Data        #}
                                
                                <div class="col-sm-2 my-auto d-flex px-0">
                                    <div class="select-status mx-auto">
                                        <div class="statut-option">
                                            <span v-if="apply.hired == 1" class="chips hired" v-on:click="changeOption(apply.id)" :id="'statut-' + apply.id">
                                                        <span :id="'statut-text-' + apply.id">
                                                            {{ 'hired'|trans }}
                                                        </span>
                                                        <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                                    </span>
                                            <span v-if="apply.qualified == 1" class="chips qualified" v-on:click="changeOption(apply.id)" :id="'statut-' + apply.id">
                                                        <span :id="'statut-text-' + apply.id">{{ 'qualified'|trans }}</span>
                                                        <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                                    </span>
                                            <span v-if="apply.unqualified == 1" class="chips unqualified" v-on:click="changeOption(apply.id)" :id="'statut-' + apply.id">
                                                        <span :id="'statut-text-' + apply.id">{{ 'unqualified'|trans }}</span>
                                                        <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                                    </span>
                                            <span v-if="apply.toQualify == 1" class="chips toqualify chips_bordered" v-on:click="changeOption(apply.id)" :id="'statut-' + apply.id">
                                                        <span :id="'statut-text-' + apply.id">{{ 'to qualify'|trans }}</span>
                                                        <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                                    </span>
                                        </div>
                                        <ul class="dropdown-select-menu list-unstyled rounded-2" style="display: none" :class="'dropdown-' + apply.id">
                                            <li @click="modalReasonToqualify(apply.id, 'statut-')" class="font-600" v-if="apply.toQualify != 1">{{ 'to qualify'|trans }}</li>
                                            <li @click="modalReasonQualified(apply.id, 'statut-')" class="font-600" v-if="apply.qualified != 1">{{ 'qualified'|trans }}</li>
                                            <li @click="modalReasonUnqualified(apply.id, 'statut-')" class="font-600" v-if="apply.unqualified != 1">{{ 'unqualified'|trans }}</li>
                                            <li @click="modalReasonhired(apply.id, 'statut-')" class="font-600" v-if="apply.hired != 1">{{ 'hired'|trans }}</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-sm-1 px-0 d-flex justify-content-between align-items-center">
                                    <span class="badge badge-job"><% timeAgo(apply.date) %></span>
                                    <div class="slider-icon-group position-absolute" style="left: 100%;">
                                        <div class="slider-icon" :href="'#' + apply.id" :data-target="'#' + apply.id"
                                             :id="'id-' + apply.id" @click="SliderFunction(apply.id)">
                                            <i class="far fa-angle-down"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hide-infos-apply col-12 pt-3 row pr-0 pb-3" :class="'div-' + apply.id" :data-id="apply.id" style="display: none;">
                                <div class="col-sm-12 d-flex mt-3">
                                    <div class="col-sm-6">
                                        <div class="pb-2">
                                            <ul class="list-unstyled mt-4">
                                                <li>
                                                    <i class="fal fa-clock mr-2"></i>
                                                    <span class="span-text">{{ 'applied at'|trans }} <% apply.date %></span>
                                                </li>
                                                <li v-if="countAppliesByUser[apply.email]-1 > 0" class="mt-1">
                                                    <i class="fal fa-comment-alt-dots"></i>
                                                    <a class="other-apply ml-2 text-underline" @click="modalOtherApplies(apply)"><% countAppliesByUser[apply.email]-1 %> {{ 'Other Applies'|trans }} </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 pl-4 d-flex" style="border-left: 0.5px dashed #e4e4e4">
                                        <div class="col-md-8 col-sm-12">
                                            <span class="mb-2 d-block font-600">{{ 'Contact'|trans }}</span>
                                            <div class="my-auto">
                                                <ul class="list-unstyled">
                                                    <li class="mb-1"><i class="fal fa-phone-alt"></i>
                                                        <span class="ml-2 span-text"><% apply.phone %></span>
                                                    </li>
                                                    <li class="d-flex flex-row">
                                                        <i class="fal fa-envelope mr-2 my-auto"></i>
                                                        <span class="ml-2 span-text"><% apply.email %></span>
                                                    </li>
                                                    <li class="d-flex flex-row mt-1" v-if="apply.data">
                                                        <i class="fal fa-map-marker-alt mr-2 my-auto"></i>
                                                        <span class="ml-2 span-text"><% apply.data %></span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-12 px-0">
                                            <div class="" @click="showHistory(apply.id, apply.idDafInstance, apply.ext, i)">
                                                <span class="mb-2 d-block font-600">{{ 'Status infos'|trans }}</span>
                                                <div class="">
                                                    <i class="fal fa-hourglass-half"></i>
                                                    <span class="text-underline ml-2 span-text">{{ 'status change history'|trans }}</span>
                                                </div>
                                            </div>
                                            
                                            <div class="">
                                                <span class="mb-2 d-block font-600 mt-5">{{ 'Externals Links to the job'|trans }}</span>
                                                <div class="mb-4">
                                                    <span class="cursor-pointer text-underline"
                                                          data-tippy-content="see the job towards company siteweb or the Daf"
                                                          title="see the job towards company siteweb or the Daf" @click="showDropdownLink(apply.id)">
                                                        <i class="far fa-external-link mr-2"></i>
                                                        {{ 'See Links'|trans }}
                                                    </span>
                                                    <ul class="dropdown-select-menu list-unstyled rounded-2" style="display: none" :class="'dropdown-ext' + apply.id">
                                                        <li class="font-600 text-left">
                                                            <a :href="'https://applies.goldenbees.fr/job/' + dafToken + '/' + apply.idExt" target="_blank" class="cursor-pointer">
                                                                {{ 'link to the Daf'|trans }}
                                                            </a>
                                                        </li>
                                                        <li class="font-600 text-left">
                                                            <a :href="apply.link" target="_blank" class="cursor-pointer">
                                                                {{ 'link to'|trans }} <% apply.company %> {{ 'siteweb'|trans }}
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    
                                    </div>
                                </div>
                                <div class="text-right d-block pr-0 col-sm-12">
                                    <button title="Show more infos"
                                            type="button"
                                            class="btn btn-primary rounded-30 d-inline-flex"
                                            @click="modalInfoCv(apply.id, apply.idDafInstance, apply.ext, i)">
                                        <small>{{ 'show infos'|trans }}</small>
                                        <i class="ml-3 far fa-angle-right"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bottom-bar-info fixed-bottom " v-if="checkedApplies.length > 0">
                        <div class="col-12 row py-4 px-4 bg-primary text-white bar-info mx-auto border-rounded-50 shadow-1 mb-4" >
                            <div class="col-sm-4" style="display: -webkit-inline-box;">
                                    <span class="icon-circle mr-3">
                                        <% checkedApplies.length %>
                                    </span>
                                {{ 'selected'|trans }}
                                <div class="chips-bottom ml-2 d-block" @click="resetSelectApplies(checkedApplies)">
                                    <i class="fal fa-times"></i>
                                    <span class="ml-1">{{ 'reset'|trans }}</span>
                                </div>
                            </div>
                            <div class="col-sm-8 justify-content-end d-flex">
                                <div class="chips-bottom bg-info mr-2" @click="statusGroupApplies(checkedApplies)">
                                    <i class="fal fa-paper-plane"></i>
                                    <span class="ml-1" title="mark as read">{{ 'change Status'|trans }}</span>
                                </div>
                                <div class="chips-bottom bg-info mr-2" @click="markAsReadApplies(checkedApplies)">
                                    <i class="far fa-check"></i>
                                    <span class="ml-1" title="mark as read">{{ 'Mark as read'|trans }}</span>
                                </div>
                                <div class="chips-bottom mr-2 px-3 bg-info" @click="shareApplies">
                                    <i class="far fa-envelope mr-1 "></i>
                                    <span class="ml-1">{{ 'Share'|trans }}</span>
                                </div>
                                <div class="chips-bottom bg-info" @click="exportApplies(checkedApplies)">
                                    <i class="far fa-arrow-to-bottom"></i>
                                    <span class="ml-1" @click="exportAll = false">{{ 'Download'|trans }}</span>
                                </div>
                                <div class="chips-bottom pink d-none" @click="deleteApplies(checkedApplies)">
                                    <i class="far fa-trash-alt"></i>
                                    <span class="ml-1" title="delete">{{ 'Archiver'|trans }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        {#    Modals    #}
        
        {#  Choice Export File Type   #}
        
        <div class="modal fade" id="export_file_type" tabindex="-1" role="dialog" aria-labelledby="exportFile" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header py-4 d-block border-0 bg-light">
                        <button type="button" class="close d-none" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title text-center border-0" id="myModalLabel">
                            <i class="far fa-arrow-to-bottom"></i>
                            <span>{{ 'Export applies (CSV or ZIP)'|trans }}</span>
                        </h4>
                    </div>
                    <div class="modal-body justify-content-center p-5 d-flex">
                        <form id="exportDataForm" method="POST" action="{{ path('ats_export_applies') }}">
                            <input type="hidden" name="export-start-date" :value="formattedSelectedDate.start">
                            <input type="hidden" name="export-end-date" :value="formattedSelectedDate.end">
                            <input type="hidden" name="export-id-daf" value="{{ dafInstance.id }}">
                            <input type="hidden" name="typeExport" :value="appliesType">
                            <input type="hidden" name="typeExport" :value="appliesType">
                            <input type="hidden" :value="JSON.stringify(advancedSearch)" name="advancedSearchExport">
                            <input v-if="checkedApplies.length > 0 && !exportAll" type="hidden" :value="checkedApplies.join(',')" name="selectedApplies">
                            <label class="radio radio-inline mr-5 d-flex">
                                <input type="radio" name="exportFile" id="export_zip_file" value="zipCv" class="radio-export-file" @click="exportData" v-model="fileTypeSelected"> {{ 'Zip Archive File'|trans }}
                            </label>
                            
                            <label class="radio radio-inline d-flex">
                                <input type="radio" name="exportFile" id="export_csv_file" value="csvCv" class="radio-export-file" @click="exportData" v-model="fileTypeSelected"> {{ 'CSV File'|trans }}
                            </label>
                        </form>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="reset" class="btn btn-light" data-dismiss="modal" @click="resetFileSelected()">{{ 'Close'|trans }}</button>
                    </div>
                </div>
            </div>
        </div>
        
        {#  End Choice Export File Type   #}
        
        {#    cv modal #}
        <div class="modal fade bd-example-modal-lg rounded-2" id="infoApply" tabindex="-1" role="dialog" aria-labelledby="iApply" style="overflow: auto">
            <div class="modal-dialog modal-xl bg-light rounded-2" role="document">
                <div class="modal-content bg-light" style="min-height: 1000px;">
                    <div class="modal-header border-0 p-r-l-6-cv d-flex row">
                        <button type="button" class="close font-300" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" style="font-size: 2rem;">&times;</span>
                        </button>
                        <div class="col-12 mt-3 px-0" :class="infoApply.cv !== null ? 'd-flex' : '' ">
                            <div class="col-md-12 col-sm-12 px-0 col-lg-3">
                                <div class="title-page col-12 text-left pb-2 mb-2 d-flex">
                                    <h2 class="lead mr-2">{{ 'Applies'|trans }} / </h2>
                                    <h2 class="lead font-400" >{{ 'apply N°'|trans }}  <% infoApply.id %> </h2>
                                </div>
                            </div>
                            <div class="col-md-12 col-sm-12 d-flex justify-content-between">
                                <div class="lead w-50"><% infoApply.jobName %> - <i v-if="infoApply.city !== null"><% infoApply.city %></i>
                                    <i v-else><% infoApply.state %></i>
                                    <br>
                                    <template v-if="dafOptions.cv && dafOptions.cv.required === false">
                                        <span class="chips chips_yellow">no cv required</span>
                                    </template>
                                </div>
                                <div class="page-counter w-50 d-flex justify-content-between">
                                    <div class="slide-button d-flex">
                                    <span v-on:click="navigateApply('prev')" class="btn-prev cursor-pointer" :class="{ disable: disabledArrowPrevCvSlide }">
                                        <i class="fad fa-arrow-alt-square-left mr-2 fa-2x"></i>
                                    </span>
                                        <span v-on:click="navigateApply('next')" class="btn-next cursor-pointer" :class="{ disable: disabledArrowNextCvSlide }">
                                        <i class="fad fa-arrow-alt-square-right fa-2x"></i>
                                     </span>
                                    </div>
                                    <div class="lead">
                                        <span class="font-600"><% currentApplyindex + 1 %></span> / <% appliesCount %>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-iApply modal-body p-r-l-6-cv d-flex row">
                        <div class="col-sm-12 col-md-12 col-lg-12" :class="infoApply.cv !== null ? 'col-xl-3' : 'col-xl-12 mx-auto' " :style="infoApply.cv !== null ? '' : 'max-width: 50%;'">
                            <div class="col-sm-12 bg-white mb-3 pb-4 rounded" >
                                <div class="section-title py-4 d-flex justify-content-between">
                                    <div class="">
                                        <i class="fad fa-user-tie"></i>
                                        <span class="font-600 ml-2">{{ 'Candidat'|trans }}</span>
                                        <br>
                                        <i class="font-italic small">{{ 'Apply at'|trans }} <% infoApply.date %></i>
                                    </div>
                                    <div class="status d-flex w-75 justify-content-end">
                                        <div class="ml-3">
                                            <div class="statut-option">
                                                <span v-if="infoApply.hired == 1" class="chips hired"
                                                      @click="changeOption(infoApply.id)" :id="'modal-statut-' + infoApply.id">
                                                        <span :id="'modal-statut-text-' + infoApply.id">
                                                            {{ 'hired'|trans }}
                                                        </span>
                                                        <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                                    </span>
                                                <span v-if="infoApply.qualified == 1" class="chips qualified"
                                                      @click="changeOption(infoApply.id)" :id="'modal-statut-' + infoApply.id">
                                                        <span :id="'modal-statut-text-' + infoApply.id">
                                                            {{ 'qualified'|trans }}
                                                        </span>
                                                        <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                                    </span>
                                                <span v-if="infoApply.unqualified == 1" class="chips unqualified"
                                                      @click="changeOption(infoApply.id)" :id="'modal-statut-' + infoApply.id">
                                                        <span :id="'modal-statut-text-' + infoApply.id">
                                                            {{ 'unqualified'|trans }}
                                                        </span>
                                                        <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                                    </span>
                                                <span v-if="infoApply.toQualify == 1" class="chips toqualify chips_bordered"
                                                      @click="changeOption(infoApply.id)" :id="'modal-statut-' + infoApply.id">
                                                        <span :id="'modal-statut-text-' + infoApply.id">
                                                            {{ 'to qualify'|trans }}
                                                        </span>
                                                        <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                                </span>
                                            </div>
                                            <ul class="dropdown-select-menu list-unstyled rounded-2" style="display: none" :class="'dropdown-' + infoApply.id">
                                                <li @click="modalReasonToqualify(infoApply.id, 'modal-statut-')" class="font-600" v-if="infoApply.toQualify != 1">{{ 'to qualify'|trans }}</li>
                                                <li @click="modalReasonQualified(infoApply.id, 'modal-statut-')" class="font-600" v-if="infoApply.qualified != 1">{{ 'qualified'|trans }}</li>
                                                <li @click="modalReasonUnqualified(infoApply.id, 'modal-statut-')" class="font-600" v-if="infoApply.unqualified != 1">{{ 'unqualified'|trans }}</li>
                                                <li @click="modalReasonhired(infoApply.id, 'modal-statut-')" class="font-600" v-if="infoApply.hired != 1">{{ 'hired'|trans }}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="section-body py-4">
                                    <div class="d-flex justify-content-between mb-3">
                                        <div>{{ 'Name'|trans }}
                                        </div>
                                        <span><b> <% infoApply.name %> </b></span>
                                    </div>
                                    
                                    {#                                    <div class="d-flex justify-content-between  d-none mb-3">#}
                                    {#                                        <span>Date de naissance</span>#}
                                    {#                                        <span><b></b></span>#}
                                    {#                                    </div>#}
                                    
                                    
                                    <div class="d-flex justify-content-between mb-3">
                                        <span>{{ 'Phone'|trans }}</span>
                                        <span><b><% infoApply.phone %></b></span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-3">
                                        <span>{{ 'Mail'|trans }}</span>
                                        <span><b><% infoApply.email %></b></span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-3" v-if="infoApply.data !== null">
                                        <span>{{ 'Location'|trans }}</span>
                                        <span>
                                            <b><% infoApply.data %></b>
                                        </span>
                                    </div>
                                    
                                    {#                                    Relevance and Distance          #}
                                    
                                    {#                                    <div class="d-flex justify-content-between mt-3 mb-2 d-none" v-if="infoApply.score">#}
                                    {#                                        {% if dafInfos['scoring'] == true %}#}
                                    {#                                            <span>Relevance</span>#}
                                    {#                                            <div class="">#}
                                    {#                                                <div class="progress" style="height: 7px; width: 100px;">#}
                                    {#                                                    <div data-percentage="0%" v-bind:style="{ width: infoApply.score + '%' }" aria-valuenow=""#}
                                    {#                                                         class="progress-bar progress-bar-modal"#}
                                    {#                                                         role="progressbar"#}
                                    {#                                                         aria-valuemin="0"#}
                                    {#                                                         aria-valuemax="100"#}
                                    {#                                                         :data-value="infoApply.score">#}
                                    {#                                                    </div>#}
                                    {#                                                </div>#}
                                    {#                                                <span style="font-size: 10px; font-weight: 600" class="d-none"> <% infoApply.score %>%</span>#}
                                    {#                                            </div>#}
                                    {#                                        {% endif %}#}
                                    {#                                    </div>#}
                                    {#                                    <div class="d-flex justify-content-between mt-3 mb-2 d-none" v-if="infoApply.geoDistance">#}
                                    {#                                        {% if dafInfos['geoDistance'] == true %}#}
                                    {#                                            <span>Distance</span>#}
                                    {#                                            <div class="">#}
                                    {#                                                <div v-if="Number.isInteger(infoApply.geoDistance) && infoApply.geoDistance" class="d-flex">#}
                                    {#                                                    <span v-if="infoApply.geoDistance < 10" title="Distance less than 10km" class="my-auto align-items-baseline mx-auto d-flex">#}
                                    {#                                                              <i class="fas fa-map-marker-alt" style="color: #54D87D"></i>#}
                                    {#                                                              <p class="mb-0 pl-1 ">Very close</p>#}
                                    {#                                                        </span>#}
                                    {#                                                    <span v-else-if="(infoApply.geoDistance >= 10 && infoApply.geoDistance <= 30)"#}
                                    {#                                                          title="Distance between 10 and 30km" class="my-auto align-items-baseline mx-auto d-flex">#}
                                    {#                                                            <i class="fas fa-map-marker-alt"#}
                                    {#                                                               style="color: greenyellow;"></i>#}
                                    {#                                                            <p class="mb-0 mt-2 ml-2">Close</p>#}
                                    {#                                                        </span>#}
                                    {#                                                    <span v-else-if="(infoApply.geoDistance > 30 && infoApply.geoDistance <= 50)"#}
                                    {#                                                          title="Distance between 30 and 50km" class="my-auto align-items-baseline mx-auto d-flex">#}
                                    {#                                                            <i class="fas fa-map-marker-alt"#}
                                    {#                                                               style="color: gold;"></i>#}
                                    {#                                                            <p class="mb-0 mt-2 ml-2">Far</p>#}
                                    {#                                                        </span>#}
                                    {#                                                    <span v-else-if="(infoApply.geoDistance > 50 && infoApply.geoDistance <= 100)"#}
                                    {#                                                          title="Distance between 50 and 100km" class="my-auto align-items-baseline mx-auto d-flex">#}
                                    {#                                                            <i class="fas fa-map-marker-alt"#}
                                    {#                                                               style="color: orange"></i>#}
                                    {#                                                            <p class="mb-0 mt-2 ml-2">Very far</p>#}
                                    {#                                                        </span>#}
                                    {#                                                    <span v-else-if="(infoApply.geoDistance > 100 && infoApply.geoDistance <= 1000)"#}
                                    {#                                                          title="Distance between 100 and 1000km" class="my-auto align-items-baseline mx-auto d-flex">#}
                                    {#                                                            <i class="fas fa-map-marker-alt"#}
                                    {#                                                               style="color: orangered"></i>#}
                                    {#                                                            <p class="mb-0 mt-2 ml-2">Out of area</p>#}
                                    {#                                                        </span>#}
                                    {#                                                    <span v-else-if="infoApply.geoDistance > 1000"#}
                                    {#                                                          title="Distance greater than 1000km" class="my-auto align-items-baseline mx-auto d-flex">#}
                                    {#                                                            <i class="fas fa-map-marker-alt"#}
                                    {#                                                               style="color: red"></i>#}
                                    {#                                                            <p class="mb-0 mt-2 ml-2">Out of country</p>#}
                                    {#                                                        </span>#}
                                    {#                                                </div>#}
                                    {#                                            </div>#}
                                    {#                                        {% endif %}#}
                                    {#                                    </div>#}
                                    
                                    {#                                    Relevance and Distance          #}
                                </div>
                            </div>
                            <div class="col-sm-12 bg-white pb-4 rounded" v-if="infoApply.customData">
                                <div class="section-title py-4">
                                    <i class="fal fa-clipboard-user"></i>
                                    <span class="font-600 ml-2">{{ 'Additional Fields'|trans }}</span>
                                </div>
                                <div class="section-body py-4">
                                    <div class="d-flex justify-content-between mb-3">
                                        <span class="">{{ 'Desired Qualifications'|trans }}</span>
                                        <span class=""><b>{{ "Candidate's Qualifications"|trans }}</b></span>
                                    </div>
                                    <div v-if="infoApply.customData.custom">
                                        <div v-for="customData in infoApply.customData">
                                            
                                            <div class="d-flex justify-content-between mb-3" v-for="data in customData">
                                                <span class="w-50"><% data.field_lib %></span>
                                                <span class="w-50 text-right" style="word-break: break-word;"><b><% data.value_lib %></b></span>
                                            </div>
                                        </div>
                                        <hr class="my-2">
                                    </div>
                                    <div v-else>
                                        <div class="d-flex justify-content-between mb-3"  v-for="(custom, i) in infoApply.customData">
                                            <span class="w-50"><% i %></span>
                                            <span class="w-50 text-right" style="word-break: break-word;"><b><% custom %></b></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 bg-white mb-3 pb-4 rounded" v-if="infoApply.info">
                                <div class="section-title py-4">
                                    <i class="fal fa-user-graduate"></i>
                                    <span class="font-600 ml-2">{{ 'Additional Informations'|trans }}</span>
                                </div>
                                <div class="section-body">
                                    <p v-html="infoApply.info" class="p-3 bg-light"></p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12 bg-white py-2" :class="infoApply.cv !== null ? 'col-xl-9' : 'd-none' " style="width: 100%; height: auto;" >
                            <div class="text-center vh-100 mt-5" v-if="modalNoCv">
                                <div class="alert alert-warning py-3">{{ 'No more apply'|trans }}</div>
                            </div>
                            <div>
                                <iframe v-if="infoApply.linkPdf" :src="infoApply.linkPdf" frameBorder="0" marginwidth="0" marginheight="0" align="top" hspace="0" vspace="0"  style="width: 100%; height: 1000px; border: none; pointer-events: all;"></iframe>
                                <iframe v-else-if="infoApply.linkDoc" :src="infoApply.linkDoc" frameBorder="0" marginwidth="0" marginheight="0" align="top" hspace="0" vspace="0" style="width: 100%; height: 1000px;border: none; pointer-events: all;"></iframe>
                                <div class="modal-footer border-0 d-flex">
                                    <div class="col-sm-12 text-center fixed-bottom bg-white py-3 border-top">
                                        <button class="btn btn-info d-inline py-2 px-4 rounded-30">
                                            <i class="far fa-arrow-to-bottom"></i>
                                            <a :href="infoApply.download" class="ml-1 text-white text-decoration-none" :download="infoApply.name + '_cv'">{{ 'Télécharger le cv'|trans }}</a>
                                        </button>
                                        <button type="button" class="btn btn-secondary float-right" data-dismiss="modal">{{ 'Close'|trans }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        {#  Choice Export File Type   #}
        
        <div class="modal fade" id="export_file_type" tabindex="-1" role="dialog" aria-labelledby="exportFile" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header py-4 d-block border-0 bg-light">
                        <button type="button" class="close d-none" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title text-center border-0" id="myModalLabel">
                            <i class="far fa-arrow-to-bottom"></i>
                            <span>{{ 'Export applies (CSV or ZIP)'|trans }}</span>
                        </h4>
                    </div>
                    <div class="modal-body justify-content-center p-5 d-flex">
                        <form id="exportDataForm" method="POST" action="{{ path('ats_export_applies') }}">
                            <input type="hidden" name="export-start-date" :value="formattedSelectedDate.start">
                            <input type="hidden" name="export-end-date" :value="formattedSelectedDate.end">
                            <input type="hidden" name="export-id-daf" value="{{ dafInstance.id }}">
                            <input type="hidden" name="typeExport" :value="appliesType">
                            <input type="hidden" name="typeExport" :value="appliesType">
                            <input type="hidden" :value="JSON.stringify(advancedSearch)" name="advancedSearchExport">
                            <input v-if="checkedApplies.length > 0 && !exportAll" type="hidden" :value="checkedApplies.join(',')" name="selectedApplies">
                            <label class="radio radio-inline mr-5 d-flex">
                                <input type="radio" name="exportFile" id="export_zip_file" value="zipCv" class="radio-export-file" @click="exportData" v-model="fileTypeSelected"> {{ 'Zip Archive File'|trans }}
                            </label>
                            
                            <label class="radio radio-inline d-flex">
                                <input type="radio" name="exportFile" id="export_csv_file" value="csvCv" class="radio-export-file" @click="exportData" v-model="fileTypeSelected"> {{ 'CSV File'|trans }}
                            </label>
                        </form>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="reset" class="btn btn-light" data-dismiss="modal" @click="resetFileSelected()">{{ 'Close'|trans }}</button>
                    </div>
                </div>
            </div>
        </div>
        
        {#    Modal confirm Delete  #}
        
        <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header text-center border-0 py-4 d-block bg-light">
                        <button type="button" class="close d-none" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title text-danger" id="myModalLabel">
                            <i class="far fa-trash-alt"></i>
                            <span>{{ 'Confirm Archive'|trans }}</span>
                        </h4>
                    </div>
                    
                    <div class="modal-body text-center py-5">
                        <p>{{ 'You are about to archive'|trans }} <b><% checkedApplies.length %></b> {{ "applies's"|trans }}</p>
                        <p>Are you sure ?</p>
                    </div>
                    
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ 'Cancel'|trans }}</button>
                        <a class="btn btn-danger text-white btn-action">{{ 'Archive'|trans }}</a>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="modal fade" id="unqualifiedToQualified" tabindex="-1" role="dialog" aria-labelledby="UtoQ" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content pb-2 pt-3 px-2 border-0 shadow-1">
                    <div class="modal-header py-3 pb-4 border-0">
                        <h5 class="modal-title mx-auto" id="qualif"><% applyStatus.name %></h5>
                    </div>
                    
                    <div class="modal-body text-center py-5">
                        <p>{{ 'This candidate has been classified into unqualified apply.'|trans }}</p>
                        <p>{{ 'Are you sure you want to change it into qualified apply?'|trans }}</p>
                        <p>{{ 'Give us one or more reason(s)'|trans }}</p>
                        <div v-for="(qualif, i) in dafReasons" v-if="qualif.qualified==applyStatusIdLabel.qualified">
                            <div class="checkbox">
                                <checkbox v-model="selectedReasons" :val="qualif" :id="'qualifReason'+i"></checkbox>
                                <label class="cbx" :for="'qualifReason'+i">
                                       <span>
                                             <svg width="10px" height="10px" viewbox="0 0 10 10">
                                                   <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                             </svg>
                                       </span>
                                    <span class="ml-2"><% qualif.reason %></span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <h6 class="d-block mt-4 mb-2"><strong>{{ 'Need to add something ?'|trans }}</strong></h6>
                            <textarea class="explain-reasons form-group w-100 rounded-2 border" v-model="explainReasons"></textarea>
                        </div>
                    </div>
                    
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-light" data-dismiss="modal" @click="resetCheckedReasons">{{ 'Cancel'|trans }}</button>
                        <button type="button" class="btn btn-primary btn-action" id="applyIsUnqualified"
                                @click="qualifApply(applyStatus.id, 'qualified', applyStatus.idDafInstance, applyStatus.name, applyStatus.email, selectedReasons, explainReasons, '#unqualifiedToQualified')">
                            {{ 'Validate'|trans }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="modal fade modal-bg" id="unqualifiedModal" tabindex="-1" role="dialog" aria-labelledby="unqualified">
            <div class="modal-dialog" role="document">
                <div class="modal-content pb-2 pt-3 px-2 border-0 shadow-1">
                    <div class="modal-header py-3 pb-4 border-0">
                        
                        <h5 v-if="groupStatusesTrigger===true" class="text-center">
                            <span class="text-center">{{ 'Select Reasons for'|trans }} <b> <% groupChangeStatuses.length %></b>  {{ 'Applies selected'|trans }} </span>
                        </h5>
                        
                        <h5 class="modal-title mx-auto" id="qualif" v-if="groupStatusesTrigger===false"><% applyStatus.name %></h5>
                    </div>
                    <div class="alert alert-warning text-left" v-if="!isMail"><p>{{ 'No email will be sent.'|trans }}</p>
                        <p>{{ 'You have not yet configured a message to send to unqualified candidates.'|trans }}</p></div>
                    <div class="modal-body  py-5">
                        
                        <h5 class="text-center mb-5" v-if="groupStatusesTrigger===false">{{ 'Are you sure you want to unqualify this apply?'|trans }}</h5>
                        
                        <h6 class="d-block mt-4 mb-4"><strong>{{ 'Give us one or more reason(s)'|trans }}</strong></h6>
                        <div v-for="(unqualif, i) in dafReasons" v-if="unqualif.qualified==applyStatusIdLabel.unqualified" class="text-left">
                            <div class="checkbox">
                                <checkbox v-model="selectedReasons" :val="unqualif" :id="'unqualifReason'+i"></checkbox>
                                <label class="cbx" :for="'unqualifReason'+i">
                                       <span>
                                             <svg width="10px" height="10px" viewbox="0 0 10 10">
                                                   <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                             </svg>
                                       </span>
                                    <span class="ml-2"><% unqualif.reason %></span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <h6 class="d-block mt-4 mb-2"><strong>{{ 'Need to add something ?'|trans }}</strong></h6>
                            <textarea class="explain-reasons form-group w-100 rounded-2 border" v-model="explainReasons"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-light" data-dismiss="modal" @click="resetCheckedReasons(applyStatus.id), resetStatusChange(applyStatus.id)">{{ 'Cancel'|trans }}</button>
                        
                        <button type="button" v-if="groupStatusesTrigger===true"
                                class="btn btn-primary btn-action"
                                @click="GroupQualifApply('unqualified', statusOneApply.idDafInstance, statusOneApply.name, statusOneApply.email, selectedReasons, explainReasons, '#unqualifiedModal')">
                            {{ 'Validate'|trans }}
                        </button>
                        
                        <button type="button" class="btn btn-primary btn-action" v-if="groupStatusesTrigger===false"
                                @click="qualifApply(applyStatus.id, 'unqualified', applyStatus.idDafInstance, applyStatus.name, applyStatus.email, selectedReasons, explainReasons, '#unqualifiedModal')">
                            {{ 'Validate'|trans }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="modal fade modal-bg" id="toQualifiedModal" tabindex="-1" role="dialog" aria-labelledby="toqualify">
            <div class="modal-dialog" role="document">
                <div class="modal-content pb-2 pt-3 px-2 border-0 shadow-1">
                    <div class="modal-header py-3 pb-4 border-0">
                        
                        <h5 v-if="groupStatusesTrigger===true" class="text-center">
                            <span class="text-center">{{ 'Select Reasons for'|trans }} <b> <% groupChangeStatuses.length  %></b>  {{ 'Applies selected'|trans }} </span>
                        </h5>
                        <h5 class="modal-title mx-auto" id="toQualify" v-if="groupStatusesTrigger===false"><% applyStatus.name %></h5>
                    
                    </div>
                    <div class="modal-body text-center py-5">
                        <h6><strong>{{ 'Are you sure you want to cancel this apply?'|trans }}</strong></h6>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-light" data-dismiss="modal" @click="resetCheckedReasons(applyStatus.id), resetStatusChange(applyStatus.id)">Cancel</button>
                        
                        
                        <button type="button" v-if="groupStatusesTrigger===true"
                                class="btn btn-primary btn-action"
                                @click="GroupQualifApply('to qualify', statusOneApply.idDafInstance, statusOneApply.name, statusOneApply.email, selectedReasons, explainReasons, '#toQualifiedModal')">
                            {{ 'Validate'|trans }}
                        </button>
                        <button type="button" v-if="groupStatusesTrigger===false"
                                class="btn btn-primary btn-action"
                                @click="qualifApply(applyStatus.id, 'to qualify', applyStatus.idDafInstance, applyStatus.name, applyStatus.email, selectedReasons, explainReasons, '#toQualifiedModal')">
                            {{ 'Validate'|trans }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="modal fade" id="hiredModal" tabindex="-1" role="dialog" aria-labelledby="hired">
            <div class="modal-dialog" role="document">
                <div class="modal-content pb-2 pt-3 px-2 border-0 shadow-1">
                    <div class="modal-header py-3 pb-4 border-0">
                        
                        <h5 v-if="groupStatusesTrigger===true" class="text-center">
                            <span class="text-center">{{ 'Select Reasons for'|trans }} <b> <% groupChangeStatuses.length  %></b>  {{ 'Applies selected'|trans }} </span>
                        </h5>
                        <h5 class="modal-title mx-auto" id="hired" v-if="groupStatusesTrigger===false"><% applyStatus.name %></h5>
                    
                    </div>
                    <div class="loader" v-if="loadingchangeStatus === 'true'">
                    </div>
                    <div class="modal-body text-center pt-5 pb-2" v-else>
                        <h5 class="text-center mb-5" v-if="groupStatusesTrigger===false"><strong>{{ 'Are you sure you want to change it into hired apply?'|trans}}</strong></h5>
                        {#                            <img src="{{ asset('Dashboard/img/status_hired.png') }}" alt="" class="img-fluid">#}
                        <div class="form-group mt-5">
                            <h6 class="d-block mt-4 mb-2 text-left">{{ 'Need to add something ?'|trans }}</h6>
                            <textarea class="explain-reasons form-group w-100 rounded-2 border" v-model="explainReasons"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-light" data-dismiss="modal" @click="resetCheckedReasons(applyStatus.id), resetStatusChange(applyStatus.id)" :disabled="loadingchangeStatus === 'true'">{{ 'Cancel'|trans }}</button>
                        
                        <button type="button" v-if="groupStatusesTrigger===true"
                                class="btn btn-primary btn-action"
                                @click="GroupQualifApply('hired', statusOneApply.idDafInstance, statusOneApply.name, statusOneApply.email, selectedReasons, explainReasons, '#hiredModal')">
                            {{ 'Validate'|trans }}
                        </button>
                        <button type="button" class="btn btn-primary btn-action" v-if="groupStatusesTrigger===false"
                                @click="qualifApply(applyStatus.id, 'hired', applyStatus.idDafInstance, applyStatus.name, applyStatus.email, selectedReasons, explainReasons, '#hiredModal')"
                                :disabled="loadingchangeStatus === 'true'">
                            {{ 'Validate'|trans }}
                        </button>
                    
                    
                    </div>
                </div>
            </div>
        </div>
        
        <div class="modal fade modal-bg"  id="qualifModal" tabindex="-1" role="dialog" aria-labelledby="qualif">
            <div class="modal-dialog" role="document">
                <div class="modal-content pb-2 pt-3 px-2 border-0 shadow-1">
                    <div class="modal-header py-3 pb-4 border-0">
                        
                        <h5 v-if="groupStatusesTrigger===true" class="text-center">
                            <span class="text-center">{{ 'Select Reasons for'|trans }} <b> <% groupChangeStatuses.length  %></b>  {{ 'Applies selected'|trans }} </span>
                        </h5>
                        
                        <h5 class="modal-title mx-auto" id="qualif" v-if="groupStatusesTrigger === false"><% applyStatus.name %></h5>
                    </div>
                    
                    <div class="loader" v-if="loadingchangeStatus === 'true'">
                    </div>
                    <div class="modal-body modal-qualif" v-else>
                        <h6 class="d-block mt-4 mb-4"><strong>{{ 'Give us one or more reason(s)'|trans }}</strong></h6>
                        <div v-for="(qualif, i) in dafReasons" v-if="qualif.qualified==applyStatusIdLabel.qualified">
                            <div class="checkbox">
                                <checkbox v-model="selectedReasons" :val="qualif" :id="'qualifReason'+i"></checkbox>
                                <label class="cbx" :for="'qualifReason'+i">
                                       <span>
                                             <svg width="10px" height="10px" viewbox="0 0 10 10">
                                                   <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                             </svg>
                                       </span>
                                    <span class="ml-2"><% qualif.reason %></span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <h6 class="d-block mt-4 mb-2"><strong>{{ 'Need to add something ?'|trans }}</strong></h6>
                            <textarea class="explain-reasons form-group w-100 rounded-2 border" v-model="explainReasons"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-light" data-dismiss="modal" @click="resetCheckedReasons, resetStatusChange(applyStatus.id)" :disabled="loadingchangeStatus === 'true'">{{ 'Cancel'|trans }}</button>
                        
                        <button type="button" v-if="groupStatusesTrigger===true"
                                class="btn btn-primary btn-action"
                                @click="GroupQualifApply('qualified', statusOneApply.idDafInstance, statusOneApply.name, statusOneApply.email, selectedReasons, explainReasons, '#qualifModal')">
                            {{ 'Validate'|trans }}
                        </button>
                        
                        <button type="button" class="btn btn-primary btn-action" id="applyIsUnqualified" v-if="groupStatusesTrigger===false"
                                @click="qualifApply(applyStatus.id, 'qualified', applyStatus.idDafInstance, applyStatus.name, applyStatus.email, selectedReasons, explainReasons, '#qualifModal')"
                                :disabled="loadingchangeStatus === 'true'">
                            {{ 'Validate'|trans }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        {# start of modal #}
        
        <div class="modal fade eighty-percent" id="otherApplies" tabindex="-1" role="dialog" aria-labelledby="OP">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header d-block border-0 bg-white mb-2 mt-4">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                        <h3 class="modal-title lead">
                            <i class="fad fa-user-circle mr-2"></i>
                            <% oneApply.name %>
                        
                        </h3>
                    </div>
                    <div class="modal-body modal-other-apply bg-light px-5 pt-5">
                        <div v-for="(apply, j) in appliesAllApply" >
                            <div v-if="oneApply.email == apply.email && (oneApply.id != apply.id || apply.jobName === null)" class="col-xs-12 row">
                                <div class="col-sm-12 mb-3 card border-0 bg-white p-3" >
                                    <div v-if="apply.jobName" class="py-3">
                                        <div class="col-12 mb-4">
                                            <a :href="apply.jobLink" target="_blank" class="font-600">
                                                <% apply.jobName %>
                                            </a>
                                        </div>
                                        <div v-if="apply.city" class="col-12"><% apply.city %></div>
                                        <div v-else-if="apply.state" class="col-12"><% apply.state %></div>
                                        <div v-else class="col-12"><% apply.region %></div>
                                        <div class=" font-italic col-12 mt-2"> posted <% apply.date %></div>
                                    </div>
                                    <span v-else class="text-center">
                                            <b>{{ 'Archived job'|trans }}</b>
                                        </span>
                                </div>
                            </div>
                        </div>
                    
                    </div>
                    <div class="modal-footer border-0 bg-light">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ 'Close'|trans }}</button>
                    </div>
                </div>
            </div>
        </div>
        
        {# End of modal #}
        
        <div class="modal fade" id="historicChangeStatus" tabindex="-1" role="dialog" aria-labelledby="HM">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header d-block border-0 bg-white mb-2 mt-4 px-5">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                        <h3 class="modal-title lead">
                            <i class="fal fa-clock mr-2"></i>
                            {{ 'Status change history'|trans }}
                        </h3>
                    </div>
                    <div class="modal-body modal-other-apply bg-light px-5 pt-5">
                        <div class="col-sm-12">
                            <table class="table-bordered table table-striped table-hover">
                                <tr>
                                    <td class="bg-white">{{ 'User'|trans }}</td>
                                    <td class="bg-white">{{ 'Date'|trans }}</td>
                                    <td class="bg-white">{{ 'Qualification'|trans }}</td>
                                    <td class="bg-white">{{ 'Reasons'|trans }}</td>
                                    <td class="bg-white">{{ 'More Infos'|trans }}</td>
                                </tr>
                                <tr v-for="reason in reasons">
                                    <td><% reason.username %></td>
                                    <td><% reason.reasonDate %></td>
                                    <td v-if="reason.qualif == null">{{ 'To Qualify'|trans }}</td>
                                    <td v-if="reason.qualif == 0">{{ 'Unqualified'|trans }}</td>
                                    <td v-if="reason.qualif == 1">{{ 'Qualified'|trans }}</td>
                                    <td v-if="reason.qualif == 2">{{ 'Hired'|trans }}</td>
                                    <td>
                                        <ul v-for="one in reason.reasons">
                                            <li><% one %></li>
                                        </ul>
                                    </td>
                                    <td><% reason.explainReasons %></td>
                                </tr>
                            </table>
                            <template v-if="reasons.length == 0">
                                <div class="alert alert-info text-center">{{ 'No status change yet'|trans }}</div>
                            </template>
                        </div>
                    
                    </div>
                    <div class="modal-footer border-0 bg-light px-5">
                        <button type="button" class="btn btn-secondary badge-pill px-4" data-dismiss="modal">{{ 'Close'|trans }}</button>
                    </div>
                </div>
            </div>
        </div>
        
        {# Modal share Applies #}
        <div class="modal fade" id="shareApplies" tabindex="-1" role="dialog" aria-labelledby="SA" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header d-block border-0 bg-light mb-2 py-4">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title text-center border-0" id="myModalLabel">
                            <i class="fal fa-paper-plane"></i>
                            <span>{{ 'Share applies by mail'|trans }}</span>
                        </h4>
                    </div>
                    <div class="modal-body px-5 pt-5">
                        <h3 class="modal-title lead  pb-5">{{ 'Sharing'|trans }} <span class="font-700"><% checkedApplies.length %></span> {{ 'selected applies'|trans }}</h3>
                        <span class="mb-1 d-block font-700">{{ 'Fill email(s)'|trans }}</span>
                        <template>
                            <tags-input v-model="sharedEmails" placeholder="share@email.com (10 max.)" max-items="10"></tags-input>
                        
                        </template>
                        <div class="d-flex mt-3">
                            <div class="checkbox my-auto">
                                <input class="inp-cbx" id="sendme" type="checkbox"
                                       style="display: none;" value="sendme"
                                       v-model="sendme" v-on:click="sendTome"/>
                                <label class="cbx" for="sendme">
                                    <span>
                                        <svg width="10px" height="10px" viewbox="0 0 10 10">
                                             <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                        </svg>
                                    </span>
                                </label>
                            </div>
                            <span class="ml-2">{{ 'send me a copy'|trans }}</span>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ 'Close'|trans }}</button>
                        <button type="button" class="btn btn-primary rounded-30 px-4 btn-action" @click="shareAppliesAction">{{ 'Share'|trans }}</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="modal fade" id="statusGroup" tabindex="-1" role="dialog" aria-labelledby="SG">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header d-block border-0 bg-light mb-2 py-4">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title text-center border-0" id="myModalLabel">
                            <i class="fal fa-paper-plane"></i>
                            <span>{{ 'Change Status'|trans }}</span>
                        </h4>
                    </div>
                    <div class="modal-body px-5 pt-5">
                        <div class="modal-title lead  pb-5">
                            <span class="font-weight-bold"> <% groupChangeStatuses.length  %> </span> {{ 'Applies selected'|trans }}
                        </div>
                        <div class="mt-2 row border-bottom pb-2">
                            <div class="col-1">N°</div>
                            <div class="col-5"> <b>{{ 'Name'|trans }}</b> </div>
                            <div class="col-6"> <b>{{ 'Job title'|trans }}</b> </div>
                        </div>
                        <div class="mt-2 row border-bottom py-1" v-for="(statusApply, index) in groupChangeStatuses">
                            <div class="col-1"><b><% index + 1 %>.</b></div>
                            <div class="col-5"><% statusApply.name %></div>
                            <div class="col-6"><% statusApply.jobName %></div>
                        </div>
                    
                    </div>
                    <div class="row">
                        <div class="col-6"></div>
                        <div class="col-6 px-0">
                            <div class="px-0 d-flex mt-4" @click="selectGroupStatus">
                                <span class="pr-3 font-weight-bold font-italic">{{ 'Select Status'|trans }}</span>
                                
                                <div class="statut-option">

                                  <span v-if="statusOneApply.hired == 1" class="chips hired"
                                        v-on:click="changeOption('group-status')"
                                        :id="'modal-statut-' + statusOneApply.id">
                                    <span :id="'modal-statut-text-' + statusOneApply.id">{{ 'hired'|trans }}</span>
                                    <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                  </span>
                                    
                                    <span v-if="statusOneApply.qualified == 1" class="chips qualified"
                                          v-on:click="changeOption('group-status')"
                                          :id="'modal-statut-' + statusOneApply.id">
                                     <span :id="'modal-statut-text-' + statusOneApply.id">{{ 'qualified'|trans }}</span>
                                     <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                  </span>
                                    
                                    <span v-if="statusOneApply.unqualified == 1" class="chips unqualified"
                                          v-on:click="changeOption('group-status')"
                                          :id="'modal-statut-' + statusOneApply.id">
                                      <span :id="'modal-statut-text-' + statusOneApply.id">{{ 'unqualified'|trans }}</span>
                                      <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                  </span>
                                    
                                    <span v-if="statusOneApply.toQualify == 1" class="chips toqualify chips_bordered"
                                          v-on:click="changeOption('group-status')"
                                          :id="'modal-statut-' + statusOneApply.id">
                                       <span :id="'modal-statut-text-' + statusOneApply.id">{{ 'to qualify'|trans }}</span>
                                       <i class="ml-2 fal fa-chevron-down fa-1x"></i>
                                 </span>
                                
                                
                                </div>
                                
                                <ul class="dropdown-select-menu list-unstyled rounded-2" style="display: none" :class="'dropdown-' + 'group-status'">
                                    <li @click="modalReasonToqualify(statusOneApply.id, 'modal-statut-')" class="font-600" v-if="statusOneApply.toQualify != 1">{{ 'to qualify'|trans }}</li>
                                    <li @click="modalReasonQualified(statusOneApply.id, 'modal-statut-')" class="font-600" v-if="statusOneApply.qualified != 1">{{ 'qualified'|trans }}</li>
                                    <li @click="modalReasonUnqualified(statusOneApply.id, 'modal-statut-')" class="font-600" v-if="statusOneApply.unqualified != 1">{{ 'unqualified'|trans }}</li>
                                    <li @click="modalReasonhired(statusOneApply.id, 'modal-statut-')" class="font-600" v-if="statusOneApply.hired != 1">{{ 'hired'|trans}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="modal-footer border-0 d-flex justify-content-between">
                        <button @click="groupStatusesTrigger = false" type="button" class="btn btn-light text-right" data-dismiss="modal">{{ 'Close'|trans }}</button>
                    </div>
                
                </div>
            </div>
        </div>
        
        
        {#          Modal kanban for Job #}
        {#        {% include 'modalsJob.html.twig' %}#}
        {{ include('Ats/Applies/modals_job.html.twig') }}
        
        {#    Fin Modals #}
    
    </div>
    
    {#     fin id de l'instance Vue          #}
    
    {{ include('Ats/Applies/scriptjs_applies.html.twig') }}

{% endblock %}