{###################  MODAL KANBAN ####################}
<div class="modal fade modal-kanban-jobs px-2" id="modal-kanban-jobs" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1049;">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content py-4 px-5 border-0">
            <button type="button" class="close text-right mb-4 position-absolute" data-dismiss="modal" style="right: 30px;">&times;</button>
            <div class="modal-header row">
                <div class="col-sm-4">
                    <div class="lead">
                        <% kanbanSelectedJob.title %>
                    </div>
                </div>
                <div class="col-sm-4" v-show="kanbanSelectedJob.location">
                    <div class="lead text-center">{{ 'Location'|trans }}
                        <span class="ml-3 font-600 text-primary">
                             <% kanbanSelectedJob.location %>
                        </span>
                    </div>
                </div>
                <div class="col-sm-4"></div>
            </div>
            <div class="content bg-light overflow-auto">
                <div class="content-columns px-5 row">
                    <div class="draggable-content d-flex flex-row">
                        <div class="column-draggable col-md-5 bg-white px-4 pb-3 my-5 mr-3 rounded-2" v-for="(index,item) in applyStatusIdLabel">
                            <div v-if="item === 'Inbox'">
                                <div class="title-drag-column py-4 d-flex justify-content-between">
                                    <span class="chips inbox chips_bordered"> {{ 'Inbox'|trans }}</span>
                                    <span><b><% inboxAppliesByJob.length %></b> <small>{{ 'applies'|trans }}</small></span>
                                </div>
                                <div class="body-drag-column p-3 rounded-2">
                                    <draggable :list="inboxAppliesByJob" ghost-class="moving-card" :animation="200" group="appliesByJob" tag="div" @end="checkMove" style="min-height: 150vh;" :data-statut="'Inbox'">
                                        <div class="card-draggable p-4 mb-2 bg-white" v-for="(apply, key) in inboxAppliesByJob" :key="apply.id" :data-apply-id="apply.id">
                                            <div class="col-sm-12 my-auto user-profile p-0 d-flex justify-content-between align-items-baseline">
                                                <div class="font-600 mr-2 my-auto">
                                                    {% if is_granted('ROLE_BACKEND') %}
                                                        <span class="1"><% apply.fullName %> (<% apply.id%>)</span>
                                                    {% else %}
                                                        <span class="2"><% apply.fullName %></span>
                                                    {% endif %}
                                                    <span class="badge badge-job d-table"><% timeAgo(apply.date) %></span>
                                                </div>
                                                <span class="chips inbox chips_bordered"> {{ 'Inbox'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3" >
                                                <template v-if="apply.score && apply.score.quiz">
                                                    <score-picto :apply="apply" picto-name="kanbanScore" @open-modal="showModalAppliesScore"></score-picto>
                                                </template>
                                                <div @click="showHistory(apply)" v-if="apply.reasons">
                                                    <i class="fal fa-hourglass-half mr-2 d-block my-auto"></i>
                                                    <span class="text-underline">{{ 'history'|trans }}</span>
                                                </div>
                                                <span class="cv ml-auto text-underline small font-700" @click="showModalCandidateCv(apply.id, key, 'fromKanban')">{{ 'Show resume'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3 text-secondary">
                                                <div class="col-sm-12 px-0">
                                                    <ul class="list-unstyled">
                                                        <li class="mb-1" v-if="apply.phone">
                                                            <i class="fal fa-phone-alt"></i>
                                                            <span class="ml-2"> <span><% apply.phone %></span></span>
                                                        </li>
                                                        <li class="d-flex flex-row mb-1" v-if="apply.email">
                                                            <i class="fal fa-envelope mr-2 my-auto"></i>
                                                            <span class="ml-2 text-break"> <span><% apply.email %></span></span>
                                                        </li>
                                                        <li class="d-flex flex-row" v-if="apply.data">
                                                            <i class="fal fa-map-marker-alt mr-2 my-auto"></i>
                                                            <span class="ml-2"><% apply.data %></span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </draggable>
                                </div>
                            </div>
                            <div v-if="item === 'In process'">
                                <div class="title-drag-column py-4 d-flex justify-content-between">
                                    <span class="chips inProcess">{{ 'In Process'|trans }}</span>
                                    <span><b><% inProcessAppliesByJob.length %></b> <small>{{ 'In Process'|trans }}</small></span>
                                </div>
                                <div class="body-drag-column p-3 rounded-2" >
                                    <draggable :list="inProcessAppliesByJob" ghost-class="moving-card" :animation="200" group="appliesByJob" tag="div" @end="checkMove"  style="min-height: 150vh;" :data-statut="'In process'">
                                        <div class="card-draggable p-4 mb-2 bg-white" v-for="(apply, key) in inProcessAppliesByJob" :key="apply.id" :data-apply-id="apply.id">
                                            <div class="col-sm-12 my-auto user-profile p-0 d-flex justify-content-between align-items-baseline">
                                                <div class="font-600 mr-2 my-auto w-50">
                                                    {% if is_granted('ROLE_BACKEND') %}
                                                        <span class="1"><% apply.fullName %> (<% apply.id%>)</span>
                                                    {% else %}
                                                        <span class="2"><% apply.fullName %></span>
                                                    {% endif %}
                                                    <span class="badge badge-job d-table"><% timeAgo(apply.date) %></span>
                                                </div>
                                                <span class="chips inProcess chips_bordered">{{ 'In process'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3">
                                                <template v-if="apply.score && apply.score.quiz">
                                                    <score-picto :apply="apply" picto-name="kanbanScore" @open-modal="showModalAppliesScore"></score-picto>
                                                </template>
                                                <div class="d-flex" @click="showHistory(apply)" v-if="apply.reasons">
                                                    <i class="fal fa-hourglass-half mr-2 d-block my-auto"></i>
                                                    <span class="text-underline">{{ 'history'|trans }}</span>
                                                </div>
                                                <span class="cv ml-auto text-underline small font-700 pl-2 py-2" @click="showModalCandidateCv(apply.id, key, 'fromKanban')">{{ 'Show resume'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3 text-secondary">
                                                <div class="col-sm-12 px-0">
                                                    <ul class="list-unstyled">
                                                        <li class="mb-1" v-if="apply.phone">
                                                            <i class="fal fa-phone-alt"></i>
                                                            <span class="ml-2"><% apply.phone %></span>
                                                        </li>
                                                        <li class="d-flex flex-row mb-1" v-if="apply.email">
                                                            <i class="fal fa-envelope mr-2 my-auto"></i>
                                                            <span class="ml-2 text-break"><% apply.email %></span>
                                                        </li>
                                                        <li class="d-flex flex-row" v-if="apply.data">
                                                            <i class="fal fa-map-marker-alt mr-2 my-auto"></i>
                                                            <span class="ml-2"><% apply.data %></span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </draggable>
                                </div>
                            </div>
                            <div v-if="item === 'Hired'">
                                <div class="title-drag-column py-4 d-flex justify-content-between">
                                    <span class="chips hired"> {{ 'hired'|trans }}</span>
                                    <span><b><% hiredAppliesByJob.length %></b> <small>{{ 'applies'|trans }}</small></span>
                                </div>
                                <div class="body-drag-column p-3 rounded-2">
                                    <draggable :list="hiredAppliesByJob" ghost-class="moving-card" :animation="200" group="appliesByJob" tag="div" @end="checkMove" style="min-height: 150vh;" :data-statut="'Hired'">
                                        <div class="card-draggable p-4 mb-2 bg-white hired-column" v-for="(applyHired, key) in hiredAppliesByJob" :key="applyHired.id" :data-apply-id="applyHired.id">
                                            <div class="col-sm-12 my-auto user-profile p-0 d-flex justify-content-between align-items-baseline">
                                                <div class="font-600 mr-2 my-auto w-50">
                                                    {% if is_granted('ROLE_BACKEND') %}
                                                        <span class="1"><% applyHired.fullName %> (<% applyHired.id%>)</span>
                                                    {% else %}
                                                        <span class="2"><% applyHired.fullName %></span>
                                                    {% endif %}
                                                    <span class="badge badge-job d-table"><% timeAgo(applyHired.date) %></span>
                                                </div>
                                                <span class="chips hired chips_bordered"> {{ 'hired'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3">
                                                <template v-if="apply.score && apply.score.quiz">
                                                    <score-picto :apply="apply" picto-name="kanbanScore" @open-modal="showModalAppliesScore"></score-picto>
                                                </template>
                                                <div class="d-flex" @click="showHistory(applyHired)" v-if="applyHired.reasons">
                                                    <i class="fal fa-hourglass-half mr-2 d-block my-auto"></i>
                                                    <span class="text-underline">{{ 'history'|trans }}</span>
                                                </div>
                                                <span class="cv ml-auto text-underline small font-700" @click="showModalCandidateCv(applyHired.id, key, 'fromKanban')">{{ 'Show resume'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3">
                                                <div class="col-sm-12 px-0">
                                                    <ul class="list-unstyled">
                                                        <li class="mb-1" v-if="applyHired.phone">
                                                            <i class="fal fa-phone-alt"></i>
                                                            <span class="ml-2"><% applyHired.phone %></span>
                                                        </li>
                                                        <li class="d-flex flex-row mb-1" v-if="applyHired.email">
                                                            <i class="fal fa-envelope mr-2 my-auto"></i>
                                                            <span class="ml-2 text-break"><% applyHired.email %></span>
                                                        </li>
                                                        <li class="d-flex flex-row" v-if="applyHired.data">
                                                            <i class="fal fa-map-marker-alt mr-2 my-auto"></i>
                                                            <span class="ml-2"><% applyHired.data %></span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </draggable>
                                </div>
                            </div>
                            <div v-if="item === 'Qualified'">
                                <div class="title-drag-column py-4 d-flex justify-content-between">
                                    <span class="chips qualified"> {{ 'Qualified'|trans }}</span>
                                    <span><b><% qualifiedAppliesByJob.length %></b> <small>{{ 'applies'|trans }}</small></span>
                                </div>
                                <div class="body-drag-column p-3 rounded-2">
                                    <draggable  :list="qualifiedAppliesByJob" ghost-class="moving-card" :animation="200" group="appliesByJob" tag="div" @end="checkMove"  style="min-height: 150vh;" :data-statut="'Qualified'">
                                        <div class="card-draggable p-4 mb-2 bg-white" v-for="(apply, key) in qualifiedAppliesByJob" :key="apply.id" :data-apply-id="apply.id">
                                            <div class="col-sm-12 my-auto user-profile p-0 d-flex justify-content-between align-items-baseline">
                                                <div class="font-600 mr-2 my-auto w-50">
                                                    {% if is_granted('ROLE_BACKEND') %}
                                                        <span><% apply.fullName %> (<% apply.id%>)</span>
                                                    {% else %}
                                                        <span><% apply.fullName %></span>
                                                    {% endif %}
                                                    <span class="badge badge-job d-table"><% timeAgo(apply.date) %></span>
                                                </div>
                                                <span class="chips qualified chips_bordered"> {{ 'Qualified'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3">
                                                <template v-if="apply.score && apply.score.quiz">
                                                    <score-picto :apply="apply" picto-name="kanbanScore" @open-modal="showModalAppliesScore"></score-picto>
                                                </template>
                                                <div class="d-flex" @click="showHistory(apply)" v-if="apply.reasons">
                                                    <i class="fal fa-hourglass-half mr-2 d-block my-auto"></i>
                                                    <span class="text-underline">{{ 'history'|trans }}</span>
                                                </div>
                                                <span class="cv ml-auto text-underline small font-700" @click="showModalCandidateCv(apply.id, key, 'fromKanban')">{{ 'Show resume'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3">
                                                <div class="col-sm-12 px-0">
                                                    <ul class="list-unstyled">
                                                        <li class="mb-1" v-if="apply.phone">
                                                            <i class="fal fa-phone-alt"></i>
                                                            <span class="ml-2"><% apply.phone %></span>
                                                        </li>
                                                        <li class="d-flex flex-row mb-1" v-if="apply.email">
                                                            <i class="fal fa-envelope mr-2 my-auto mb-1"></i>
                                                            <span class="ml-2"><% apply.email %></span>
                                                        </li>
                                                        <li class="d-flex flex-row" v-if="apply.data">
                                                            <i class="fal fa-map-marker-alt mr-2 my-auto"></i>
                                                            <span class="ml-2"><% apply.data %></span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </draggable>
                                </div>
                            </div>
                            <div v-if="item === 'Rejected'">
                                <div class="title-drag-column py-4 d-flex justify-content-between">
                                    <span class="chips rejected"> {{ 'Rejected'|trans }}</span>
                                    <span><b><% rejectedAppliesByJob.length %></b> <small>{{ 'applies'|trans }}</small></span>
                                </div>
                                <div class="body-drag-column p-3 rounded-2">
                                    <draggable  :list="rejectedAppliesByJob" ghost-class="moving-card" :animation="200" group="appliesByJob" tag="div" @end="checkMove"  style="min-height: 150vh;" :data-statut="'Rejected'">
                                        <div class="card-draggable p-4 mb-2 bg-white  unqualified-column" v-for="(apply, key) in rejectedAppliesByJob" :key="apply.id" :data-apply-id="apply.id">
                                            <div class="col-sm-12 my-auto user-profile p-0 d-flex justify-content-between align-items-baseline">
                                                <div class="font-600 mr-2 my-auto w-50">
                                                    {% if is_granted('ROLE_BACKEND') %}
                                                        <span><% apply.fullName %> (<% apply.id%>)</span>
                                                    {% else %}
                                                        <span><% apply.fullName %></span>
                                                    {% endif %}
                                                    <span class="badge badge-job d-table"><% timeAgo(apply.date) %></span>
                                                </div>
                                                <span class="chips rejected chips_bordered"> {{ 'Rejected'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3">
                                                <template v-if="apply.score && apply.score.quiz">
                                                    <score-picto :apply="apply" picto-name="kanbanScore" @open-modal="showModalAppliesScore"></score-picto>
                                                </template>
                                                <div class="d-flex" @click="showHistory(apply)" v-if="apply.reasons">
                                                    <i class="fal fa-hourglass-half mr-2 d-block my-auto"></i>
                                                    <span class="text-underline">{{ 'history'|trans }}</span>
                                                </div>
                                                <span class="cv ml-auto text-underline small font-700" @click="showModalCandidateCv(apply.id, key, 'fromKanban')">{{ 'Show resume'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3">
                                                <div class="col-sm-12 px-0">
                                                    <ul class="list-unstyled">
                                                        <li class="mb-1" v-if="apply.phone">
                                                            <i class="fal fa-phone-alt"></i>
                                                            <span class="ml-2"><% apply.phone %></span>
                                                        </li>
                                                        <li class="d-flex flex-row mb-1" v-if="apply.email">
                                                            <i class="fal fa-envelope mr-2 my-auto mb-1"></i>
                                                            <span class="ml-2"><% apply.email %></span>
                                                        </li>
                                                        <li class="d-flex flex-row" v-if="apply.data">
                                                            <i class="fal fa-map-marker-alt mr-2 my-auto"></i>
                                                            <span class="ml-2"><% apply.data %></span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </draggable>
                                </div>
                            </div>
                            <div v-if="item === 'Unclassified'">
                                <div class="title-drag-column py-4 d-flex justify-content-between">
                                    <span class="chips unclassified"> {{ 'Unclassified'|trans }}</span>
                                    <span><b><% rejectedAppliesByJob.length %></b> <small>{{ 'applies'|trans }}</small></span>
                                </div>
                                <div class="body-drag-column p-3 rounded-2">
                                    <draggable  :list="unclassifiedAppliesByJob" ghost-class="moving-card" :animation="200" group="appliesByJob" tag="div" @end="checkMove"  style="min-height: 150vh;" :data-statut="'Unclassified'">
                                        <div class="card-draggable p-4 mb-2 bg-white" v-for="(apply, key) in unclassifiedAppliesByJob" :key="apply.id" :data-apply-id="apply.id">
                                            <div class="col-sm-12 my-auto user-profile p-0 d-flex justify-content-between align-items-baseline">
                                                <div class="font-600 mr-2 my-auto w-50">
                                                    {% if is_granted('ROLE_BACKEND') %}
                                                        <span class="1"><% apply.fullName %> (<% apply.id%>)</span>
                                                    {% else %}
                                                        <span class="2"><% apply.fullName %></span>
                                                    {% endif %}
                                                    <span class="badge badge-job d-table"><% timeAgo(apply.date) %></span>
                                                </div>
                                                <span class="chips unclassified chips_bordered"> {{ 'Unclassified'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3">
                                                <template v-if="apply.score && apply.score.quiz">
                                                    <score-picto :apply="apply" picto-name="kanbanScore" @open-modal="showModalAppliesScore"></score-picto>
                                                </template>
                                                <div class="d-flex" @click="showHistory(apply)" v-if="apply.reasons">
                                                    <i class="fal fa-hourglass-half mr-2 d-block my-auto"></i>
                                                    <span class="text-underline">{{ 'history'|trans }}</span>
                                                </div>
                                                <span class="cv ml-auto text-underline small font-700" @click="showModalCandidateCv(apply.id, key, 'fromKanban')">{{ 'Show resume'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3">
                                                <div class="col-sm-12 px-0">
                                                    <ul class="list-unstyled">
                                                        <li class="mb-1" v-if="apply.phone">
                                                            <i class="fal fa-phone-alt"></i>
                                                            <span class="ml-2"><% apply.phone %></span>
                                                        </li>
                                                        <li class="d-flex flex-row mb-1" v-if="apply.email">
                                                            <i class="fal fa-envelope mr-2 my-auto mb-1"></i>
                                                            <span class="ml-2"><% apply.email %></span>
                                                        </li>
                                                        <li class="d-flex flex-row" v-if="apply.data">
                                                            <i class="fal fa-map-marker-alt mr-2 my-auto"></i>
                                                            <span class="ml-2"><% apply.data %></span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </draggable>
                                </div>
                            </div>
                            <div v-if="item === 'Put aside'">
                                <div class="title-drag-column py-4 d-flex justify-content-between">
                                    <span class="chips putaside">{{ 'Put aside'|trans }}</span>
                                    <span><b><% putAsideAppliesByJob.length %></b> <small>{{ 'Put aside'|trans }}</small></span>
                                </div>
                                <div class="body-drag-column p-3 rounded-2" >
                                    <draggable :list="putAsideAppliesByJob" ghost-class="moving-card" :animation="200" group="appliesByJob" tag="div" @end="checkMove"  style="min-height: 150vh;" :data-statut="'Put aside'">
                                        <div class="card-draggable p-4 mb-2 bg-white" v-for="(apply, key) in putAsideAppliesByJob" :key="apply.id" :data-apply-id="apply.id">
                                            <div class="col-sm-12 my-auto user-profile p-0 d-flex justify-content-between align-items-baseline">
                                                <div class="font-600 mr-2 my-auto w-50">
                                                    {% if is_granted('ROLE_BACKEND') %}
                                                        <span class="1"><% apply.fullName %> (<% apply.id%>)</span>
                                                    {% else %}
                                                        <span class="2"><% apply.fullName %></span>
                                                    {% endif %}
                                                    <span class="badge badge-job d-table"><% timeAgo(apply.date) %></span>
                                                </div>
                                                <span class="chips putaside chips_bordered">{{ 'Put Aside'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3">
                                                <template v-if="apply.score && apply.score.quiz">
                                                    <score-picto :apply="apply" picto-name="kanbanScore" @open-modal="showModalAppliesScore"></score-picto>
                                                </template>
                                                <div class="d-flex" @click="showHistory(apply)" v-if="apply.reasons">
                                                    <i class="fal fa-hourglass-half mr-2 d-block my-auto"></i>
                                                    <span class="text-underline">{{ 'history'|trans }}</span>
                                                </div>
                                                <span class="cv ml-auto text-underline small font-700 pl-2 py-2" @click="showModalCandidateCv(apply.id, key, 'fromKanban')">{{ 'Show resume'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3 text-secondary">
                                                <div class="col-sm-12 px-0">
                                                    <ul class="list-unstyled">
                                                        <li class="mb-1" v-if="apply.phone">
                                                            <i class="fal fa-phone-alt"></i>
                                                            <span class="ml-2"><% apply.phone %></span>
                                                        </li>
                                                        <li class="d-flex flex-row mb-1" v-if="apply.email">
                                                            <i class="fal fa-envelope mr-2 my-auto"></i>
                                                            <span class="ml-2 text-break"><% apply.email %></span>
                                                        </li>
                                                        <li class="d-flex flex-row" v-if="apply.data">
                                                            <i class="fal fa-map-marker-alt mr-2 my-auto"></i>
                                                            <span class="ml-2"><% apply.data %></span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </draggable>
                                </div>
                            </div>
                            <div v-if="item === 'Contacted'">
                                <div class="title-drag-column py-4 d-flex justify-content-between">
                                    <span class="chips contacted">{{ 'Contacted'|trans }}</span>
                                    <span><b><% contactedAppliesByJob.length %></b> <small>{{ 'Contacted'|trans }}</small></span>
                                </div>
                                <div class="body-drag-column p-3 rounded-2" >
                                    <draggable :list="contactedAppliesByJob" ghost-class="moving-card" :animation="200" group="appliesByJob" tag="div" @end="checkMove"  style="min-height: 150vh;" :data-statut="'Contacted'">
                                        <div class="card-draggable p-4 mb-2 bg-white" v-for="(apply, key) in contactedAppliesByJob" :key="apply.id" :data-apply-id="apply.id">
                                            <div class="col-sm-12 my-auto user-profile p-0 d-flex justify-content-between align-items-baseline">
                                                <div class="font-600 mr-2 my-auto w-50">
                                                    {% if is_granted('ROLE_BACKEND') %}
                                                        <span class="1"><% apply.fullName %> (<% apply.id%>)</span>
                                                    {% else %}
                                                        <span class="2"><% apply.fullName %></span>
                                                    {% endif %}
                                                    <span class="badge badge-job d-table"><% timeAgo(apply.date) %></span>
                                                </div>
                                                <span class="chips contacted chips_bordered">{{ 'Contacted'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3">
                                                <template v-if="apply.score && apply.score.quiz">
                                                    <score-picto :apply="apply" picto-name="kanbanScore" @open-modal="showModalAppliesScore"></score-picto>
                                                </template>
                                                <div class="d-flex" @click="showHistory(apply)" v-if="apply.reasons">
                                                    <i class="fal fa-hourglass-half mr-2 d-block my-auto"></i>
                                                    <span class="text-underline">{{ 'history'|trans }}</span>
                                                </div>
                                                <span class="cv ml-auto text-underline small font-700 pl-2 py-2" @click="showModalCandidateCv(apply.id, key, 'fromKanban')">{{ 'Show resume'|trans }}</span>
                                            </div>
                                            <div class="d-flex mt-3 text-secondary">
                                                <div class="col-sm-12 px-0">
                                                    <ul class="list-unstyled">
                                                        <li class="mb-1" v-if="apply.phone">
                                                            <i class="fal fa-phone-alt"></i>
                                                            <span class="ml-2"><% apply.phone %></span>
                                                        </li>
                                                        <li class="d-flex flex-row mb-1" v-if="apply.email">
                                                            <i class="fal fa-envelope mr-2 my-auto"></i>
                                                            <span class="ml-2 text-break"><% apply.email %></span>
                                                        </li>
                                                        <li class="d-flex flex-row" v-if="apply.data">
                                                            <i class="fal fa-map-marker-alt mr-2 my-auto"></i>
                                                            <span class="ml-2"><% apply.data %></span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </draggable>
                                </div>
                            </div>
                        </div>
                        <div v-if="dafAtsId == null" class="column-draggable col-md-5 bg-white px-4 pb-3 my-5 mr-3 rounded-2">
                            <div class="title-drag-column py-4 d-flex justify-content-between">
                                <span class="chips unclassified"> {{ 'All'|trans }}</span>
                                <span><b><% appliesByJob.length %></b> <small>{{ 'applies'|trans }}</small></span>
                            </div>
                            <div class="body-drag-column p-3 rounded-2">
                                <draggable  :list="appliesByJob" ghost-class="moving-card" :animation="200" group="appliesByJob" tag="div" @end="checkMove"  style="min-height: 150vh;">
                                    <div class="card-draggable p-4 mb-2 bg-white" v-for="(apply, key) in appliesByJob" :key="apply.id" :data-apply-id="apply.id">
                                        <div class="col-sm-12 my-auto user-profile p-0 d-flex justify-content-between align-items-baseline">
                                            <div class="font-600 mr-2 my-auto w-50">
                                                {% if is_granted('ROLE_BACKEND') %}
                                                    <span class="1"><% apply.fullName %> (<% apply.id%>)</span>
                                                {% else %}
                                                    <span class="2"><% apply.fullName %></span>
                                                {% endif %}
                                                <span class="badge badge-job d-table"><% timeAgo(apply.date) %></span>
                                            </div>
                                            <span class="chips all chips_bordered"> {{ 'All'|trans }}</span>
                                        </div>
                                        <div class="d-flex mt-3">
                                            <template v-if="apply.score && apply.score.quiz">
                                                <score-picto :apply="apply" picto-name="kanbanScore" @open-modal="showModalAppliesScore"></score-picto>
                                            </template>
                                            <div class="d-flex" @click="showHistory(apply)" v-if="apply.reasons">
                                                <i class="fal fa-hourglass-half mr-2 d-block my-auto"></i>
                                                <span class="text-underline">{{ 'history'|trans }}</span>
                                            </div>
                                            <span class="cv ml-auto text-underline small font-700" @click="showModalCandidateCv(apply.id, key, 'fromKanban')">{{ 'Show resume'|trans }}</span>
                                        </div>
                                        <div class="d-flex mt-3">
                                            <div class="col-sm-12 px-0">
                                                <ul class="list-unstyled">
                                                    <li class="mb-1" v-if="apply.phone">
                                                        <i class="fal fa-phone-alt"></i>
                                                        <span class="ml-2"><% apply.phone %></span>
                                                    </li>
                                                    <li class="d-flex flex-row mb-1" v-if="apply.email">
                                                        <i class="fal fa-envelope mr-2 my-auto mb-1"></i>
                                                        <span class="ml-2"><% apply.email %></span>
                                                    </li>
                                                    <li class="d-flex flex-row" v-if="apply.data">
                                                        <i class="fal fa-map-marker-alt mr-2 my-auto"></i>
                                                        <span class="ml-2"><% apply.data %></span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </draggable>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer py-3 bg-white border-0">
                <button class="btn-info btn px-3 py-2 cursor-pointer" type="button" data-dismiss="modal">
                    {{ 'Close'|trans }}
                </button>
            </div>
        </div>
    </div>
</div>

{################### MODAL CV CANDIDATE ###################}
<div class="modal fade rounded-2" id="modal-cv-candidate" tabindex="-1" role="dialog" aria-labelledby="iApply" style="overflow: auto;">
    <div class="modal-dialog modal-xl bg-light rounded-2" style="margin-bottom: 5rem !important;" role="document">
        <div class="modal-content bg-light">
            <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 d-flex flex-wrap">
                    <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 flex-wrap">
                            <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 col-lg-9 d-flex justify-content-between">
                        <div class="lead w-75"><% infoApply.jobName %> -
                            <i><% infoApply.city ?? 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-25 d-flex justify-content-between" v-if="modalCandidateCvOpenedFrom === 'fromList'">
                            <div class="slide-button d-flex">
                                <span @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 @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"><% (pageLimit * (page - 1)) + 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 mb-3" :class="infoApply.cv ? 'col-xl-3' : 'col-xl-10 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" v-if="modalCandidateCvOpenedFrom === 'fromList'">
                                <div class="ml-3">
                                    <apply-qualif-selector :apply-status-id-label="applyStatusIdLabel"
                                                           :can-change-status="true"
                                                           :is-subscribe="isSubscribe"
                                                           :apply="infoApply"
                                                           @open-modal-move-candidate-reason="openModalMoveCandidateReason"
                                                           :key="infoApply.id"
                                    ></apply-qualif-selector>
                                </div>
                            </div>
                            <div class="status d-flex w-75 justify-content-end" v-else>
                                <i>status</i>
                                <div class="ml-3">
                                    <div class="statut-option">
                                         <span v-if="infoApply.hired == 1" class="chips hired cursor-default">
                                            <span>{{ 'hired'|trans }}</span>
                                        </span>
                                         <span v-if="infoApply.Inbox == 1" class="chips inbox cursor-default">
                                            <span>{{ 'Inbox'|trans }}</span>
                                        </span>
                                        <span v-if="infoApply['In process'] == 1" class="chips inProcess cursor-default">
                                            <span>{{ 'In process'|trans }}</span>
                                        </span>

                                        <span v-if="infoApply.qualified == 1" class="chips qualified cursor-default">
                                            <span>{{ 'qualified'|trans }}</span>
                                        </span>
                                        <span v-if="infoApply.rejected == 1" class="chips rejected cursor-default">
                                            <span>{{ 'Rejected'|trans }}</span>
                                        </span>
                                        <span v-if="infoApply.Qualified == 1" class="chips qualified cursor-default">
                                            <span>{{ 'Qualified'|trans }}</span>
                                        </span>
                                        <span v-if="infoApply.Unclassified == 1" class="chips unclassified cursor-default">
                                            <span>{{ 'Unclassified'|trans }}</span>
                                        </span>
                                        <span v-if="infoApply.Inbox == 1" class="chips Inbox cursor-default">
                                            <span>{{ 'Inbox'|trans }}</span>
                                        </span>
                                        <span v-if="infoApply['Put aside'] == 1" class="chips putaside cursor-default">
                                            <span>{{ 'Put aside'|trans }}</span>
                                        </span>
                                        <span v-if="infoApply['Contacted'] == 1" class="chips Contacted cursor-default">
                                            <span>{{ 'Contacted'|trans }}</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="section-body" v-if="infoApply.score">
                            <div class="d-flex justify-content-end mb-3" v-if="infoApply.score && infoApply.score.quiz">
                                <score-picto :apply="infoApply"
                                               picto-name="infoApplyScore"
                                               @open-modal="showModalAppliesScore">
                                </score-picto>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>{{ 'Name'|trans }}</span>
                                <span><b> <% infoApply.fullName %> </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>
                                <a :href="'mailto:'+infoApply.email"><b><% infoApply.email %></b></a>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>{{ 'Location'|trans }}</span>
                                <span><b><% infoApply.city ?? infoApply.state %></b></span>
                            </div>
                        </div>
                    </div>
                    <div v-if="infoApply.hasOwnProperty('custom_data')">
                        <div class="col-sm-12 bg-white pb-4 rounded" v-if="infoApply.custom_data.hasOwnProperty('custom')">
                            <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"
                                     v-for="data in infoApply.custom_data.custom" :key="data.id_question">
                                    <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>
                        </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-md-12 col-xl-9  bg-white py-2" :class="infoApply.cv ? 'col-xl-9' : 'd-none'" style="height: auto;" >
                    <div v-if="infoApply.linkCv && infoApply.linkCv !== 'denied'">
                        <iframe :src="infoApply.linkCv" frameBorder="0" marginwidth="0" marginheight="0" align="top" hspace="0" vspace="0"  style="width: 100%; height: 1000px; border: none; pointer-events: all;"></iframe>
                    </div>
                    <div v-else-if="infoApply.linkCv && infoApply.linkCv === 'denied'" class="alert alert-warning m-5" role="alert">
                        {{ 'Access denied, cannot load resume'|trans }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-12 text-center fixed-bottom bg-white py-3 border-top mb-0">
        <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.fullName + '_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>

{###################  CHOICE EXPORT FILE TYPE   ####################}
<div class="modal fade" id="export_file_type" tabindex="-1" role="dialog" aria-labelledby="exportFile" aria-hidden="true" data-backdrop="static">
    <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 font-700" id="myModalLabel">
                    <i class="fa fa-download mr-2"></i>
                    <span>{{ 'Export applies (CSV or ZIP)'|trans }}</span>
                </h4>
            </div>
            <div class="modal-body justify-content-center p-5 d-flex">
                <div>
                    <label class="mb-3 d-flex align-items-center" for="export_zip_file">
                        <input type="radio" name="exportFile" id="export_zip_file" value="zipCv" class="radio-export-file" v-model="fileTypeSelected">
                        {{ 'Zip Archive File'|trans }}
                    </label>
                    <label class="mb-0 d-flex align-items-center" for="export_csv_file">
                        <input type="radio" name="exportFile" id="export_csv_file" value="csvCv" class="radio-export-file" v-model="fileTypeSelected">
                        {{ 'CSV File'|trans }}
                    </label>
                </div>
            </div>
            <div class="modal-footer border-0 d-flex justify-content-center">
                <button type="button" class="btn btn-primary mr-3" @click="exportData" :disabled="!fileTypeSelected">
                    <i class="fa fa-download mr-2"></i>
                    {{ 'Export'|trans }}
                </button>
                <button type="reset" class="btn btn-light" data-dismiss="modal" @click="resetFileSelected()">
                    <i class="fal fa-times-circle mr-2"></i>
                    {{ 'Cancel'|trans }}
                </button>
            </div>
        </div>
    </div>
</div>

{################### MODAL SAME APPLIES FOR A CANDIDATE #######################}
<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 text-right mb-4 position-absolute" data-dismiss="modal" style="right: 30px;">&times;</button>
                <h3 class="modal-title lead">
                    <i class="fad fa-user-circle mr-2"></i>
                    <% applyProcessed.fullName %>
                </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="applyProcessed.email == apply.email && (applyProcessed.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>

{################### MODAL HISTORIQUE APPLIES STATUS #######################}
<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 text-right mb-4 position-absolute" data-dismiss="modal" style="right: 30px;">&times;</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">{{ 'Status'|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 == applyStatusIdLabel.Inbox">{{ 'Inbox'|trans }}</td>
                            <td v-if="reason.qualif == applyStatusIdLabel['In process']">{{ 'In process'|trans }}</td>
                            <td v-if="reason.qualif == applyStatusIdLabel.Qualified">{{ 'Qualified'|trans }}</td>
                            <td v-if="reason.qualif == applyStatusIdLabel.Rejected">{{ 'Rejected'|trans }}</td>
                            <td v-if="reason.qualif == applyStatusIdLabel.Hired">{{ 'Hired'|trans }}</td>
                            <td v-if="reason.qualif == applyStatusIdLabel.Unclassified">{{ 'Unclassified'|trans }}</td>
                            <td v-if="reason.qualif == applyStatusIdLabel['Put aside']">{{ 'Put aside'|trans }}</td>
                            <td v-if="reason.qualif == applyStatusIdLabel['Contacted']">{{ 'Contacted'|trans }}</td>
                            <td>
                                <ul v-for="listReason in reason.reasons">
                                    <li><% listReason['reason'] %></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" data-backdrop="static">
    <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" @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>

{################### Modal change multiple applies qualif status #######################}
<div class="modal fade modal-bg" 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.fullName %></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">
                        <span class="pr-3 font-weight-bold font-italic">{{ 'Select Status'|trans }}</span>

                        <apply-qualif-selector :apply-status-id-label="applyStatusIdLabel"
                                               :can-change-status="true"
                                               :is-subscribe="isSubscribe"
                                               :apply="statusOneApply"
                                               @open-modal-move-candidate-reason="openModalMoveCandidateReason"
                                               :key="statusOneApply.id"
                        ></apply-qualif-selector>
                    </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 CONFIRM MOVE CANDIDATE TO REJECTED  ####################}
<div class="modal fade modal-bg" id="rejectedModal" tabindex="-1" role="dialog" aria-labelledby="rejected" data-backdrop="static"
style="z-index: 100000 !important;">
    <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" 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">
                    <% applyProcessed.fullName %>
                </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 rejected candidates.'|trans }}</p>
            </div>
            <div class="modal-body text-center py-5">
                <h6><strong>{{ 'Are you sure you want to rejected this apply?'|trans }}</strong></h6>
                <div v-for="(unqualif, i) in dafReasons" v-if="unqualif.qualified==applyStatusIdLabel.Rejected"
                     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 WHEN OPENED FROM KANBAN JOB MODAL #}
                <button type="button" class="btn btn-light" data-dismiss="modal" v-if="isKanbanOpened"
                        @click="resetCheckedReasons(applyProcessed.id); getAllAppliesByJob(applyProcessed.idJob)"
                        :disabled="loadingChangeStatus">
                    {{ 'Cancel'|trans }}
                </button>
                
                {# BUTTON WHEN OPENED FROM LIST #}
                <button type="button" class="btn btn-light" data-dismiss="modal" v-if="!isKanbanOpened"
                        @click="resetCheckedReasons(applyProcessed.id);"
                        :disabled="loadingChangeStatus">
                    {{ 'Cancel'|trans }}
                </button>
                <button type="button" v-if="!isKanbanOpened && groupStatusesTrigger"
                        class="btn btn-primary btn-action"
                        @click="groupQualifApply('Rejected',  statusOneApply.fullName, statusOneApply.email, selectedReasons, explainReasons, '#rejectedModal')"
                        :disabled="loadingChangeStatus">
                    {{ 'Validate'|trans }}
                </button>
                <button type="button" class="btn btn-primary btn-action"
                        v-if="!groupStatusesTrigger && dafReasons.find(x => x.qualified === applyStatusIdLabel.Rejected)"
                        @click="qualifApply(applyProcessed.id, 'Rejected',  applyProcessed.fullName, applyProcessed.email, selectedReasons, explainReasons, '#rejectedModal',dafReasons.find(x => x.qualified === applyStatusIdLabel.Rejected))"
                        :disabled="loadingChangeStatus">
                    {{ 'Validate'|trans }}
                </button>
            </div>
        </div>
    </div>
</div>

{###################  MODAL CONFIRM MOVE CANDIDATE TO INTERVIEW  ####################}
<div class="modal fade modal-bg" id="qualifiedModal" tabindex="-1" role="dialog" aria-labelledby="Qualified"
     style="z-index: 100000 !important;"
     data-backdrop="static">
    <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" 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">
                    <% applyProcessed.fullName %>
                </h5>
            </div>
            <div class="modal-body text-center py-5">
                <h6><strong>{{ 'Are you sure you want to Qualified this apply?'|trans }}</strong></h6>
                <div v-for="(unqualif, i) in dafReasons" v-if="unqualif.qualified==applyStatusIdLabel.Qualified"
                     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 WHEN OPENED FROM KANBAN JOB MODAL #}
                <button type="button" class="btn btn-light" data-dismiss="modal" v-if="isKanbanOpened"
                        @click="resetCheckedReasons(applyProcessed.id); getAllAppliesByJob(applyProcessed.idJob)"
                        :disabled="loadingChangeStatus">
                    {{ 'Cancel'|trans }}
                </button>

                {# BUTTON WHEN OPENED FROM LIST #}
                <button type="button" class="btn btn-light" data-dismiss="modal" v-if="!isKanbanOpened"
                        @click="resetCheckedReasons(applyProcessed.id)"
                        :disabled="loadingChangeStatus">
                    {{ 'Cancel'|trans }}
                </button>
                <button type="button" v-if="!isKanbanOpened && groupStatusesTrigger"
                        class="btn btn-primary btn-action"
                        @click="groupQualifApply('Qualified', statusOneApply.fullName, statusOneApply.email, selectedReasons, explainReasons, '#qualifiedModal')"
                        :disabled="loadingChangeStatus">
                    {{ 'Validate'|trans }}
                </button>
                <button type="button"
                        class="btn btn-primary btn-action"
                        v-if="!groupStatusesTrigger"
                        @click="qualifApply(applyProcessed.id, 'Qualified', applyProcessed.fullName, applyProcessed.email, selectedReasons, explainReasons, '#qualifiedModal', dafReasons.find(x => x.qualified === applyStatusIdLabel.Qualified))"
                        :disabled="loadingChangeStatus">
                    {{ 'Validate'|trans }}
                </button>
            </div>
        </div>
    </div>
</div>

{###################  MODAL CONFIRM MOVE CANDIDATE TO INBOX  ####################}
<div class="modal fade modal-bg" id="inboxModal" tabindex="-1" role="dialog" aria-labelledby="inbox"
     style="z-index: 100000 !important;"
     data-backdrop="static">
    <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" 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">
                    <% applyProcessed.fullName %>
                </h5>
            </div>
            <div class="modal-body text-center py-5">
                <h6><strong>{{ 'Are you sure you want to inbox this apply?'|trans }}</strong></h6>
                <div v-for="(unqualif, i) in dafReasons" v-if="unqualif.qualified==applyStatusIdLabel.Inbox"
                     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 WHEN OPENED FROM KANBAN JOB MODAL #}
                <button type="button" class="btn btn-light" data-dismiss="modal" v-if="isKanbanOpened"
                        @click="resetCheckedReasons(applyProcessed.id); getAllAppliesByJob(applyProcessed.idJob)"
                        :disabled="loadingChangeStatus">
                    {{ 'Cancel'|trans }}
                </button>

                {# BUTTON WHEN OPENED FROM LIST #}
                <button type="button" class="btn btn-light" data-dismiss="modal" v-if="!isKanbanOpened"
                        @click="resetCheckedReasons(applyProcessed.id)"
                        :disabled="loadingChangeStatus">
                    {{ 'Cancel'|trans }}
                </button>
                <button type="button" v-if="!isKanbanOpened && groupStatusesTrigger"
                        class="btn btn-primary btn-action"
                        @click="groupQualifApply('Inbox',  statusOneApply.fullName, statusOneApply.email, selectedReasons, explainReasons, '#inboxModal')"
                        :disabled="loadingChangeStatus">
                    {{ 'Validate'|trans }}
                </button>
                <button type="button"
                        class="btn btn-primary btn-action"
                        v-if="!groupStatusesTrigger"
                        @click="qualifApply(applyProcessed.id, 'Inbox',  applyProcessed.fullName, applyProcessed.email, selectedReasons, explainReasons, '#inboxModal',dafReasons.find(x => x.qualified === applyStatusIdLabel.Inbox))"
                        :disabled="loadingChangeStatus">
                    {{ 'Validate'|trans }}
                </button>
            </div>
        </div>
    </div>
</div>


{###################  MODAL CONFIRM MOVE CANDIDATE TO INPROCESS  ####################}
<div class="modal fade modal-bg" id="inprocessModal" tabindex="-1" role="dialog" aria-labelledby="inprocess"
     style="z-index: 100000 !important;"
     data-backdrop="static">
    <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" 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">
                    <% applyProcessed.fullName %>
                </h5>
            </div>
            <div class="modal-body text-center py-5">
                <h6><strong>{{ 'Are you sure you want to inprocess this apply?'|trans }}</strong></h6>
                <div v-for="(unqualif, i) in dafReasons" v-if="unqualif.qualified==applyStatusIdLabel['In process']"
                     class="text-left">
                    <div class="checkbox">
                        <checkbox v-model="selectedReasons" :val="unqualif" :id="'inprocessReason'+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 WHEN OPENED FROM KANBAN JOB MODAL #}
                <button type="button" class="btn btn-light" data-dismiss="modal" v-if="isKanbanOpened"
                        @click="resetCheckedReasons(applyProcessed.id); getAllAppliesByJob(applyProcessed.idJob)"
                        :disabled="loadingChangeStatus">
                    {{ 'Cancel'|trans }}
                </button>
                <button type="button" class="btn btn-light" data-dismiss="modal" v-if="!isKanbanOpened"
                        @click="resetCheckedReasons(applyProcessed.id)"
                        :disabled="loadingChangeStatus">
                    {{ 'Cancel'|trans }}
                </button>
                <button type="button" v-if="!isKanbanOpened && groupStatusesTrigger"
                        class="btn btn-primary btn-action"
                        @click="groupQualifApply('In process', statusOneApply.fullName, statusOneApply.email, selectedReasons, explainReasons, '#inprocessModal', Boolean(dafReasons.some(x => x.qualified === applyStatusIdLabel['In process'])))"
                        :disabled="loadingChangeStatus">
                    {{ 'Validate'|trans }}
                </button>
                <button type="button" class="btn btn-primary btn-action" v-if="!groupStatusesTrigger"
                        @click="qualifApply(applyProcessed.id, 'In process', applyProcessed.fullName, applyProcessed.email, selectedReasons, explainReasons, '#inprocessModal', Boolean(dafReasons.some(x => x.qualified === applyStatusIdLabel['In process'])))"
                        :disabled="loadingChangeStatus">
                    {{ 'Validate'|trans }}
                </button>
            </div>
        </div>
    </div>
</div>


{###################  MODAL CONFIRM MOVE CANDIDATE TO PUT ASIDE  ####################}
<div class="modal fade modal-bg" id="putasideModal" tabindex="-1" role="dialog" aria-labelledby="putaside"
     style="z-index: 100000 !important;"
     data-backdrop="static">
    <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" 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">
                    <% applyProcessed.fullName %>
                </h5>
            </div>
            <div class="modal-body text-center py-5">
                <h6><strong>{{ 'Are you sure you want to inprocess this apply?'|trans }}</strong></h6>
                <div v-for="(unqualif, i) in dafReasons" v-if="unqualif.qualified==applyStatusIdLabel['Put aside']"
                     class="text-left">
                    <div class="checkbox">
                        <checkbox v-model="selectedReasons" :val="unqualif" :id="'putasideReason'+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 WHEN OPENED FROM KANBAN JOB MODAL #}
                <button type="button" class="btn btn-light" data-dismiss="modal" v-if="isKanbanOpened"
                        @click="resetCheckedReasons(applyProcessed.id); getAllAppliesByJob(applyProcessed.idJob)"
                        :disabled="loadingChangeStatus">
                    {{ 'Cancel'|trans }}
                </button>
                <button type="button" class="btn btn-light" data-dismiss="modal" v-if="!isKanbanOpened"
                        @click="resetCheckedReasons(applyProcessed.id)"
                        :disabled="loadingChangeStatus">
                    {{ 'Cancel'|trans }}
                </button>
                <button type="button" v-if="!isKanbanOpened && groupStatusesTrigger"
                        class="btn btn-primary btn-action"
                        @click="groupQualifApply('Put aside', statusOneApply.fullName, statusOneApply.email, selectedReasons, explainReasons, '#putasideModal', Boolean(dafReasons.some(x => x.qualified === applyStatusIdLabel['Put aside'])))"
                        :disabled="loadingChangeStatus">
                    {{ 'Validate'|trans }}
                </button>
                <button type="button" class="btn btn-primary btn-action" v-if="!groupStatusesTrigger"
                        @click="qualifApply(applyProcessed.id, 'Put aside', applyProcessed.fullName, applyProcessed.email, selectedReasons, explainReasons, '#putasideModal', Boolean(dafReasons.some(x => x.qualified === applyStatusIdLabel['Put aside'])))"
                        :disabled="loadingChangeStatus">
                    {{ 'Validate'|trans }}
                </button>
            </div>
        </div>
    </div>
</div>

{###################  MODAL CONFIRM MOVE CANDIDATE TO HIRED  ####################}
<div class="modal fade modal-bg" id="hiredModal" tabindex="-1" role="dialog" aria-labelledby="hired" data-backdrop="static"
     style="z-index: 100000 !important;">
    <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" 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"><% applyProcessed.fullName %></h5>
            </div>
            <div class="modal-body text-center py-5">
                <h6><strong>{{ 'Are you sure you want to hired this apply?'|trans }}</strong></h6>
                <div v-for="(unqualif, i) in dafReasons" v-if="unqualif.qualified==applyStatusIdLabel.Hired"
                     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 WHEN OPENED FROM KANBAN JOB MODAL #}
                <button type="button" class="btn btn-light" data-dismiss="modal" v-if="isKanbanOpened"
                        @click="resetCheckedReasons(applyProcessed.id); getAllAppliesByJob(applyProcessed.idJob)"
                        :disabled="loadingChangeStatus">
                    {{ 'Cancel'|trans }}
                </button>
                
                {# BUTTON WHEN OPENED FROM LIST #}
                <button type="button" class="btn btn-light" data-dismiss="modal" v-if="!isKanbanOpened"
                        @click="resetCheckedReasons(applyProcessed.id)"
                        :disabled="loadingChangeStatus">
                    {{ 'Cancel'|trans }}
                </button>
                <button type="button" v-if="!isKanbanOpened && groupStatusesTrigger"
                        class="btn btn-primary btn-action"
                        @click="groupQualifApply('Hired',  statusOneApply.fullName, statusOneApply.email, selectedReasons, explainReasons, '#hiredModal')"
                        :disabled="loadingChangeStatus">
                    {{ 'Validate'|trans }}
                </button>
                <button type="button" class="btn btn-primary btn-action"
                        v-if="!groupStatusesTrigger"
                        @click="qualifApply(applyProcessed.id, 'Hired',  applyProcessed.fullName, applyProcessed.email, selectedReasons, explainReasons, '#hiredModal',dafReasons.find(x => x.qualified === applyStatusIdLabel.Hired))"
                        :disabled="loadingChangeStatus">
                    {{ 'Validate'|trans }}
                </button>
            </div>
        </div>
    </div>
</div>

{###################  MODAL CONFIRM MOVE CANDIDATE TO UNCLASSIFIED  ####################}
<div class="modal fade modal-bg" id="unclassifiedModal" tabindex="-1" role="dialog" aria-labelledby="Unclassified" data-backdrop="static"
     style="z-index: 100000 !important;">
    <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="hired" v-if="!groupStatusesTrigger"><% applyProcessed.fullName %></h5>
            </div>
            <div class="modal-body text-center py-5">
                <h6><strong>{{ 'Are you sure you want to unclassified this apply?'|trans }}</strong></h6>
                <div v-for="(unqualif, i) in dafReasons" v-if="unqualif.qualified==applyStatusIdLabel.Unclassified"
                     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 WHEN OPENED FROM KANBAN JOB MODAL #}
                <button type="button" class="btn btn-light" data-dismiss="modal" v-if="isKanbanOpened"
                        @click="resetCheckedReasons(applyProcessed.id); getAllAppliesByJob(applyProcessed.idJob)"
                        :disabled="loadingChangeStatus">
                    {{ 'Cancel'|trans }}
                </button>

                {# BUTTON WHEN OPENED FROM LIST #}
                <button type="button" class="btn btn-light" data-dismiss="modal" v-if="!isKanbanOpened"
                        @click="resetCheckedReasons(applyProcessed.id)"
                        :disabled="loadingChangeStatus">
                    {{ 'Cancel'|trans }}
                </button>
                <button type="button" v-if="!isKanbanOpened && groupStatusesTrigger"
                        class="btn btn-primary btn-action"
                        @click="groupQualifApply('Unclassified',  statusOneApply.fullName, statusOneApply.email, selectedReasons, explainReasons, '#unclassifiedModal')"
                        :disabled="loadingChangeStatus">
                    {{ 'Validate'|trans }}
                </button>
                <button type="button" class="btn btn-primary btn-action"
                        v-if="!groupStatusesTrigger"
                        @click="qualifApply(applyProcessed.id, 'Unclassified',  applyProcessed.fullName, applyProcessed.email, selectedReasons, explainReasons, '#unclassifiedModal',dafReasons.find(x => x.qualified === applyStatusIdLabel.Unclassified))"
                        :disabled="loadingChangeStatus">
                    {{ 'Validate'|trans }}
                </button>
            </div>
        </div>
    </div>
</div>