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

{% block title %}Daf Admin{% endblock %}

{% block pageheader %}Daf Admin{% endblock %}

{% block body %}
    <div id="app" class="container-fluid no-padding" v-cloak>
        <div class="row" style="min-height:300px;">
            <div class="col-xs-2">
                <h3>My campaigns</h3>
                <hr/>
                <!-- required for floating -->
                <!-- Nav tabs -->
                <ul class="nav nav-tabs tabs-left">
                    <li v-for="(instance, i) in userInstances" :class="instance.defaultAct">
                        <a :href="'#campaign_' + i" data-toggle="tab"
                           @click="getAppliesInstance(instance.idDafInstance)">
                            <div v-if="instance.active" class="activeInstance"></div>
                            <div v-else class="inactiveInstance"></div>
                            <p style="display: inline-block"><% instance.nameInstance %></p>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-xs-10">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div v-for="(instance, i) in userInstances" class="tab-pane fade in" :id="'campaign_' + i"
                         :class="instance.defaultAct">
                        <h3 class="b-margin"><% instance.nameInstance %>
                            <small>
                                <a :href="instance.editOptions" class="btn btn-primary btn-xs">
                                    <i class="glyphicon glyphicon-cog"></i>
                                </a>
                            </small>
                            <button class="btn btn-primary btn-xs" type="button" @click="showExport(i)">
                                <i class="glyphicon glyphicon-download-alt"></i>&nbsp;Export applies
                            </button>
                        </h3>
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a :href="'#incoming_' + i" data-toggle="tab"><i
                                            class="glyphicon glyphicon-circle-arrow-down"></i>&nbsp;Incoming</a>
                            </li>
                            <li>
                                <a :href="'#qualify_' + i" data-toggle="tab"><i
                                            class="glyphicon glyphicon-thumbs-up"></i>&nbsp;Favorite</a>
                            </li>
                            <li>
                                <a :href="'#unqualify_' + i" data-toggle="tab"><i class="glyphicon glyphicon-trash"></i>&nbsp;Archived</a>
                            </li>
                            <li>
                                <a :href="'#hired_' + i" data-toggle="tab"><i
                                            class="glyphicon glyphicon-thumbs-up"></i>&nbsp;Hired</a>
                            </li>
                        </ul>
                        <div class="table-responsive t-margin">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th style="border-bottom: none;">
                                        <small>Applications</small>
                                    </th>
                                    <th style="border-bottom: none;">
                                        <small>Qualified</small>
                                    </th>
                                    <th style="border-bottom: none;">
                                        <small>Unqualified</small>
                                    </th>
                                    <th style="border-bottom: none;">
                                        <small>To qualify</small>
                                    </th>
                                    <th style="border-bottom: none;">
                                        <small>Hired</small>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td style="border-top: none;"><b><% instance.nb %></b></td>
                                    <td style="border-top: none;">
                                        <b v-if="instance.nbQ"><% instance.nbQ %></b>
                                        <b v-else>0</b>
                                    </td>
                                    <td style="border-top: none;">
                                        <b v-if="instance.nbUnq"><% instance.nbUnq %></b>
                                        <b v-else>0</b>
                                    </td>
                                    <td style="border-top: none;">
                                        <b v-if="instance.nbToQ"><% instance.nbToQ %></b>
                                        <b v-else>0</b>
                                    </td>
                                    <td style="border-top: none;">
                                        <b v-if="instance.nbH"><% instance.nbH %></b>
                                        <b v-else>0</b>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane fade in active" :id="'incoming_' + i">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="btn-group btn-group-justified" role="group">
                                            <div class="btn-group btn-group-sm">
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default"><%
                                                        toQualifAppliesInstance.length %> applies
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default">Page <%
                                                        appliesToQualifPage %> / <% getAppliesToQualifPageLimit() %>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="First"
                                                            :disabled="loading || appliesToQualifPage < 2"
                                                            @click="changePage(-getAppliesToQualifPageLimit(), instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-step-backward"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="Previous"
                                                            :disabled="loading || appliesToQualifPage < 2"
                                                            @click="changePage(-1, instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-chevron-left"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="Next"
                                                            :disabled="loading || appliesToQualifPage >= getAppliesToQualifPageLimit()"
                                                            @click="changePage(1, instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-chevron-right"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="Last"
                                                            :disabled="loading || appliesToQualifPage >= getAppliesToQualifPageLimit()"
                                                            @click="changePage(getAppliesToQualifPageLimit(), instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-step-forward"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button class="btn btn-default btn-sm dropdown-toggle" type="button"
                                                            id="apply-filter-tq" data-toggle="dropdown"
                                                            title="Filtering applies"
                                                            aria-haspopup="true" aria-expanded="true">
                                                        <span v-html="filters[selectedFilterOrderTQ]"></span>
                                                    </button>
                                                    <ul class="dropdown-menu" aria-labelledby="apply-filter-tq">
                                                        <li v-for="(filterLabel, filterKey) in filters"
                                                            :class="{active: filterKey == selectedFilterOrderTQ}"><a
                                                                    href="#" v-html="filterLabel"
                                                                    @click.prevent="orderTq(instance.idDafInstance, filterKey)"></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="input-group search-group b-margin">
                                            <input v-model.lazy="filterApplyTQ"
                                                   @keyup.enter="filteringApplyTQ(instance.idDafInstance)" type="search"
                                                   class="form-control input-sm" placeholder="Search"
                                                   aria-controls="search-table">
                                            <div class="input-group-addon"><span class="glyphicon glyphicon-search"
                                                                                 aria-hidden="true"></span></div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-sm btn-default" type="button" aria-expanded="false"
                                                aria-controls="advancedSearchTQ"
                                                @click="slideToggle(instance.idDafInstance)">
                                            Advanced Search
                                        </button>
                                    </div>
                                </div>
                                <div :id="'advancedSearchTQ' + instance.idDafInstance" style="display: none;">
                                    <div class="well">
                                        <div class="row"
                                             @keyup.enter="getAppliesInstance(instance.idDafInstance, true)">
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Job ID</label> <i class="glyphicon glyphicon-info-sign" title="Separate each values with a coma for a multiple research on this field"></i>
                                                    <input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].idExt">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Job Title</label> <i class="glyphicon glyphicon-info-sign" title="Separate each values with a coma for a multiple research on this field"></i><input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].title">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Job Location</label> <i class="glyphicon glyphicon-info-sign" title="Separate each values with a coma for a multiple research on this field"></i> <input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].location">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Candidate Name</label> <input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].name"></div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Candidate Email</label> <input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].email">
                                                </div>
                                            </div>

                                            <div v-for="customField in instance.customFields" class="col-sm-4">
                                                <div class="form-group">
                                                    <label><% customField.name %></label>
                                                    <input v-if="customField.type=='text'" id="typeFields"
                                                           class="form-control input-sm" type="text"
                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">

                                                    <input v-if="customField.type=='date'" id="typeFields"
                                                            class="form-control input-sm" type="date"
                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">

                                                    <div>
                                                        <input v-if="customField.type=='checkbox'" id="typeFields"
                                                                class="input-sm" type="checkbox"
                                                               v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" true-value="customField.name" false-value="">
                                                    </div>

                                                    <div v-if="customField.type=='radio'" class="text-right">
                                                        <div>
                                                            <span class="control-label col-sm-6">Pas de valeur: </span>
                                                            <span class="control-label col-sm-6 text-left"><input
                                                                        class="input-sm"  type="radio"
                                                                        :name="customField.name.replace(/\s/g, '_')+'_TQ'"
                                                                        :checked="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]==''"
                                                                        v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" value=""></span>
                                                        </div>
                                                        <div v-for="value in customField.listValues">
                                                            <span class="control-label col-sm-6"><% value.name %>: </span>
                                                            <span class="col-sm-6 text-left">
                                                                    <input class="input-sm"
                                                                           type="radio"
                                                                           :name="customField.name.replace(/\s/g, '_')+'_TQ'"
                                                                           :checked="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]==value.code"
                                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" v-bind:value="value.code">
                                                                </span>
                                                        </div>
                                                    </div>

                                                    <div v-if="customField.type=='multicheckboxes'" class="text-right">

                                                        <div v-for="value in customField.listValues">
                                                            <span class="control-label col-sm-6"><% value.name %>: </span>
                                                            <span class="col-sm-6 text-left">
                                                                    <input class="input-sm checkbox"
                                                                           type="checkbox"
                                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" v-bind:value="value.name">
                                                                </span>
                                                        </div>
                                                    </div>

                                                    <input v-if="customField.type=='slider'"
                                                           class="form-control input-sm" id="typeFields"
                                                            min="1" max="5" type="range"
                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">


                                                    <select v-if="customField.type=='list'" class="form-control"
                                                            id="typeFields"
                                                            v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">
                                                        <option value=""></option>
                                                        <option v-for="value in customField.listValues"
                                                                :value="value.code"><% value.name %>
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <button class="btn btn-default"
                                                        @click="resetAdvancedSearch(instance.idDafInstance)">Reset
                                                </button>
                                                <button class="btn btn-primary"
                                                        @click="getAppliesInstance(instance.idDafInstance, true)">Search
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="apply">
                                    <div v-if="toQualifAppliesInstance.length < 1" class='alert-danger text-center'>No
                                        result
                                    </div>
                                    <div v-for="(apply, j) in toQualifAppliesInstance " class="b-margin applyDaf">

                                        <div class="col-sm-6">
                                            <b style="border-right: 1px solid lightgray; padding-right: 1%"><%
                                                apply.name %></b>
                                            <span v-if="apply.jobName">
                                                <a :href="apply.jobLink" target="_blank">
                                                    <% apply.jobName %>
                                                </a>
                                            </span>
                                            <span v-else>
                                                <b><i>Archived job</i></b>
                                            </span>
                                            <br>
                                            <b style="visibility: hidden; padding-right: 1%;"><% apply.name %></b>
                                            <span v-if="apply.city"> <% apply.city %></span><span
                                                    v-else-if="apply.state"> <% apply.state %></span><span v-else> <% apply.region %></span>
                                            <br>
                                            <span v-show="apply.checked == 0" :id="apply.id"
                                                  class="label label-success"><i>New !</i></span>
                                            <ul class="t-margin" style="list-style: none; padding-inline-start: 0;">
                                                <li v-if="apply.phone">
                                                    <i class="glyphicon glyphicon-phone"></i> <% apply.phone %>
                                                </li>
                                                <li>
                                                    <i class="glyphicon glyphicon-envelope"></i> <% apply.email %>
                                                </li>
                                                <li>
                                                    <i class="glyphicon glyphicon-calendar"></i> <% apply.date %>
                                                </li>
                                                <li v-if="countAppliesByUser[apply.email]-1 > 0">
                                                    <i class="glyphicon glyphicon-comment"></i>
                                                    <a class="other-apply" href="#" @click="modalOtherApplies(apply)"><% countAppliesByUser[apply.email]-1 %> Other Applies </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-2" style="text-align: center">
                                            <span v-if="instance.scoring">
                                                <div v-if="apply.score !== null">
                                                    <canvas name="scoreCanvas" :data-score="apply.score"
                                                            :data-leftscore="100 - apply.score" height="75"
                                                            width="75"
                                                            title="Relevance is based on a semantic study between the job and the resume"></canvas>
                                                    <p style="margin: 0;">Relevance</p>
                                                </div>
                                            </span>
                                        </div>
                                        <div class="col-sm-2" style="text-align: center">

                                                <span v-if="instance.geoDistance">
                                                    <div v-if="Number.isInteger(apply.geoDistance)">
                                                        <span v-if="apply.geoDistance < 10"
                                                              title="Distance less than 10km">
                                                            <i class="glyphicon glyphicon-map-marker sizeIcon"
                                                               style="color: limegreen"></i>
                                                            <p>Very close</p>
                                                        </span>
                                                        <span v-else-if="(apply.geoDistance >= 10 && apply.geoDistance <= 30)"
                                                              title="Distance between 10 and 30km">
                                                            <i class="glyphicon glyphicon-map-marker sizeIcon"
                                                               style="color: greenyellow;"></i>
                                                            <p>Close</p>
                                                        </span>
                                                        <span v-else-if="(apply.geoDistance > 30 && apply.geoDistance <= 50)"
                                                              title="Distance between 30 and 50km">
                                                            <i class="glyphicon glyphicon-map-marker sizeIcon"
                                                               style="color: gold;"></i>
                                                            <p>Far</p>
                                                        </span>
                                                        <span v-else-if="(apply.geoDistance > 50 && apply.geoDistance <= 100)"
                                                              title="Distance between 50 and 100km">
                                                            <i class="glyphicon glyphicon-map-marker sizeIcon"
                                                               style="color: orange"></i>
                                                            <p>Very far</p>
                                                        </span>
                                                        <span v-else-if="(apply.geoDistance > 100 && apply.geoDistance <= 1000)"
                                                              title="Distance between 100 and 1000km">
                                                            <i class="glyphicon glyphicon-map-marker sizeIcon"
                                                               style="color: orangered"></i>
                                                            <p>Out of area</p>
                                                        </span>
                                                        <span v-else-if="apply.geoDistance > 1000"
                                                              title="Distance greater than 1000km">
                                                            <i class="glyphicon glyphicon-map-marker sizeIcon"
                                                               style="color: red"></i>
                                                            <p>Out of country</p>
                                                        </span>
                                                    </div>
                                                </span>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="col-sm-12 b-margin" style="padding: 0">
                                                <button title="Qualify this apply"
                                                        @click="showModal('T_Q', j)"
                                                        type="button" class="qualifBtn">
                                                    <i class="glyphicon glyphicon-thumbs-up"></i>
                                                </button>
                                                <button title="Unqualify this apply" @click="showModal('T_U', j)"
                                                        type="button" class="unqualifBtn">
                                                    <i class="glyphicon glyphicon-thumbs-down"></i>
                                                </button>
                                            </div>
                                            <div class="col-sm-12" style="padding: 0">
                                                <button title="Show more infos"
                                                        @click="modalInfos(j, apply.id, apply.idDafInstance, apply.ext, 'TQ')"
                                                        type="button" class="btn btn-primary" style="width: 100%;">
                                                    Show infos
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade in" :id="'qualify_' + i">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="btn-group btn-group-justified" role="group">
                                            <div class="btn-group btn-group-sm">
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default"><%
                                                        qualifAppliesInstance.length %> applies
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default">Page <%
                                                        appliesQualifPage %> / <% getAppliesQualifPageLimit() %>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="First"
                                                            :disabled="loading || appliesQualifPage < 2"
                                                            @click="changePageQualif(-getAppliesQualifPageLimit(), instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-step-backward"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="Previous"
                                                            :disabled="loading || appliesQualifPage < 2"
                                                            @click="changePageQualif(-1, instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-chevron-left"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="Next"
                                                            :disabled="loading || appliesQualifPage >= getAppliesQualifPageLimit()"
                                                            @click="changePageQualif(1, instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-chevron-right"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="Last"
                                                            :disabled="loading || appliesQualifPage >= getAppliesQualifPageLimit()"
                                                            @click="changePageQualif(getAppliesQualifPageLimit(), instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-step-forward"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <div class="dropdown">
                                                        <button class="btn btn-default btn-sm dropdown-toggle"
                                                                type="button"
                                                                id="apply-filter-q" data-toggle="dropdown"
                                                                title="Filtering applies"
                                                                aria-haspopup="true" aria-expanded="true">
                                                            <span v-html="filters[selectedFilterOrderQ]"></span>
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="apply-filter-q">
                                                            <li v-for="(filterLabel, filterKey) in filters"
                                                                :class="{active: filterKey == selectedFilterOrderQ}"><a
                                                                        href="#" v-html="filterLabel"
                                                                        @click.prevent="orderQ(instance.idDafInstance, filterKey)"></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="input-group search-group b-margin">
                                            <input v-model.lazy="filterApplyQ"
                                                   @keyup.enter="filteringApplyQ(instance.idDafInstance)" type="search"
                                                   class="form-control input-sm" placeholder="Search"
                                                   aria-controls="search-table">
                                            <div class="input-group-addon"><span class="glyphicon glyphicon-search"
                                                                                 aria-hidden="true"></span></div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-sm btn-default" type="button" aria-expanded="false"
                                                aria-controls="advancedSearchQ"
                                                @click="slideToggle(instance.idDafInstance)">
                                            Advanced Search
                                        </button>
                                    </div>
                                </div>
                                <div :id="'advancedSearchQ' + instance.idDafInstance" style="display: none;">
                                    <div class="well">
                                        <div class="row"
                                             @keyup.enter="getAppliesInstance(instance.idDafInstance, true)">
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Job ID</label> <i class="glyphicon glyphicon-info-sign" title="Separate each values with a coma for a multiple research on this field"></i><input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].idExt">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Job Title</label> <i class="glyphicon glyphicon-info-sign" title="Separate each values with a coma for a multiple research on this field"></i><input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].title">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Job Location</label> <i class="glyphicon glyphicon-info-sign" title="Separate each values with a coma for a multiple research on this field"></i><input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].location">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Candidate Name</label> <input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].name"></div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Candidate Email</label> <input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].email">
                                                </div>
                                            </div>
                                            <div v-for="customField in instance.customFields" class="col-sm-4">
                                                <div class="form-group">
                                                    <label><% customField.name %></label>
                                                    <input v-if="customField.type=='text'" id="typeFields"
                                                            class="form-control input-sm" type="text"
                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">

                                                    <input v-if="customField.type=='date'" id="typeFields"
                                                            class="form-control input-sm" type="date"
                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">

                                                    <div>
                                                        <input v-if="customField.type=='checkbox'" id="typeFields"
                                                                class="input-sm" type="checkbox"
                                                               v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" true-value="customField.name" false-value="">
                                                    </div>

                                                    <div v-if="customField.type=='radio'" class="text-right">
                                                        <div>
                                                            <span class="control-label col-sm-6">Pas de valeur: </span>
                                                            <span class="control-label col-sm-6 text-left"><input
                                                                        class="input-sm"  type="radio"
                                                                        :name="customField.name.replace(/\s/g, '_')+'_Q'"
                                                                        v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" value=""></span>
                                                        </div>
                                                        <div v-for="value in customField.listValues">
                                                            <span class="control-label col-sm-6"><% value.name %>: </span>
                                                            <span class="col-sm-6 text-left">
                                                                    <input class="input-sm"
                                                                           type="radio"
                                                                           :name="customField.name.replace(/\s/g, '_')+'_Q'"
                                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" v-bind:value="value.code">
                                                                </span>
                                                        </div>
                                                    </div>

                                                    <div v-if="customField.type=='multicheckboxes'" class="text-right">

                                                        <div v-for="value in customField.listValues">
                                                            <span class="control-label col-sm-6"><% value.name %>: </span>
                                                            <span class="col-sm-6 text-left">
                                                                    <input class="input-sm checkbox"
                                                                           type="checkbox"
                                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" v-bind:value="value.name">
                                                                </span>
                                                        </div>
                                                    </div>

                                                    <input v-if="customField.type=='slider'"
                                                           class="form-control input-sm" id="typeFields"
                                                            min="1" max="5" type="range"
                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">


                                                    <select v-if="customField.type=='list'" class="form-control"
                                                            id="typeFields"
                                                            v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">
                                                        <option value=""></option>
                                                        <option v-for="value in customField.listValues"
                                                                :value="value.code"><% value.name %>
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <button class="btn btn-default"
                                                        @click="resetAdvancedSearch(instance.idDafInstance)">Reset
                                                </button>
                                                <button class="btn btn-primary"
                                                        @click="getAppliesInstance(instance.idDafInstance, true)">Search
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="overflow-y: auto;" class="apply">
                                    <div v-if="qualifAppliesInstance.length < 1" class='alert-danger text-center'>No
                                        result
                                    </div>
                                    <div v-for="(apply, j) in qualifAppliesInstance" class="b-margin applyDaf">
                                        <div class="col-sm-7">
                                            <b style="border-right: 1px solid lightgray; padding-right: 1%"><%
                                                apply.name%></b>
                                            <span v-if="apply.jobName">
                                                Applied job :
                                                <a :href="apply.jobLink" target="_blank">
                                                    <% apply.jobName %>
                                                </a>
                                            </span>
                                            <span v-else>
                                                <b><i>Archived job</i></b>
                                            </span>
                                            <br>
                                            <ul class="t-margin" style="list-style: none; padding-inline-start: 0;">
                                                <li>
                                                    <i class="glyphicon glyphicon-phone"></i> <% apply.phone %>
                                                </li>
                                                <li>
                                                    <i class="glyphicon glyphicon-envelope"></i> <% apply.email %>
                                                </li>
                                                <li>
                                                    <i class="glyphicon glyphicon-calendar"></i> <% apply.date %>
                                                </li>
                                                <li>
                                                    <i class="glyphicon glyphicon-globe"></i> <span
                                                            v-if="apply.city !== null"> <% apply.city %></span><span
                                                            v-else> <% apply.state %></span>
                                                </li>
                                                <li v-if="countAppliesByUser[apply.email]-1 > 0">
                                                    <i class="glyphicon glyphicon-comment"></i>
                                                    <a class="other-apply" href="#" @click="modalOtherApplies(apply)"><% countAppliesByUser[apply.email]-1 %> Other Applies </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-2">
                                            <canvas style="margin: 0 auto" name="scoreCanvas" :data-score="apply.score"
                                                    :data-leftscore="100 - apply.score" height="75" width="150"
                                                    title="Relevance is based on a semantic study between the job and the resume"></canvas>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="col-sm-12 b-margin" style="padding: 0">
                                                <button title="Cancel this apply" @click="modalCancel('Q_T', j)"
                                                        type="button" class="cancelBtn">
                                                    <i class="glyphicon glyphicon-remove-sign"></i>
                                                </button>
                                                <button title="Unqualify this apply" @click="showModal('Q_U', j)"
                                                        type="button" class="unqualifBtn">
                                                    <i class="glyphicon glyphicon-thumbs-down"></i>
                                                </button>
                                            </div>
                                            <div class="col-sm-12" style="padding: 0">
                                                <button title="Show more infos"
                                                        @click="modalInfos(j, apply.id, apply.idDafInstance, apply.ext, 'Q')"
                                                        type="button" class="btn btn-primary" style="width: 100%;">
                                                    Show infos
                                                </button>
                                            </div>
                                            <div class="col-sm-12" style="padding: 0">
                                                <button title="Hired"
                                                        @click="modalQtoH('Q_H', j)"
                                                        type="button" class="btn btn-success" style="width: 100%;">
                                                    Hire
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade in" :id="'unqualify_' + i">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="btn-group btn-group-justified" role="group">
                                            <div class="btn-group btn-group-sm">
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default"><%
                                                        unqualifAppliesInstance.length %> applies
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default">Page <%
                                                        appliesUnqualifPage %> / <% getAppliesUnqualifPageLimit() %>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="First"
                                                            :disabled="loading || appliesUnqualifPage < 2"
                                                            @click="changePageUnqualif(-getAppliesUnqualifPageLimit(), instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-step-backward"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="Previous"
                                                            :disabled="loading || appliesUnqualifPage < 2"
                                                            @click="changePageUnqualif(-1, instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-chevron-left"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="Next"
                                                            :disabled="loading || appliesUnqualifPage >= getAppliesUnqualifPageLimit()"
                                                            @click="changePageUnqualif(1, instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-chevron-right"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="Last"
                                                            :disabled="loading || appliesUnqualifPage >= getAppliesUnqualifPageLimit()"
                                                            @click="changePageUnqualif(getAppliesUnqualifPageLimit(), instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-step-forward"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <div class="dropdown">
                                                        <button class="btn btn-default btn-sm dropdown-toggle"
                                                                type="button"
                                                                id="apply-filter-u" data-toggle="dropdown"
                                                                title="Filtering applies"
                                                                aria-haspopup="true" aria-expanded="true">
                                                            <span v-html="filters[selectedFilterOrderU]"></span>
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="apply-filter-u">
                                                            <li v-for="(filterLabel, filterKey) in filters"
                                                                :class="{active: filterKey == selectedFilterOrderU}"><a
                                                                        href="#" v-html="filterLabel"
                                                                        @click.prevent="orderU(instance.idDafInstance, filterKey)"></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="input-group search-group b-margin">
                                            <input v-model.lazy="filterApplyU"
                                                   @keyup.enter="filteringApplyU(instance.idDafInstance)" type="search"
                                                   class="form-control input-sm" placeholder="Search"
                                                   aria-controls="search-table">
                                            <div class="input-group-addon"><span class="glyphicon glyphicon-search"
                                                                                 aria-hidden="true"></span></div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-sm btn-default" type="button" aria-expanded="false"
                                                aria-controls="advancedSearchU"
                                                @click="slideToggle(instance.idDafInstance)">
                                            Advanced Search
                                        </button>
                                    </div>
                                </div>
                                <div :id="'advancedSearchU' + instance.idDafInstance" style="display: none;">
                                    <div class="well">
                                        <div class="row"
                                             @keyup.enter="getAppliesInstance(instance.idDafInstance, true)">
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Job ID</label> <i class="glyphicon glyphicon-info-sign" title="Separate each values with a coma for a multiple research on this field"></i><input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].idExt">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Job Title</label> <i class="glyphicon glyphicon-info-sign" title="Separate each values with a coma for a multiple research on this field"></i><input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].title">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Job Location</label> <i class="glyphicon glyphicon-info-sign" title="Separate each values with a coma for a multiple research on this field"></i><input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].location">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Candidate Name</label> <input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].name"></div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Candidate Email</label> <input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].email">
                                                </div>
                                            </div>

                                            <div v-for="customField in instance.customFields" class="col-sm-4">
                                                <div class="form-group">
                                                    <label><% customField.name %></label>
                                                    <input v-if="customField.type=='text'" id="typeFields"
                                                            class="form-control input-sm" type="text"
                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">

                                                    <input v-if="customField.type=='date'" id="typeFields"
                                                            class="form-control input-sm" type="date"
                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">

                                                    <div>
                                                        <input v-if="customField.type=='checkbox'" id="typeFields"
                                                                class="input-sm" type="checkbox"
                                                               v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" true-value="customField.name" false-value="">
                                                    </div>

                                                    <div v-if="customField.type=='radio'" class="text-right">
                                                        <div>
                                                            <span class="control-label col-sm-6">Pas de valeur: </span>
                                                            <span class="control-label col-sm-6 text-left"><input
                                                                        class="input-sm"  type="radio"
                                                                        :name="customField.name.replace(/\s/g, '_')+'_U'"
                                                                        :checked="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]==''"
                                                                        v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" value=""></span>
                                                        </div>
                                                        <div v-for="value in customField.listValues">
                                                            <span class="control-label col-sm-6"><% value.name %>: </span>
                                                            <span class="col-sm-6 text-left">
                                                                    <input class="input-sm"
                                                                           type="radio"
                                                                           :name="customField.name.replace(/\s/g, '_')+'_U'"
                                                                           :checked="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]==value.code"
                                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" v-bind:value="value.code">
                                                                </span>
                                                        </div>
                                                    </div>

                                                    <div v-if="customField.type=='multicheckboxes'" class="text-right">

                                                        <div v-for="value in customField.listValues">
                                                            <span class="control-label col-sm-6"><% value.name %>: </span>
                                                            <span class="col-sm-6 text-left">
                                                                    <input class="input-sm checkbox"

                                                                           type="checkbox"
                                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" v-bind:value="value.name">
                                                                </span>
                                                        </div>
                                                    </div>

                                                    <input v-if="customField.type=='slider'"
                                                           class="form-control input-sm" id="typeFields"
                                                            min="1" max="5" type="range"
                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">


                                                    <select v-if="customField.type=='list'" class="form-control"
                                                            id="typeFields"
                                                            v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">
                                                        <option value=""></option>
                                                        <option v-for="value in customField.listValues"
                                                                :value="value.code"><% value.name %>
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <button class="btn btn-default"
                                                        @click="resetAdvancedSearch(instance.idDafInstance)">Reset
                                                </button>
                                                <button class="btn btn-primary"
                                                        @click="getAppliesInstance(instance.idDafInstance, true)">Search
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="overflow-y: auto;" class="apply">
                                    <div v-if="unqualifAppliesInstance.length < 1" class='alert-danger text-center'>No
                                        result
                                    </div>
                                    <div v-for="(apply, j) in unqualifAppliesInstance" class="b-margin applyDaf">
                                        <div class="col-sm-7">
                                            <b style="border-right: 1px solid lightgray; padding-right: 1%"><%
                                                apply.name %></b>
                                            <span v-if="apply.jobName">
                                                Applied job :
                                                <a :href="apply.jobLink" target="_blank">
                                                    <% apply.jobName %>
                                                </a>
                                            </span>
                                            <span v-else>
                                                <b><i>Archived job</i></b>
                                            </span>
                                            <br>
                                            <ul class="t-margin" style="list-style: none; padding-inline-start: 0;">
                                                <li>
                                                    <i class="glyphicon glyphicon-phone"></i> <% apply.phone %>
                                                </li>
                                                <li>
                                                    <i class="glyphicon glyphicon-envelope"></i> <% apply.email %>
                                                </li>
                                                <li>
                                                    <i class="glyphicon glyphicon-calendar"></i> <% apply.date %>
                                                </li>
                                                <li>
                                                    <i class="glyphicon glyphicon-globe"></i> <span
                                                            v-if="apply.city !== null"> <% apply.city %></span><span
                                                            v-else> <% apply.state %></span>
                                                </li>
                                                <li v-if="countAppliesByUser[apply.email]-1 > 0">
                                                    <i class="glyphicon glyphicon-comment"></i>
                                                    <a class="other-apply" href="#" @click="modalOtherApplies(apply)"><% countAppliesByUser[apply.email]-1 %> Other Applies </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-2">
                                            <canvas style="margin: 0 auto" name="scoreCanvas" :data-score="apply.score"
                                                    :data-leftscore="100 - apply.score" height="75" width="150"
                                                    title="Relevance is based on a semantic study between the job and the resume"></canvas>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="col-sm-12 b-margin" style="padding: 0">
                                                <button title="Cancel this apply" @click="modalCancel('U_T', j)"
                                                        type="button" class="cancelBtn">
                                                    <i class="glyphicon glyphicon-remove-sign"></i>
                                                </button>
                                                <button title="Qualify this apply" @click="modalUtoQ('U_Q', j)"
                                                        type="button" class="qualifBtn">
                                                    <i class="glyphicon glyphicon-thumbs-up"></i>
                                                </button>
                                            </div>
                                            <div class="col-sm-12" style="padding: 0">
                                                <button title="Show more infos"
                                                        @click="modalInfos(j, apply.id, apply.idDafInstance, apply.ext, 'U')"
                                                        type="button" class="btn btn-primary" style="width: 100%;">
                                                    Show infos
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade in" :id="'hired_' + i">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="btn-group btn-group-justified" role="group">
                                            <div class="btn-group btn-group-sm">
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default"><%
                                                        hiredAppliesInstance.length %> applies
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default">Page <%
                                                        appliesHiredPage %> / <% getAppliesHiredPageLimit() %>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="First"
                                                            :disabled="loading || appliesQualifPage < 2"
                                                            @click="changePageHire(-getAppliesHiredPageLimit(), instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-step-backward"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="Previous"
                                                            :disabled="loading || appliesQualifPage < 2"
                                                            @click="changePageHire(-1, instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-chevron-left"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="Next"
                                                            :disabled="loading || appliesQualifPage >= getAppliesHiredPageLimit()"
                                                            @click="changePageHire(1, instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-chevron-right"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-default" title="Last"
                                                            :disabled="loading || appliesQualifPage >= getAppliesHiredPageLimit()"
                                                            @click="changePageHire(getAppliesHiredPageLimit(), instance.idDafInstance)">
                                                        <span class="glyphicon glyphicon-step-forward"
                                                              aria-hidden="true"></span>
                                                    </button>
                                                </div>
                                                <div class="btn-group btn-group-sm">
                                                    <div class="dropdown">
                                                        <button class="btn btn-default btn-sm dropdown-toggle"
                                                                type="button"
                                                                id="apply-filter-q" data-toggle="dropdown"
                                                                title="Filtering applies"
                                                                aria-haspopup="true" aria-expanded="true">
                                                            <span v-html="filters[selectedFilterOrderH]"></span>
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="apply-filter-q">
                                                            <li v-for="(filterLabel, filterKey) in filters"
                                                                :class="{active: filterKey == selectedFilterOrderH}"><a
                                                                        href="#" v-html="filterLabel"
                                                                        @click.prevent="orderH(instance.idDafInstance, filterKey)"></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="input-group search-group b-margin">
                                            <input v-model.lazy="filterApplyH"
                                                   @keyup.enter="filteringApplyH(instance.idDafInstance)" type="search"
                                                   class="form-control input-sm" placeholder="Search"
                                                   aria-controls="search-table">
                                            <div class="input-group-addon"><span class="glyphicon glyphicon-search"
                                                                                 aria-hidden="true"></span></div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-sm btn-default" type="button" aria-expanded="false"
                                                aria-controls="advancedSearchH"
                                                @click="slideToggle(instance.idDafInstance)">
                                            Advanced Search
                                        </button>
                                    </div>
                                </div>
                                <div :id="'advancedSearchH' + instance.idDafInstance" style="display: none;">
                                    <div class="well">
                                        <div class="row"
                                             @keyup.enter="getAppliesInstance(instance.idDafInstance, true)">
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Job ID</label> <i class="glyphicon glyphicon-info-sign" title="Separate each values with a coma for a multiple research on this field"></i><input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].idExt">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Job Title</label> <i class="glyphicon glyphicon-info-sign" title="Separate each values with a coma for a multiple research on this field"></i><input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].title">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Job Location</label> <i class="glyphicon glyphicon-info-sign" title="Separate each values with a coma for a multiple research on this field"></i><input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].location">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Candidate Name</label> <input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].name"></div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group"><label>Candidate Email</label> <input
                                                            class="form-control input-sm" type="text"
                                                            v-model="advancedSearch[instance.idDafInstance].email">
                                                </div>
                                            </div>
                                            <div v-for="customField in instance.customFields" class="col-sm-4">
                                                <div class="form-group">
                                                    <label><% customField.name %></label>
                                                    <input v-if="customField.type=='text'" id="typeFields"
                                                            class="form-control input-sm" type="text"
                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">

                                                    <input v-if="customField.type=='date'" id="typeFields"
                                                            class="form-control input-sm" type="date"
                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">

                                                    <div>
                                                        <input v-if="customField.type=='checkbox'" id="typeFields"
                                                                class="input-sm" type="checkbox"
                                                               v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" true-value="customField.name" false-value="">
                                                    </div>

                                                    <div v-if="customField.type=='radio'" class="text-right">
                                                        <div>
                                                            <span class="control-label col-sm-6">Pas de valeur: </span>
                                                            <span class="control-label col-sm-6 text-left"><input
                                                                        class="input-sm"  type="radio"
                                                                        :checked="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]==''"
                                                                        :name="customField.name.replace(/\s/g, '_')+'_H'"
                                                                        v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" value=""></span>
                                                        </div>
                                                        <div v-for="value in customField.listValues">
                                                            <span class="control-label col-sm-6"><% value.name %>: </span>
                                                            <span class="col-sm-6 text-left">
                                                                    <input class="input-sm"
                                                                           type="radio"
                                                                           :name="customField.name.replace(/\s/g, '_')+'_H'"
                                                                           :checked="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]==value.code"
                                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" v-bind:value="value.code">
                                                                </span>
                                                        </div>
                                                    </div>

                                                    <div v-if="customField.type=='multicheckboxes'" class="text-right">

                                                        <div v-for="value in customField.listValues">
                                                            <span class="control-label col-sm-6"><% value.name %>: </span>
                                                            <span class="col-sm-6 text-left">
                                                                    <input class="input-sm checkbox"
                                                                           type="checkbox"
                                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]" v-bind:value="value.name">
                                                                </span>
                                                        </div>
                                                    </div>

                                                    <input v-if="customField.type=='slider'"
                                                           class="form-control input-sm" id="typeFields"
                                                            min="1" max="5" type="range"
                                                           v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">


                                                    <select v-if="customField.type=='list'" class="form-control"
                                                            id="typeFields"
                                                            v-model="advancedSearch[instance.idDafInstance].customFields[customField.name.replace(/\s/g, '_')]">
                                                        <option value=""></option>
                                                        <option v-for="value in customField.listValues"
                                                                :value="value.code"><% value.name %>
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <button class="btn btn-default"
                                                        @click="resetAdvancedSearch(instance.idDafInstance)">Reset
                                                </button>
                                                <button class="btn btn-primary"
                                                        @click="getAppliesInstance(instance.idDafInstance, true)">Search
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="overflow-y: auto;" class="apply">
                                    <div v-if="hiredAppliesInstance.length < 1" class='alert-danger text-center'>No
                                        result
                                    </div>
                                    <div v-for="(apply, j) in hiredAppliesInstance" class="b-margin applyDaf">
                                        <div class="col-sm-7">
                                            <b style="border-right: 1px solid lightgray; padding-right: 1%"><%
                                                apply.name%></b>
                                            <span v-if="apply.jobName">
                                                Applied job :
                                                <a :href="apply.jobLink" target="_blank">
                                                    <% apply.jobName %>
                                                </a>
                                            </span>
                                            <span v-else>
                                                <b><i>Archived job</i></b>
                                            </span>
                                            <br>
                                            <ul class="t-margin" style="list-style: none; padding-inline-start: 0;">
                                                <li>
                                                    <i class="glyphicon glyphicon-phone"></i> <% apply.phone %>
                                                </li>
                                                <li>
                                                    <i class="glyphicon glyphicon-envelope"></i> <% apply.email %>
                                                </li>
                                                <li>
                                                    <i class="glyphicon glyphicon-calendar"></i> <% apply.date %>
                                                </li>
                                                <li>
                                                    <i class="glyphicon glyphicon-globe"></i> <span
                                                            v-if="apply.city !== null"> <% apply.city %></span><span
                                                            v-else> <% apply.state %></span>
                                                </li>
                                                <li v-if="countAppliesByUser[apply.email]-1 > 0">
                                                    <i class="glyphicon glyphicon-comment"></i>
                                                    <a class="other-apply" href="#" @click="modalOtherApplies(apply)"><% countAppliesByUser[apply.email]-1 %> Other Applies </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-2">
                                            <canvas style="margin: 0 auto" name="scoreCanvas" :data-score="apply.score"
                                                    :data-leftscore="100 - apply.score" height="75" width="150"
                                                    title="Relevance is based on a semantic study between the job and the resume"></canvas>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="col-sm-12 b-margin" style="padding: 0">
                                                <button title="Return to qualify" @click="showModal('H_Q', j)"
                                                        type="button" class="unqualifBtn">
                                                    <i class="glyphicon glyphicon-thumbs-down"></i>
                                                </button>
                                            </div>
                                            <div class="col-sm-12" style="padding: 0">
                                                <button title="Show more infos"
                                                        @click="modalInfos(j, apply.id, apply.idDafInstance, apply.ext, 'Q')"
                                                        type="button" class="btn btn-primary" style="width: 100%;">
                                                    Show infos
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>

        <div class="modal fade" id="infoApply" tabindex="-1" role="dialog" aria-labelledby="iApply"
             style="overflow: auto">
            <span class="previousArrow" v-show="arrowNavPrev">
                <a href="#"
                   @click="navigateApply(objectApply - 1, qualifNextPrevious, infoApply.idDafInstance, $event)"><i
                            class="previousApply glyphicon glyphicon-chevron-left"></i></a>
            </span>
            <span class="nextArrow" v-show="arrowNavNext">
                <a href="#"
                   @click="navigateApply(objectApply + 1, qualifNextPrevious, infoApply.idDafInstance, $event)"><i
                            class="nextApply glyphicon glyphicon-chevron-right"></i></a>
            </span>
            <div class="modal-dialog" :class="{'withCv' : infoApply.cv, 'withoutCv' : infoApply.cv === null}"
                 role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-iApply">
                        <div :class="{'col-sm-6' : infoApply.cv, 'col-sm-12' : infoApply.cv === null}"
                             style="overflow-y: auto; height: 700px;">
                            <p style="text-align: center; font-size: 2rem;">
                                <b><% infoApply.name %></b>
                                <a class="btn btn-xs btn-primary" type="button" v-if="infoApply.download"
                                   :href="infoApply.download"
                                   title="Download resume">
                                    <i class="glyphicon glyphicon-download-alt"></i>
                                </a>
                                <button class="btn btn-xs btn-primary" type="button"
                                        @click="showLogQualif(infoApply)">
                                    <i class="glyphicon glyphicon-time"></i>
                                </button>
                            </p>
                            <span v-if="infoApply.jobName">
                                <p class="t-margin" style="text-align: center; font-size: 2rem;">Applied Job: <a
                                            :href="infoApply.jobLink"><% infoApply.jobName %></a></p>
                            </span>
                            <span v-else>
                                <p class="t-margin" style="text-align: center; font-size: 2rem;"><b><i>Archived job</i></b></p>
                            </span>
                            <div style="text-align: center;" class="t-margin" v-if="infoApply.qualif == null">
                                <button title="Qualify this apply"
                                        @click="showModal('T_Q', objectApply)"
                                        type="button" class="qualifBtn">
                                    <i class="glyphicon glyphicon-thumbs-up"></i>
                                </button>
                                <button title="Unqualify this apply" @click="showModal('T_U', objectApply)"
                                        type="button" class="unqualifBtn">
                                    <i class="glyphicon glyphicon-thumbs-down"></i>
                                </button>
                            </div>
                            <div style="text-align: center;" class="t-margin" v-else-if="infoApply.qualif == 1">
                                <button title="Cancel this apply" @click="modalCancel('Q_T', objectApply)" type="button"
                                        class="cancelBtn">
                                    <i class="glyphicon glyphicon-remove-sign"></i>
                                </button>
                                <button title="Unqualify this apply" @click="showModal('Q_U', objectApply)"
                                        type="button" class="unqualifBtn">
                                    <i class="glyphicon glyphicon-thumbs-down"></i>
                                </button>
                            </div>
                            <div style="text-align: center;" class="t-margin" v-else-if="infoApply.qualif == 0">
                                <button title="Cancel this apply" @click="modalCancel('U_T', objectApply)" type="button"
                                        class="cancelBtn">
                                    <i class="glyphicon glyphicon-remove-sign"></i>
                                </button>
                                <button title="Qualify this apply" @click="modalUtoQ('U_Q', objectApply)" type="button"
                                        class="qualifBtn">
                                    <i class="glyphicon glyphicon-thumbs-up"></i>
                                </button>
                            </div>
                            <span v-if="infoApply.customData">
                                <h3 style="text-align: center" class="t-margin b-margin">Additional Fields</h3>
                                <table class="table-bordered table table-responsive table-striped table-hover">
                                    <thead>
                                    <tr>
                                        <th style="text-align: center">Desired Qualifications</th>
                                        <th style="text-align: center">Candidate's Qualifications</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(custom, i) in infoApply.customData">
                                        <td><% i %></td>
                                        <td><% custom %></td>
                                    </tr>
                                    </tbody>
                                </table>
                                <hr>
                            </span>
                            <h3 style="text-align: center" class="t-margin b-margin">Additional Informations</h3>
                            <p v-html="infoApply.info"></p>
                        </div>
                        <div class="col-sm-6" v-if="infoApply.cv">
                            <iframe v-if="infoApply.linkPdf" :src="infoApply.linkPdf"
                                    style="width: 100%; height: 700px;" frameborder="0"></iframe>
                            <iframe v-else-if="infoApply.linkDoc" :src='infoApply.linkDoc'
                                    style="width: 100%; height: 700px;"
                                    frameborder='0'></iframe>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="logQualifModal" tabindex="-1" role="dialog" aria-labelledby="logReason">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h5 class="modal-title" id="logReason">Historic qualified/unqualified/hired</h5>
                    </div>
                    <div class="modal-body modal-logReason">
                        <table class="table-bordered table table-responsive table-striped table-hover">
                            <tr>
                                <td>User</td>
                                <td>Date</td>
                                <td>Qualification</td>
                                <td>Reasons</td>
                                <td>More Infos</td>
                            </tr>
                            <tr v-for="reason in reasons">
                                <td><% reason.username %></td>
                                <td><% reason.reasonDate %></td>
                                <td v-if="reason.qualif == null">To Qualify</td>
                                <td v-if="reason.qualif == 0">Unqualified</td>
                                <td v-if="reason.qualif == 1">Qualified</td>
                                <td v-if="reason.qualif == 2">Hired</td>
                                <td>
                                    <ul v-for="one in reason.reasons">
                                        <li><% one %></li>
                                    </ul>
                                </td>
                                <td><% reason.explainReasons %></td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="qualifModal" tabindex="-1" role="dialog" aria-labelledby="qualif">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h5 class="modal-title" id="qualif"><% qualifiedModal.name %></h5>
                    </div>
                    <div class="modal-body modal-qualif">
                        <h5>Give us one or more reason(s)</h5>
                        <div v-for="(qualif, i) in dafReasons" v-if="qualif.qualified==1">
                            <checkbox v-model="selectedReasons" :val="qualif" :id="'qualifReason'+i"></checkbox>
                            <label :for="'qualifReason'+i"><% qualif.reason %></label>
                        </div>
                        <h5>Need to add something ?</h5>
                        <div>
                            <textarea class="explain-reasons" v-model="explainReasons"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="applyIsUnqualified"
                                @click="qualifApply('Q_' + qualifiedModal.idQualif, qualifiedModal.idDafInstance, qualifiedModal.name, qualifiedModal.email, qualifiedModal.qualif, qualifiedIndex, selectedReasons, explainReasons)">
                            Validate
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="unqualifiedApply" tabindex="-1" role="dialog" aria-labelledby="unqualified">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        <h5 class="modal-title" id="unqualified"><% unqualifiedModal.name %></h5>
                    </div>
                    <div class="modal-body modal-unqualified">
                        <div class="alert alert-warning" v-if="!isMail"><p>No email will be sent.</p>
                            <p>You have not yet configured a message to send to unqualified candidates.</p></div>
                        <h4>Are you sure you want to unqualify this apply?</h4>
                        <h5>Give us one or more reason(s)</h5>
                        <div v-for="(unqualif, i) in dafReasons" v-if="unqualif.qualified==0">
                            <checkbox v-model="selectedReasons" :val="unqualif" :id="'unqualifReason'+i"></checkbox>
                            <label :for="'unqualifReason'+i"><% unqualif.reason %></label>
                        </div>
                        <h5>Need to add something ?</h5>
                        <div>
                            <textarea class="explain-reasons" v-model="explainReasons"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="applyIsUnqualified"
                                @click="qualifApply('U_' + unqualifiedModal.idQualif, unqualifiedModal.idDafInstance, unqualifiedModal.name, unqualifiedModal.email, unqualifiedModal.qualif, unqualifiedIndex, selectedReasons, explainReasons)">
                            Validate
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="unqualifiedToQualified" tabindex="-1" role="dialog" aria-labelledby="UtoQ"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        <h5 class="modal-title" id="UtoQ"><% UtoQ.name %></h5>
                    </div>
                    <div class="modal-body modal-UtoQ">
                        <h4>This candidate has been classified into unqualified apply.</h4>
                        <h4>Are you sure you want to change it into qualified apply?</h4>
                        <h5>Give us one or more reason(s)</h5>
                        <div v-for="(qualif, i) in dafReasons" v-if="qualif.qualified==1">
                            <checkbox v-model="selectedReasons" :val="qualif" :id="'qualifReason'+i"></checkbox>
                            <label :for="'qualifReason'+i"><% qualif.reason %></label>
                        </div>
                        <h5>Need to add something ?</h5>
                        <div>
                            <textarea class="explain-reasons" v-model="explainReasons"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="UtoQSubmit"
                                @click="qualifApply('Q_' + UtoQ.idQualif, UtoQ.idDafInstance, UtoQ.name, UtoQ.email, UtoQ.qualif, qualifiedIndex, selectedReasons, explainReasons)">
                            Validate
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="hireModal" tabindex="-1" role="dialog" aria-labelledby="QtoH"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        <h5 class="modal-title" id="QtoH"><% QtoH.name %></h5>
                    </div>
                    <div class="modal-body modal-hire">
                        <h4>Are you sure you want to change it into hired apply?</h4>
                        <h5>Give us one or more reason(s)</h5>
                        <div v-for="(qualif, i) in dafReasons" v-if="qualif.qualified==2">
                            <checkbox v-model="selectedReasons" :val="qualif" :id="'qualifReason'+i"></checkbox>
                            <label :for="'qualifReason'+i"><% qualif.reason %></label>
                        </div>
                        <h5>Need to add something about this hire ?</h5>
                        <div>
                            <textarea class="explain-reasons" v-model="explainReasons"></textarea>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="QtoHSubmit"
                                @click="qualifApply('H_' + QtoH.idQualif, QtoH.idDafInstance, QtoH.name, QtoH.email, QtoH.qualif, qualifiedIndex, selectedReasons, explainReasons)">
                            Validate
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="cancelApply" tabindex="-1" role="dialog" aria-labelledby="cApply"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        <h5 class="modal-title" id="cApply"><% cancelApply.name %></h5>
                    </div>
                    <div class="modal-body modal-cApply">
                        <span v-if="cancelApply.qualif == 1">
                            <p>This candidate has been classified into qualified apply.</p>
                            <p>Are you sure you want to cancel your choice?</p>
                        </span>
                        <span v-else-if="cancelApply.qualif == 0">
                            <p>This candidate has been classified into unqualified apply.</p>
                            <p>Are you sure you want to cancel you choice?</p>
                        </span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="cApplySubmit"
                                @click="qualifApply('C_' + cancelApply.idQualif, cancelApply.idDafInstance, cancelApply.name, cancelApply.email, null, cancelApplyIndex, selectedReasons, explainReasons)">
                            Validate
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="exportApplies" tabindex="-1" role="dialog" aria-labelledby="eApplies"
             aria-hidden="true">
            <div class="modal-dialog" role="document" style="width: 60%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        <h5 class="modal-title" id="eApplies">Campaign <% exportApplies.nameInstance %></h5>
                    </div>
                    <div class="modal-body modal-eApplies">
                        <div class="container-fluid">
                            <div class="export-csv">
                                <form method="post" id="exportCsv" action="{{ path('self_daf_export_applies') }}">
                                    <fieldset>
                                        <legend>Export applies (CSV or ZIP)</legend>
                                        <input type="hidden" name="export-id-daf" :value="exportApplies.idDafInstance">
                                        <div class="form-group">
                                            <label for="export-start-date">Start Date</label>
                                            <div class="specific-period">
                                                <div class="input-group date">
                                                    <input type="text" id="export-start-date" name="export-start-date"
                                                           class="form-control input-sm"
                                                           placeholder="Start Date" title="Specific Start Date"><span
                                                            class="input-group-addon"><i
                                                                class="glyphicon glyphicon-calendar"></i></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="export-end-date">End Date</label>
                                            <div class="specific-period">
                                                <div class="input-group date">
                                                    <input type="text" id="export-end-date" name="export-end-date"
                                                           class="form-control input-sm"
                                                           placeholder="End Date" title="Specific End Date"><span
                                                            class="input-group-addon"><i
                                                                class="glyphicon glyphicon-calendar"></i></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="exportFile">Export file type</label>
                                            <select name="exportFile" id="exportFile" class="form-control input-sm">
                                                <option value="csv">CSV File</option>
                                                <option value="zipCv">ZIP Archive CV</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="typeExport">Type export</label>
                                            <select name="typeExport" id="typeExport" class="form-control input-sm">
                                                <option value="all">All applies</option>
                                                <option value="TQ">To qualify applies</option>
                                                <option value="Q">Qualified applies</option>
                                                <option value="U">Unqualified applies</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="advancedSearchCheckbox">Use advanced search criteria</label>
                                            <input name="isASactive" type="checkbox" id="advancedSearchCheckbox"
                                                   style="display: inline-block">
                                        </div>
                                        <button type="button" @click="exportData" id="submitExportCsv"
                                                class="btn btn-primary float-right">Export
                                        </button>
                                    </fieldset>
                                    <input type="hidden" :value="advancedSearchExport" name="advancedSearchExport">
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <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">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        <h5 class="modal-title">Other applies for : <strong><% oneApply.name %></strong></h5>
                    </div>
                    <div class="modal-body modal-other-apply">
                        <div v-for="apply in appliesAllApply" >
                            <div v-if="oneApply.email == apply.email && (oneApply.id != apply.id || apply.jobName === null)" class="b-margin applyDaf">
                                <div class="col-sm-6">
                                    <b style="border-right: 1px solid lightgray; padding-right: 1%"><%
                                        apply.name %></b>
                                    <span v-if="apply.jobName">
                                        <a :href="apply.jobLink" target="_blank">
                                            <% apply.jobName %>
                                        </a>
                                        <br>
                                        <b style="visibility: hidden; padding-right: 1%;"><% apply.name %></b>
                                        <span v-if="apply.city"> <% apply.city %></span><span
                                                v-else-if="apply.state"> <% apply.state %></span><span v-else> <% apply.region %></span>
                                    </span>
                                    <span v-else>
                                        <b>Archived job</b>
                                    </span>
                                    <br>
                                    <ul class="t-margin" style="list-style: none; padding-inline-start: 0;">
                                        <li v-if="apply.phone">
                                            <i class="glyphicon glyphicon-phone"></i> <% apply.phone %>
                                        </li>
                                        <li>
                                            <i class="glyphicon glyphicon-envelope"></i> <% apply.email %>
                                        </li>
                                        <li>
                                            <i class="glyphicon glyphicon-calendar"></i> <% apply.date %>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-sm-2" style="text-align: center">
                                        <span v-if="instance.scoring">
                                            <div v-if="apply.score !== null">
                                                <canvas name="scoreCanvas" :data-score="apply.score"
                                                        :data-leftscore="100 - apply.score" height="75"
                                                        width="75"
                                                        title="Relevance is based on a semantic study between the job and the resume"></canvas>
                                                <p style="margin: 0;">Relevance</p>
                                            </div>
                                        </span>
                                </div>
                                <div class="col-sm-2" style="text-align: center">

                                                <span v-if="instance.geoDistance">
                                                    <div v-if="Number.isInteger(apply.geoDistance)">
                                                        <span v-if="apply.geoDistance < 10"
                                                              title="Distance less than 10km">
                                                            <i class="glyphicon glyphicon-map-marker sizeIcon"
                                                               style="color: limegreen"></i>
                                                            <p>Very close</p>
                                                        </span>
                                                        <span v-else-if="(apply.geoDistance >= 10 && apply.geoDistance <= 30)"
                                                              title="Distance between 10 and 30km">
                                                            <i class="glyphicon glyphicon-map-marker sizeIcon"
                                                               style="color: greenyellow;"></i>
                                                            <p>Close</p>
                                                        </span>
                                                        <span v-else-if="(apply.geoDistance > 30 && apply.geoDistance <= 50)"
                                                              title="Distance between 30 and 50km">
                                                            <i class="glyphicon glyphicon-map-marker sizeIcon"
                                                               style="color: gold;"></i>
                                                            <p>Far</p>
                                                        </span>
                                                        <span v-else-if="(apply.geoDistance > 50 && apply.geoDistance <= 100)"
                                                              title="Distance between 50 and 100km">
                                                            <i class="glyphicon glyphicon-map-marker sizeIcon"
                                                               style="color: orange"></i>
                                                            <p>Very far</p>
                                                        </span>
                                                        <span v-else-if="(apply.geoDistance > 100 && apply.geoDistance <= 1000)"
                                                              title="Distance between 100 and 1000km">
                                                            <i class="glyphicon glyphicon-map-marker sizeIcon"
                                                               style="color: orangered"></i>
                                                            <p>Out of area</p>
                                                        </span>
                                                        <span v-else-if="apply.geoDistance > 1000"
                                                              title="Distance greater than 1000km">
                                                            <i class="glyphicon glyphicon-map-marker sizeIcon"
                                                               style="color: red"></i>
                                                            <p>Out of country</p>
                                                        </span>
                                                    </div>
                                                </span>
                                </div>
                                <div class="col-sm-2">
                                    <div class="col-sm-12 b-margin" style="padding: 0">
                                        <button title="Qualify this apply"
                                                @click="showModal('T_Q', j)"
                                                type="button" class="qualifBtn">
                                            <i class="glyphicon glyphicon-thumbs-up"></i>
                                        </button>
                                        <button title="Unqualify this apply" @click="showModal('T_U', j)"
                                                type="button" class="unqualifBtn">
                                            <i class="glyphicon glyphicon-thumbs-down"></i>
                                        </button>
                                    </div>
                                    <div class="col-sm-12" style="padding: 0">
                                        <button title="Show more infos"
                                                @click="modalInfos(j, apply.id, apply.idDafInstance, apply.ext, 'TQ')"
                                                type="button" class="btn btn-primary" style="width: 100%;">
                                            Show infos
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">

                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block specificJS %}
    <script>
        $(document).ready(function () {
            $('#infoApply').on('hidden.bs.modal', function () {
                var instance = app.idDafInstance;
                var id = app.idApply;
                var userId = {{ app.user.id }};
                app.infoApply = '';
                app.modalInfo = false;
                $('html').css("overflow", "visible");
                $.ajax({
                    url: "{{ path('delete_tmp_file') }}",
                    method: "POST",
                    data: {id: id, instance: instance, userId: userId}
                });
            });

            $('#exportApplies').on('hidden.bs.modal', function () {
                $('#export-start-date').val("");
                $('#export-end-date').val("");
                if (document.getElementsByClassName('export-message') !== null) $('.export-message').remove();
                $('#export-start-date-cv').val("");
                $('#export-end-date-cv').val("");
                if (document.getElementsByClassName('export-message-cv') !== null) $('.export-message-cv').remove();
            });

            $('#submitExportCsv').on('click', function () {
                if (document.getElementsByClassName('export-error') !== null) $('.export-message').remove();
                if ($('#export-start-date').val() === "" || $('#export-end-date').val() === "") {
                    $('.export-csv').append("<p class='alert-danger text-center text-danger export-message'>You need to select at least two dates.</p>");
                } else if ($('#export-start-date').val() > $('#export-end-date').val()) {
                    $('.export-csv').append("<p class='alert-danger text-center text-danger export-message'>The end date must be greater than the start date.</p>");
                } else if ($('#export-start-date').val() === "" && $('#export-end-date').val() === "") {
                    $('.export-csv').append("<p class='alert-danger text-center text-danger export-message'>You need to select a start and an end date.</p>");
                }
            });
        });

        var app = new Vue({
            delimiters: ['<%', '%>'],
            el: "#app",
            data: {
                userInstances: [],
                qualifAppliesInstance: [],
                unqualifAppliesInstance: [],
                toQualifAppliesInstance: [],
                hiredAppliesInstance: [],
                unqualifiedModal: [],
                qualifiedModal: [],
                hiredModal:[],
                UtoQ: [],
                QtoH: [],
                cancelApply: [],
                infoApply: [],
                filterApplyTQ: '',
                filterApplyQ: '',
                filterApplyU: '',
                filterApplyH: '',
                idApply: '',
                idDafInstance: '',
                objectApply: '',
                exportApplies: [],
                qualifNextPrevious: '',
                unqualifiedIndex: '',
                qualifiedIndex: '',
                cancelApplyIndex: '',
                hiredIndex: '',
                countAppliesByUser:[],
                loading: false,
                page: 0,
                appliesToQualifPage: 1,
                appliesQualifPage: 1,
                appliesUnqualifPage: 1,
                appliesHiredPage: 1,
                appliesLimit: 100,
                appliesToQualifCount: 0,
                appliesQualifCount: 0,
                appliesUnqualifCount: 0,
                appliesHiredCount: 0,
                appliesUpdated: false,
                instance: '',
                loadingChangePage: false,
                modalInfo: false,
                arrowNavPrev: true,
                arrowNavNext: true,
                navigateDirection: '',
                appliesAllApply : [],
                oneApply : [],
                selectedFilterOrderTQ: 'ddesc',
                selectedFilterOrderQ: 'ddesc',
                selectedFilterOrderU: 'ddesc',
                selectedFilterOrderH: 'ddesc',
                firstTimeLoad: true,
                filters: {
                    "ddesc": "Date <span class=\"glyphicon glyphicon-sort-by-attributes-alt\" aria-hidden=\"true\"></span>",
                    "dasc": "Date <span class=\"glyphicon glyphicon-sort-by-attributes\" aria-hidden=\"true\"></span>",
                    "sdesc": "Score <span class=\"glyphicon glyphicon-sort-by-attributes-alt\" aria-hidden=\"true\"></span>",
                    "sasc": "Score <span class=\"glyphicon glyphicon-sort-by-attributes\" aria-hidden=\"true\"></span>"
                },
                advancedSearch: {},
                advancedSearchExport: null,
                selectedReasons: [],
                explainReasons:'',
                dafReasons: {{ dafReasons|json_encode|raw }},
                reasons: [],
                infos: [],
                isMailAllInstance: null,
                isMail: null
            },
            components: {
                checkbox: {
                    template: `<input type="checkbox" :value="val" v-model="checked" @change="onChangeReasons" />`,
                    props: ['value', 'val'],
                    data: function () {
                        return {
                            checkedProxy: false
                        }
                    },
                    computed: {
                        checked: {
                            get: function () {
                                return this.value
                            },
                            set: function (val) {
                                this.checkedProxy = val
                            }
                        }
                    },
                    methods: {
                        onChangeReasons: function (e) {
                            this.$emit('input', this.checkedProxy)
                        }
                    }
                }
            },
            mounted: function () {
                var self = this;
                this.getUserInstances();

                $('input[name=export-start-date]').datepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    maxViewMode: 2,
                    language: 'en'
                });

                $('input[name=export-end-date]').datepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    maxViewMode: 2,
                    language: 'en'
                });

                $('input[name=export-start-date-cv]').datepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    maxViewMode: 2,
                    language: 'en'
                });

                $('input[name=export-end-date-cv]').datepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    maxViewMode: 2,
                    language: 'en'
                });
            },
            updated: function () {
                if (this.appliesUpdated) {
                    this.appliesUpdated = false;
                    this.chart();
                }
                if (this.loadingChangePage) {
                    this.loadingChangePage = false;
                    if (this.navigateDirection === "next") {
                        this.navigateApply(0, this.qualifNextPrevious, this.instance);
                    } else if (this.navigateDirection === "prev") {
                        this.navigateApply(99, this.qualifNextPrevious, this.instance);
                    }
                }
            },
            methods: {
                slideToggle: function (i) {
                    this.advancedSearch[i].active = !this.advancedSearch[i].active;
                    if (this.advancedSearch[i].active) {
                        $('#advancedSearchQ' + i).slideDown();
                        $('#advancedSearchU' + i).slideDown();
                        $('#advancedSearchTQ' + i).slideDown();
                        $('#advancedSearchH' + i).slideDown();
                    } else {
                        $('#advancedSearchQ' + i).slideUp();
                        $('#advancedSearchU' + i).slideUp();
                        $('#advancedSearchTQ' + i).slideUp();
                        $('#advancedSearchH' + i).slideUp();
                    }
                },
                resetAdvancedSearch: function (i) {
                    this.advancedSearch[i] = {
                        active: true,
                        name: "",
                        email: "",
                        title: "",
                        location: "",
                        idExt: "",
                        customFields: {}
                    };
                    this.slideToggle(i);
                    this.getAppliesInstance(i);
                },
                getUserInstances: function () {
                    var self = this;
                    $('.loader-container').fadeIn(150);
                    $.ajax({
                        url: "{{ path('ajax_daf_user_instances') }}",
                        method: "POST",
                        data: {advertiserId: {{ advertiser.id }} }
                    }).done(function (data) {
                        for (var i = 0; i < data.userInstances.length; i++) {
                            self.advancedSearch[data.userInstances[i].idDafInstance] = {};
                            self.advancedSearch[data.userInstances[i].idDafInstance] = {
                                active: false,
                                name: "",
                                email: "",
                                title: "",
                                location: "",
                                idExt: "",
                                customFields: {}
                            };
                            if (data.userInstances[i].customFields && data.userInstances[i].customFields.length > 0) {
                                for (var j = 0; j < data.userInstances[i].customFields.length; j++) {
                                    if (data.userInstances[i].customFields[j].type === "htmlContent") continue;
                                    var customField = data.userInstances[i].customFields[j].name.replace(/\s/g, '_');
                                    if (data.userInstances[i].customFields[j]['type']!=="multicheckboxes")
                                        self.advancedSearch[data.userInstances[i].idDafInstance].customFields[customField] = "";
                                    else
                                        self.advancedSearch[data.userInstances[i].idDafInstance].customFields[customField] = [];
                                }
                            }
                        }
                        self.userInstances = data.userInstances;
                        self.isMailAllInstance = data.isMailAllInstance;
                        if (data.userInstances !== null) {
                            self.getAppliesInstance(data.userInstances[0].idDafInstance);
                        }
                    });
                },
                getAppliesInstance: function (id, isAdvanced) {
                    $('.loader-container').fadeIn(150);
                    let checked = $("input[type=radio]:checked");
                    var self = this;
                    self.loading = true;
                    self.instance = id;
                    self.isMail = self.isMailAllInstance[id];
                    isAdvanced = isAdvanced || false;
                    $.ajax({
                        url: "{{ path('ajax_daf_applies_instance') }}",
                        method: "POST",
                        data: {
                            dafInstanceId: id,
                            pageToQualif: self.appliesToQualifPage,
                            pageQualif: self.appliesQualifPage,
                            pageUnqualif: self.appliesUnqualifPage,
                            pageHired: self.appliesHiredPage,
                            filterTQ: (!isAdvanced) ? self.filterApplyTQ : "",
                            filterQ: (!isAdvanced) ? self.filterApplyQ : "",
                            filterU: (!isAdvanced) ? self.filterApplyU : "",
                            filterH: (!isAdvanced) ? self.filterApplyH : "",
                            filterOrderTQ: self.selectedFilterOrderTQ,
                            filterOrderQ: self.selectedFilterOrderQ,
                            filterOrderU: self.selectedFilterOrderU,
                            filterOrderH: self.selectedFilterOrderH,
                            advancedSearch: (isAdvanced) ? self.advancedSearch[id] : null
                        }
                    }).done(function (data) {
                        self.toQualifAppliesInstance = data.appliesToQualif;
                        self.qualifAppliesInstance = data.appliesQualif;
                        self.unqualifAppliesInstance = data.appliesUnqualif;
                        self.hiredAppliesInstance = data.appliesHired;
                        for (var key in data.applyCountByUser){
                            var line = data.applyCountByUser[key];
                            self.countAppliesByUser[line.email]= line.nbApplies;
                        }
                        self.appliesToQualifCount = data.appliesToQualifCount;
                        self.appliesQualifCount = data.appliesQualifCount;
                        self.appliesUnqualifCount = data.appliesUnqualifCount;
                        self.appliesHiredCount = data.appliesHiredCount;
                        $('.toToggle').bootstrapToggle();
                        self.appliesUpdated = true;
                        if (self.modalInfo) {
                            self.loadingChangePage = true;
                        }
                    }).always(function () {
                        $('.loader-container').fadeOut(150);
                        self.loading = false;
                        if (self.firstTimeLoad) {
                            self.firstTimeLoad = false;
                            $('[id^=advancedSearch]').collapse();
                        }
                    });
                },
                exportData: function() {
                    if (document.getElementsByClassName('export-error') !== null) $('.export-message').remove();
                    if ($('#export-start-date').val() === "" || $('#export-end-date').val() === "") {
                        $('.export-csv').append("<p class='alert-danger text-center text-danger export-message'>You need to select at least two dates.</p>");
                    } else if ($('#export-start-date').val() > $('#export-end-date').val()) {
                        $('.export-csv').append("<p class='alert-danger text-center text-danger export-message'>The end date must be greater than the start date.</p>");
                    } else if ($('#export-start-date').val() === "" && $('#export-end-date').val() === "") {
                        $('.export-csv').append("<p class='alert-danger text-center text-danger export-message'>You need to select a start and an end date.</p>");
                    } else {
                        this.advancedSearchExport = JSON.stringify(this.advancedSearch);
                        this.$nextTick(() => {
                            $('#exportCsv').submit();
                        });
                    }
                },
                qualifApply: function (id, instance, name, email, qualif, index, reasons, explainReasons) {

                    if (reasons.length >= 1 || id.substr(0, 1) === 'C') {
                        var self = this;
                        if (qualif !== 'undefined') {
                            if (qualif === null) {
                                self.checkIfNew(id.substr(2), instance, index);
                            }
                        }
                        $('.loader-container').fadeIn(150);
                        $.ajax({
                            url: "{{ path('ajax_daf_qualif_applies') }}",
                            method: "POST",
                            data: {
                                qualifApply: id,
                                dafInstanceId: instance,
                                advertiserId: {{ advertiser.id }},
                                name: name,
                                email: email,
                                reasons: self.selectedReasons,
                                explainReasons: self.explainReasons
                            }
                        }).done(function (data) {
                            if (document.getElementsByClassName('qualif-error') !== null) $('.qualif-message').remove();
                            self.userInstances = data.userInstances;
                            if (data.userInstances !== null) {
                                self.getAppliesInstance(instance);
                            }
                            if (id.substr(0, 1) === 'U') {
                                $('.table-responsive.t-margin').append("<p class='alert-success text-center text-success qualif-message'>The candidate " + name + " has been successfully unqualified!</p>");
                                $('#unqualifiedApply').modal('hide');
                            } else if (id.substr(0, 1) === 'Q') {
                                $('.table-responsive.t-margin').append("<p class='alert-success text-center text-success qualif-message'>The candidate " + name + " has been successfully qualified!</p>");
                                $('#qualifModal').modal('hide');
                                $('#unqualifiedToQualified').modal('hide');
                            } else if (id.substr(0, 1) === 'H') {
                                $('.table-responsive.t-margin').append("<p class='alert-success text-center text-success qualif-message'>The candidate " + name + " has been successfully hired!</p>");
                                $('#qualifModal').modal('hide');
                                $('#hireModal').modal('hide');
                            }else if (id.substr(0, 1) === 'C') {
                                $('#cancelApply').modal('hide');
                            }
                            self.selectedReasons = [];
                        }).always(function () {
                            setTimeout(function () {
                                $('.qualif-message').fadeOut(250);
                            }, 2000);
                            $('.loader-container').fadeOut(250);
                        });
                    } else {
                        if (document.getElementsByClassName('reason-message-error') !== null) $('.reason-message').remove();
                        if (id.substr(0, 1) === "Q") {
                            $('.modal-qualif').append("<p class='alert-danger text-center text-danger reason-message'>You must choose at least one reason!</p>")
                        } else if (id.substr(0, 1) === "U") {
                            $('.modal-unqualified').append("<p class='alert-danger text-center text-danger reason-message'>You must choose at least one reason!</p>")
                        } else if (id.substr(0, 1) === "H"){
                            $('.modal-unqualified').append("<p class='alert-danger text-center text-danger reason-message'>You must choose at least one reason!</p>")
                        }
                    }
                },
                showLogQualif: function (infos) {
                    this.reasons = infos.reasons;
                    $('#logQualifModal').modal('show');
                    $('html').css("overflow", "hidden");
                },
                modalInfos: function (i, id, idDafInstance, ext, q) {
                    var self = this;
                    if (q === "TQ") {
                        this.getArrowNav(i, self.appliesToQualifPage, q);
                    } else if (q === "Q") {
                        this.getArrowNav(i, self.appliesQualifPage, q);
                    } else if (q === "U") {
                        this.getArrowNav(i, self.appliesUnqualifPage, q);
                    } else if (q === "H") {
                        this.getArrowNav(i, self.appliesHiredPage,  q);
                    }
                    if (ext === 'pdf') {
                        this.getApplyPdf(id, idDafInstance, i, q);
                    } else {
                        this.getSingleApplyDoc(id, idDafInstance, i, q);
                    }
                    this.idApply = id;
                    this.idDafInstance = idDafInstance;
                    this.objectApply = i;
                    this.qualifNextPrevious = q;
                    $('#infoApply').modal('show');
                    $('html').css("overflow", "hidden");
                    this.modalInfo = true;
                },
                showModal: function (value, i) {
                    this.selectecReasons = [];
                    if (value === "T_U") {
                        this.unqualifiedModal = this.toQualifAppliesInstance[i];
                        this.unqualifiedIndex = i;
                        $('#unqualifiedApply').modal('show');
                    } else if (value === "Q_U") {
                        this.unqualifiedModal = this.qualifAppliesInstance[i];
                        $('#unqualifiedApply').modal('show');
                    } else if (value === "T_Q") {
                        this.qualifiedModal = this.toQualifAppliesInstance[i];
                        this.qualifiedIndex = i;
                        $('#qualifModal').modal('show');
                    } else if (value === "Q_H") {
                        this.hiredModal = this.qualifAppliesInstance[i];
                        this.hiredIndex = i;
                        $('#hireModal').modal('show');
                    } else if (value === "H_Q") {
                        this.qualifiedModal = this.hiredAppliesInstance[i];
                        this.qualifiedIndex = i;
                        $('#qualifModal').modal('show');
                    }
                    $('#qualifModal').css("overflow", "hidden");
                },
                modalUtoQ: function (value, i) {
                    this.selectecReasons = [];
                    if (value === "U_Q") {
                        this.UtoQ = this.unqualifAppliesInstance[i];
                        this.qualifiedIndex = i;
                    }
                    $('#unqualifiedToQualified').modal('show');
                },
                modalCancel: function (value, i) {
                    this.selectecReasons = [];
                    this.cancelApplyIndex = i;
                    if (value === "Q_T") {
                        this.cancelApply = this.qualifAppliesInstance[i];
                    } else if (value === "U_T") {
                        this.cancelApply = this.unqualifAppliesInstance[i];
                    } else if (value === "H_T") {
                        this.cancelApply = this.hiredAppliesInstance[i];
                    }
                    $('#cancelApply').modal('show');
                },
                modalQtoH: function (value, i) {
                    this.selectecReasons = [];
                    if (value === "Q_H") {
                        this.QtoH = this.qualifAppliesInstance[i];
                        this.hiredIndex = i;
                    }
                    $('#hireModal').modal('show');
                },
                modalOtherApplies: function(apply){
                    var self = this;
                    this.oneApply = apply;
                    $('.loader-container').fadeIn(150);
                    this.loading = true;
                    $.ajax({
                        url: "{{ path('get_all_applies_for_user') }}",
                        method: "POST",
                        data: {
                            email: apply.email,
                            dafInstanceId: this.instance
                        }
                    }).done(function (data) {
                        self.appliesAllApply = data;
                        $('.loader-container').fadeOut(150);
                        self.loading = false;
                        $('#otherApplies').modal('show');
                    });
                },
                showExport: function (i) {
                    this.exportApplies = this.userInstances[i];
                    $('#exportApplies').modal('show');
                },
                getApplyPdf: function (id, instance, i, q) {
                    var self = this;
                    if (q === "TQ") {
                        this.checkIfNew(id, instance, i);
                    }
                    $.ajax({
                        url: "{{ path('ajax_daf_apply_pdf') }}",
                        method: "POST",
                        data: {idApply: id}
                    }).done(function (data) {
                        self.infoApply = data;
                        $('.loader-container').fadeOut(150);
                    });
                },
                getSingleApplyDoc: function (id, instance, i, q) {
                    var self = this;
                    if (q === "TQ") {
                        this.checkIfNew(id, instance, i);
                    }
                    $.ajax({
                        url: "{{ path('ajax_daf_apply_doc') }}",
                        method: "POST",
                        data: {idApply: id}
                    }).done(function (data) {
                        self.infoApply = data;
                        $('.loader-container').fadeOut(150);
                    });
                },
                navigateApply: function (nb, q, instance, e) {
                    var self = this;
                    if (q === "TQ") {
                        this.getArrowNav(nb, self.appliesToQualifPage, q);
                        if (this.toQualifAppliesInstance[nb]) {
                            this.infoApply = '';
                            if (this.toQualifAppliesInstance[nb].ext === "pdf") {
                                this.getApplyPdf(this.toQualifAppliesInstance[nb].id, instance, nb, q);
                            } else {
                                this.getSingleApplyDoc(this.toQualifAppliesInstance[nb].id, instance, nb, q);
                            }
                            this.idApply = this.toQualifAppliesInstance[nb].id;
                            this.idDafInstance = instance;
                            this.objectApply = nb;
                            this.qualifNextPrevious = 'TQ';
                        } else {
                            if (nb === this.toQualifAppliesInstance.length) {
                                this.changePage(1, instance);
                                self.navigateDirection = "next";
                            } else if (nb < 0) {
                                if (this.appliesToQualifPage >= 2) {
                                    this.changePage(-1, instance);
                                    self.navigateDirection = "prev";
                                }
                            }
                        }
                    } else if (q === "Q") {
                        this.getArrowNav(nb, self.appliesQualifPage, q);
                        if (this.qualifAppliesInstance[nb]) {
                            this.infoApply = '';
                            if (this.qualifAppliesInstance[nb].ext === "pdf") {
                                this.getApplyPdf(this.qualifAppliesInstance[nb].id);
                            } else {
                                this.getSingleApplyDoc(this.qualifAppliesInstance[nb].id);
                            }
                            this.idApply = this.qualifAppliesInstance[nb].id;
                            this.idDafInstance = instance;
                            this.objectApply = nb;
                            this.qualifNextPrevious = 'Q';
                        } else {
                            if (nb === this.qualifAppliesInstance.length) {
                                this.changePageQualif(1, instance);
                            } else if (nb === 0) {
                                if (this.appliesQualifPage >= 2) {
                                    this.changePageQualif(-1, instance);
                                }
                            }
                        }
                    } else if (q === "U") {
                        this.getArrowNav(nb, self.appliesUnqualifPage, q);
                        if (this.unqualifAppliesInstance[nb]) {
                            this.infoApply = '';
                            if (this.unqualifAppliesInstance[nb].ext === "pdf") {
                                this.getApplyPdf(this.unqualifAppliesInstance[nb].id);
                            } else {
                                this.getSingleApplyDoc(this.unqualifAppliesInstance[nb].id);
                            }
                            this.idApply = this.unqualifAppliesInstance[nb].id;
                            this.idDafInstance = instance;
                            this.objectApply = nb;
                            this.qualifNextPrevious = 'U';
                        } else {
                            if (nb === this.unqualifAppliesInstance.length) {
                                this.changePageUnqualif(1, instance);
                            } else if (nb === 0) {
                                if (this.appliesUnqualifPage >= 2) {
                                    this.changePageUnqualif(-1, instance);
                                }
                            }
                        }
                    }
                    else if (q === "H") {
                        this.getArrowNav(nb, self.appliesQualifPage, q);
                        if (this.hiredAppliesInstance[nb]) {
                            this.infoApply = '';
                            if (this.qualifAppliesInstance[nb].ext === "pdf") {
                                this.getApplyPdf(this.qualifAppliesInstance[nb].id);
                            } else {
                                this.getSingleApplyDoc(this.qualifAppliesInstance[nb].id);
                            }
                            this.idApply = this.qualifAppliesInstance[nb].id;
                            this.idDafInstance = instance;
                            this.objectApply = nb;
                            this.qualifNextPrevious = 'Q';
                        } else {
                            if (nb === this.hiredAppliesInstance.length) {
                                this.changePageHire(1, instance);
                            } else if (nb === 0) {
                                if (this.appliesHiredPage >= 2) {
                                    this.changePageHire(-1, instance);
                                }
                            }
                        }
                    }
                },
                changePage: function (value, id) {
                    this.appliesToQualifPage += value;

                    if (this.appliesToQualifPage < 1) {
                        this.appliesToQualifPage = 1;
                    } else if (this.appliesToQualifPage > this.getAppliesToQualifPageLimit()) {
                        this.appliesToQualifPage = this.getAppliesToQualifPageLimit();
                    }

                    this.getAppliesInstance(id, this.advancedSearch[id].active);
                },
                changePageQualif: function (value, id) {
                    this.appliesQualifPage += value;

                    if (this.appliesQualifPage < 1) {
                        this.appliesQualifPage = 1;
                    } else if (this.appliesQualifPage > this.getAppliesQualifPageLimit()) {
                        this.appliesQualifPage = this.getAppliesQualifPageLimit();
                    }

                    this.getAppliesInstance(id, this.advancedSearch[id].active);
                },
                changePageUnqualif: function (value, id) {
                    this.appliesUnqualifPage += value;

                    if (this.appliesUnqualifPage < 1) {
                        this.appliesUnqualifPage = 1;
                    } else if (this.appliesUnqualifPage > this.getAppliesUnqualifPageLimit()) {
                        this.appliesUnqualifPage = this.getAppliesUnqualifPageLimit();
                    }

                    this.getAppliesInstance(id, this.advancedSearch[id].active);
                },
                changePageHire: function (value, id) {
                    this.appliesHiredPage += value;

                    if (this.appliesHiredPage < 1) {
                        this.appliesHiredPage = 1;
                    } else if (this.appliesHiredPage > this.getAppliesHiredPageLimit()) {
                        this.appliesHiredPage = this.getAppliesHiredPageLimit();
                    }

                    this.getAppliesInstance(id, this.advancedSearch[id].active);
                },
                getAppliesToQualifPageLimit: function () {
                    var pageLimit = Math.floor(this.appliesToQualifCount / this.appliesLimit) + 1;

                    if (pageLimit < 1) pageLimit = 1;

                    return pageLimit;
                },
                getAppliesQualifPageLimit: function () {
                    var pageLimit = Math.floor(this.appliesQualifCount / this.appliesLimit) + 1;

                    if (pageLimit < 1) pageLimit = 1;

                    return pageLimit;
                },
                getAppliesUnqualifPageLimit: function () {
                    var pageLimit = Math.floor(this.appliesUnqualifCount / this.appliesLimit) + 1;

                    if (pageLimit < 1) pageLimit = 1;

                    return pageLimit;
                },
                getAppliesHiredPageLimit: function () {
                    var pageLimit = Math.floor(this.appliesHiredCount / this.appliesLimit) + 1;

                    if (pageLimit < 1) pageLimit = 1;

                    return pageLimit;
                },
                filteringApplyTQ: function (instance) {
                    if (!this.loading) {
                        this.appliesToQualifPage = 1;
                        this.getAppliesInstance(instance);
                    }
                },
                filteringApplyQ: function (instance) {
                    if (!this.loading) {
                        this.appliesQualifPage = 1;
                        this.getAppliesInstance(instance);
                    }
                },
                filteringApplyH: function (instance) {
                    if (!this.loading) {
                        this.getAppliesHiredPage = 1;
                        this.getAppliesInstance(instance);
                    }
                },
                filteringApplyU: function (instance) {
                    if (!this.loading) {
                        this.appliesUnqualifPage = 1;
                        this.getAppliesInstance(instance);
                    }
                },
                checkIfNew: function (id, instance, i) {
                    var self = this;
                    $.ajax({
                        url: "{{ path('ajax_check_new') }}",
                        method: "POST",
                        data: {id: id, instance: instance}
                    }).done(function (data) {
                        self.toQualifAppliesInstance[i].checked = data;
                        $('.loader-container').fadeOut(150);
                    });
                },
                getArrowNav: function (i, page, q) {
                    var self = this;
                    if (i === 0 && page === 1) {
                        self.arrowNavPrev = false;
                    } else {
                        self.arrowNavPrev = true;
                    }

                    if ((q === "TQ" && i === this.toQualifAppliesInstance.length - 1 && page === this.getAppliesToQualifPageLimit())
                        || (q === "Q" && i === this.qualifAppliesInstance.length - 1 && page === this.getAppliesQualifPageLimit())
                        || (q === "U" && i === this.unqualifAppliesInstance.length - 1 && page === this.getAppliesUnqualifPageLimit())) {
                        self.arrowNavNext = false;
                    } else {
                        self.arrowNavNext = true;
                    }
                },
                orderTq: function (id, filterKey) {
                    this.selectedFilterOrderTQ = filterKey;
                    this.getAppliesInstance(id);
                },
                orderQ: function (id, filterKey) {
                    this.selectedFilterOrderQ = filterKey;
                    this.getAppliesInstance(id);
                },
                orderU: function (id, filterKey) {
                    this.selectedFilterOrderU = filterKey;
                    this.getAppliesInstance(id);
                },
                orderH: function (id, filterKey) {
                    this.selectedFilterOrderH = filterKey;
                    this.getAppliesInstance(id);
                },
                chart: function () {
                    var canvas = document.getElementsByName('scoreCanvas');
                    var colors = ['red', 'orange', '#54D87D', '#f1f1f1'];
                    var label = "Scoring";

                    canvas.forEach(function (i) {
                        var ctx = i.getContext("2d");
                        var score = [parseInt(i.dataset.score), parseInt(i.dataset.leftscore)];
                        //
                        dmbChart(40, 40, 30, 5, score, colors, label);

                        function dmbChart(cx, cy, radius, arcwidth, score, colors) {
                            var tot = 0;
                            var accum = 0;
                            var PI = Math.PI;
                            var PI2 = PI * 2;
                            var offset = -PI / 2;
                            var colorText = '';
                            ctx.lineWidth = arcwidth;

                            for (var i = 0; i < score.length; i++) {
                                tot += score[i];
                            }
                            for (var i = 0; i < score.length; i++) {
                                ctx.beginPath();
                                ctx.arc(cx, cy, radius,
                                    offset + PI2 * (accum / tot),
                                    offset + PI2 * ((accum + score[i]) / tot)
                                );
                                if (i === 0) {
                                    if (score[0] < 40) {
                                        ctx.strokeStyle = colors[0];
                                    } else if (score[0] >= 40 && score[0] <= 64) {
                                        ctx.strokeStyle = colors[1];
                                    } else if (score[0] > 64) {
                                        ctx.strokeStyle = colors[2];
                                    }
                                } else {
                                    ctx.strokeStyle = colors[3];
                                }

                                ctx.stroke();
                                accum += score[i];
                            }

                            var innerRadius = radius - arcwidth - 3;
                            ctx.beginPath();
                            ctx.arc(cx, cy, innerRadius, 0, PI2);
                            if (score[0] < 40) {
                                colorText = colors[0];
                            } else if (score[0] >= 40 && score[0] <= 64) {
                                colorText = colors[1];
                            } else if (score[0] > 64) {
                                colorText = colors[2];
                            }
                            ctx.fillStyle = 'white';
                            ctx.fill();
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'center';
                            ctx.fillStyle = colorText;
                            ctx.font = (innerRadius / 1.5) + 'px verdana';
                            ctx.fillText(score[0] + '%', cx, 25 + innerRadius * .9);
                        }
                    });
                }
            }
        });
    </script>
{% endblock %}