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

{% block title %}Golden Bees - Job Group{% endblock %}

{% block body %}

    <div id="jobGroupEdit" v-cloak>
        <main class="row main mx-0 min-vw-100 fade-in">
            <section class="content-area p-r-l-6">
                <div class="pb-4 mb-3 container-fluid rounded-2 px-0 page-header">
                    <div class="border-bottom position-relative d-flex nav nav-tabs">
                        <a :class="[activePanel === 'jobgroup-config' ? 'active' : '', 'btn-tab nav-link']"
                           id="globalEditTab" @click="switchPanel('jobgroup-config')" href="#jobgroup-config">
                            {{ 'Global settings'|trans }}
                        </a>
                        <a :class="[activePanel === 'quiz-config' ? 'active' : '', 'btn-tab nav-link']"
                           id="globalEditTab" @click="switchPanel('quiz-config')" href="#quiz-config">
                            {{ 'Quiz'|trans }}
                        </a>
                    </div>
                </div>
                <div class="col-12 main-data-table px-0 mb-2 pb-5" id="jobgroup-config"
                     v-if="activePanel === 'jobgroup-config'">

                    {#                    {% set proxy_url = "https://image.goldenbees.fr/images?w=400&h=400&transfo=fit&imgurl=" %} #}
                    {#                    {% set static_path = advertiser.name|lower|replace({' ': ''})|replace({'à':'a', 'ê':'e', 'é':'e', 'è':'e'}) %} #}
                    <!--
                    <div {#  class="col-sm-12 d-flex justify-content-end px-0 pb-3" #}>
                        {#                        <div class="col-md-6 d-flex flex-row panels-headers"> #}
                        {#                            <div style="display: -webkit-inline-box" class="mr-2"> #}
                        {#                                {% if static_path %} #}
                        {#                                    <img src="{{ proxy_url }}{{ ('http://static.goldenbees.fr/advertisers/' ~ static_path ~'/logo.jpg')|url_encode }}" alt="" width="46" class="mx-auto img-fluid border" style="border-radius: 50%"> #}
                        {#                                {% else %} #}

                        {#                                    <img src="{{ asset('Dashboard/img/backup.jpg') }}" alt="" style="width: auto; height: 40px; border-radius: 50%" class="mx-auto img-fluid border"> #}
                        {#                                {% endif %} #}
                        {#                            </div> #}
                        {#                            <div class="my-auto"> #}
                        {#                                <span class="font-weight-bold mr-2 title-page my-auto">{{ advertiser.name }}</span> #}
                        {#                                <span class="font-200">/ Edit -</span> #}
                        {#                                <span class="font-600">JobGroup</span> #}
                        {#                                <span class="font-600 ml-2">{{ jobgroup.name }}</span> #}
                        {#                            </div> #}
                        {#                        </div> #}
                        {#                        <div class="col-md-6 section-search text-right mt-xs-3 d-flex justify-content-end"> #}
                        {#                            <div class="px-0 d-flex my-auto"> #}
                        {#                                <button class="btn btn-outline-success rounded-30 px-3 d-flex mr-2" @click="clone()"> #}
                        {#                                    Clone <span class="d-none d-lg-block d-xl-none ml-1">this jobGroup</span> #}
                        {#                                    <i class="fal fa-copy ml-2 my-auto"></i> #}
                        {#                                </button> #}

                        {#                                <button class="btn btn-primary text-white rounded-30 px-3 d-flex d-none" @click=""> #}
                        {#                                    Create a new <span class="d-none d-lg-block d-xl-none ml-1">jobGroup</span> #}
                        {#                                    <i class="fal fa-plus ml-2 my-auto"></i> #}
                        {#                                </button> #}
                        {#                            </div> #}
                        {#                        </div> #}
                        {#                        <a class="btn btn-light rounded-30 px-3 ml-5 d-flex border" id="btn-back" href="{{ path('advertiser_job_index', {'id': advertiser.id}) }}#jobGroup"> #}
                        {#                            <i class="fal fa-long-arrow-left mr-2 my-auto"></i> #}
                        {#                            {{ 'Back to job groups list'|trans }} #}
                        {#                        </a> #}
                        {#                        <button class="btn btn-danger rounded-30 px-3 ml-3 d-flex" @click="showConfirmationModal = true" id="btn-delete" type="submit"> #}
                        {#                            {{ 'Delete'|trans }} #}
                        {#                            <i class="fal fa-trash-alt ml-2 my-auto"></i> #}
                        {#                        </button> #}
                    </div> -->
                    <div class="col-12 main-data-table px-0 d-flex">
                        <div class="col-md-6 px-0 pt-0 rounded-2">

                            {#        Form for adding a new jobGroup #}
                            <div class="py-5 position-relative w-100 bg-white JobGroupModify rounded-2"
                                 id="JobGroupModify" style="right: 0">
                                <div class="w-100 px-3">
                                    {#                                    <div class="header d-flex flex-column pl-2 mb-5"> #}
                                    {#                                        <div class="slider-icons-group active ml-auto d-none" style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);" @click="closeSideModal()"> #}
                                    {#                                            <div class="slider-icons"> #}
                                    {#                                                <i class="fal fa-times text-white"></i> #}
                                    {#                                            </div> #}
                                    {#                                        </div> #}
                                    {#                                        <div class="title mt-3 d-none"> #}
                                    {#                                            <div class=""> #}
                                    {#                                                <i class="fal fa-pen"></i> #}
                                    {#                                                <span class="ml-3 text-secondary">Modify JobGroup</span> #}
                                    {#                                                <span class="ml-2 text-primary">{{ jobgroup.name }}</span> #}
                                    {#                                            </div> #}
                                    {#                                        </div> #}
                                    {#                                    </div> #}

                                    {#            Start New version #}

                                    <div class="body-form">

                                        <div class="step-1" id="step-1">
                                            <div class="title-step d-flex align-items-center">
                                                <div class="chips chips_icon_btn" style="background-color: #7FEF00;">
                                                    <span class="text-white font-weight-bold">1</span>
                                                </div>
                                                <div class="title-text text-primary font-700 ml-3">
                                                    Informations
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-sm-12 mt-5 ml-3">
                                            {{ form_start(form, {'attr': {'class': 'form-horizontal'}}) }}
                                            <div class="form-group form-label-group position-relative input-login">
                                                {{ form_label(form.name, "Name", {'label_attr': {'class': 'control-label labelInput focusInput ml-3'}}) }}
                                                <div class="col-sm-12">
                                                    {{ form_widget(form.name, {'attr': {'class': 'form-control', 'placeholder': 'JobGroup Name' }}) }}
                                                </div>
                                                <div class="text-danger">{{ form_errors(form.name) }}</div>

                                            </div>
                                            <div class="form-group form-label-group position-relative input-login">
                                                {{ form_label(form.description, "Description", {'label_attr': {'class': 'control-label labelInput focusInput ml-3'}}) }}
                                                <div class="col-sm-12">
                                                    {{ form_widget(form.description, {'attr': {'class': 'form-control', 'placeholder': '' }}) }}
                                                </div>
                                                <div class="text-danger">{{ form_errors(form.description) }}</div>
                                            </div>
                                            {{ form_rest(form) }}
                                            {{ form_end(form) }}
                                        </div>

                                        <div class="row mt-5">
                                            <div class="col-sm-12">

                                                <div class="title-step d-flex align-items-center">
                                                    <div class="chips chips_icon_btn"
                                                         style="background-color: #7FEF00;">
                                                        <span class="text-white font-weight-bold">2</span>
                                                    </div>
                                                    <div class="title-text text-primary font-700 ml-3 mr-2">
                                                        {{ 'Rules'|trans }}
                                                        <span class="font-400 chips chips_purple ml-2">
                                                            {{ 'Matching jobs'|trans }} : <b><% jobsCount %></b>
                                                        </span>
                                                    </div>
                                                </div>

                                                <div class="my-5 px-2 py-3 ml-5 mr-3" v-for="(rule, i) in rules">
                                                    <template v-for="(group, j) in rule.rules.groups">
                                                        <span v-if="j > 0"
                                                              class="chips text-uppercase d-block text-center my-2 py-2 px-2 mb-4"
                                                              :class="[group.logic == 'or' ? 'chips_yellow' : 'chips_purple' ]"><% translateLogic(group.logic) %></span>
                                                        <div class="panel panel-default group-rules mb-3 border rounded-2 px-3 py-3 mt-5">
                                                            <span class="bg-white text-primary font-600 position-absolute p-2"
                                                                  style="margin-top: -34px;">{{ 'group'|trans|capitalize }} <% j + 1%></span>
                                                            <div class="panel-body">
                                                                <span type="button"
                                                                      class="btn chips chips_green px-1 py-1 position-absolute"
                                                                      @click="copyRule(i, j, '', 'group', $event)"
                                                                      style="margin-top: -40px; right: 50px;">{{ 'Copy group'|trans }}</span>
                                                                <table class="table rules-table">
                                                                    <tbody>
                                                                    <template v-for="(groupRule, k) in group.rules">
                                                                        <tr v-if="k > 0" class="border-0"
                                                                            :key="k + 'logic'">
                                                                            <td colspan="9" class="border-0"><span
                                                                                        class="chips text-uppercase d-block text-center my-2 py-2 px-2 "
                                                                                        :class="[groupRule.logic==='or' ? 'chips_yellow' : 'chips_purple' ]"><% translateLogic(groupRule.logic) %></span>
                                                                            </td>
                                                                        </tr>

                                                                        <tr class="bg-light px-2 pt-2 main-tr-rule"
                                                                            @mouseover="hoverShowCopyEnter(i,j,k)"
                                                                            @mouseleave="hoverShowCopyLeave(i,j,k)"
                                                                            :id="'a-' + i + '-' + j + '-' + k"
                                                                            :key="k + 'rule'">
                                                                            <td class="border-0 pt-4">
                                                                                <select v-model="rules[i].rules.groups[j].rules[k].var1"
                                                                                        class="form-control input-sm"
                                                                                        @change="clearCategory(i, j,k)">
                                                                                    <option v-for="attr in attributes"
                                                                                            :value="attr.key"
                                                                                            v-html="attr.name"></option>
                                                                                </select>
                                                                            </td>
                                                                            <td class="border-0 pt-4">
                                                                                <select v-model="rules[i].rules.groups[j].rules[k].type"
                                                                                        class="form-control input-sm"
                                                                                        @change="handleLogicChange(i,j,k)">
                                                                                    <option v-for="op in operators"
                                                                                            :value="op.key"
                                                                                            v-if="op.exclude.indexOf(rules[i].rules.groups[j].rules[k].var1) == -1"
                                                                                            v-html="op.name"></option>
                                                                                </select>
                                                                            </td>
                                                                            <td :id="i + ',' + j + ',' + k"
                                                                                v-if="rules[i].rules.groups[j].rules[k].var1 != 'age' && rules[i].rules.groups[j].rules[k].var1 != 'category'"
                                                                                style="width: 40%;"
                                                                                data-container="body"
                                                                                data-toggle="popover"
                                                                                data-placement="right"
                                                                                class="border-0 pt-4">
                                                                                <bootstrap-tags-input
                                                                                        v-model="rules[i].rules.groups[j].rules[k].var2"
                                                                                        :criteria="rules[i].rules.groups[j].rules[k].var1"
                                                                                        placeholder="Value"
                                                                                        @input="handleRuleChange()"
                                                                                ></bootstrap-tags-input>
                                                                            </td>
                                                                            <td v-if="rules[i].rules.groups[j].rules[k].var1 == 'age'"
                                                                                style="min-width: 40%;"
                                                                                class="border-0 pt-4">
                                                                                <input v-model="rules[i].rules.groups[j].rules[k].var2"
                                                                                       type="number" step="any" min="0"
                                                                                       class="form-control input-sm"
                                                                                       placeholder="in Days">
                                                                            </td>
                                                                            <td v-if="rules[i].rules.groups[j].rules[k].var1 == 'category'"
                                                                                class="border-0 pt-4">
                                                                                <categories-selector
                                                                                        :job-categories="jobCategories"
                                                                                        class="mr-2"
                                                                                        v-model="rules[i].rules.groups[j].rules[k].var2"
                                                                                        :id="'jobCategory'"
                                                                                        key="jobCategory"
                                                                                        :init-value="rules[i].rules.groups[j].rules[k].var2"
                                                                                ></categories-selector>
                                                                            </td>
                                                                        </tr>
                                                                        <tr class="bg-light px-2 pb-2 main-tr-rule"
                                                                            @mouseover="hoverShowCopyEnter(i,j,k)"
                                                                            @mouseleave="hoverShowCopyLeave(i,j,k)"
                                                                            :id="'b-' + i + '-' + j + '-' + k"
                                                                            :key="k + 'tool'">
                                                                            <td class="border-0">
                                                                                <div class="d-flex">
                                                                                    <div class="">
                                                                                        <button v-if="k == group.rules.length - 1"
                                                                                                type="button"
                                                                                                class="btn btn-default text-uppercase chips chips_yellow"
                                                                                                @click="addRule(i, j, k, 'or')">
                                                                                            {{ 'or'|trans }}
                                                                                        </button>
                                                                                        <button v-if="k == group.rules.length - 1"
                                                                                                type="button"
                                                                                                class="btn btn-default text-uppercase chips chips_purple"
                                                                                                @click="addRule(i, j, k, 'and')">
                                                                                            {{ 'and'|trans }}
                                                                                        </button>
                                                                                    </div>
                                                                                </div>
                                                                            </td>
                                                                            <td class="border-0">
                                                                            </td>
                                                                            <td class="border-0 copy-tools-rules">
                                                                                <div class="d-flex justify-content-end align-items-center">
                                                                                    <button type="button"
                                                                                            class="btn btn-default text-decoration-none chips chips_red cursor-pointer"
                                                                                            @click="removeRule(i, j, k)">{{ 'Delete'|trans }}</button>
                                                                                    <button type="button"
                                                                                            class="btn btn-default text-decoration-none btn-default chips chips_green cursor-pointer ml-2"
                                                                                            @click="copyRule(i, j, k, 'line', $event)">{{ 'copy'|trans }}</button>
                                                                                    <button v-if="copyRules.line !== '' && k === rules[i].rules.groups[j].rules.length - 1"
                                                                                            type="button"
                                                                                            class="btn btn-default text-decoration-none btn-default chips chips_purple cursor-pointer ml-2"
                                                                                            @click="addCopy(i, j, k, 'line', '', $event)"
                                                                                            data-container="body"
                                                                                            data-toggle="popover"
                                                                                            data-placement="top">{{ 'paste'|trans }}</button>
                                                                                </div>
                                                                            </td>
                                                                        </tr>

                                                                    </template>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </template>
                                                    <div class="row py-3 mx-0 px-2"
                                                         style="background-color: rgba(235, 239, 248, 0.55);">
                                                        <div class="col-sm-5 d-flex mx-0 justify-content-start">
                                                            <button type="button"
                                                                    class="btn btn-default chips chips_bordered btn-sm bg-white px-3 mr-2 d-flex align-items-center"
                                                                    @click="addGroup(i, 'or')">
                                                                <i class="fal fa-plus mr-2"></i><span
                                                                        class="small">{{ 'or'|trans|upper }} {{ 'group'|trans }}</span>
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-default btn-sm chips chips_bordered bg-white px-3 small d-flex align-items-center"
                                                                    @click="addGroup(i, 'and')">
                                                                <i class="fal fa-plus mr-2"></i><span
                                                                        class="small">{{ 'and'|trans|upper }} {{ 'group'|trans }}</span>
                                                            </button>
                                                        </div>

                                                        <div class="col-sm-7 mx-0 d-flex justify-content-end"
                                                             v-if="copyRules.group !== ''">
                                                            <button type="button"
                                                                    class="btn btn-default btn-sm chips chips_bordered bg-white px-3 small mr-2 d-flex align-items-center"
                                                                    @click="addCopy(i, '', '', 'group', 'or')"><i
                                                                        class="fal fa-plus mr-2"></i><span
                                                                        class="small">{{ 'OR Copied group'|trans }}</span>
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-default btn-sm chips chips_bordered bg-white px-3 small d-flex align-items-center"
                                                                    @click="addCopy(i, '', '', 'group', 'and')"><i
                                                                        class="fal fa-plus mr-2"></i><span
                                                                        class="small">{{ 'AND Copied group'|trans }}</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-12 col-sm-12 mt-4 mb-2 d-flex justify-content-start "
                                                 v-if="(rules[0].rules.groups[0].rules.length > 1) || (rules[0].rules.groups.length > 1)">
                                                <button type="button"
                                                        class="btn btn-default btn-sm text-underline font-700 ml-5"
                                                        @click="reset()">
                                                    <i class="fal fa-times-circle"></i>
                                                    {{ 'Reset all'|trans }}
                                                </button>
                                            </div>

                                            <div class="col-sm-12 d-flex justify-content-end mt-3 pl-5">
                                                <span class="border-primary border rounded-30 px-3 py-2 d-inline-block mr-3 cursor-pointer"
                                                      @click="showMatch()">{{ 'Matching jobs'|trans }}</span>
                                                <button-multiple :content-position="'right'"
                                                                 class="d-inline-block mr-2">
                                                    <template v-slot:main-btn>
                                                        <button type="button"
                                                                class="btn btn-primary rounded-30 px-4 py-2 border border-primary cursor-pointer"
                                                                @click="triggerSave(null, false)">
                                                            {{ 'Save'|trans }}
                                                        </button>
                                                    </template>
                                                    {% if is_granted('ROLE_BACKEND') %}
                                                        <template v-slot:extra-btn>
                                                            <button type="button"
                                                                    class="btn btn-primary rounded-30 px-4 py-2 border border-primary cursor-pointer"
                                                                    @click="openModalComment">{{ 'Save with a comment'|trans }}
                                                            </button>
                                                        </template>
                                                    {% endif %}
                                                </button-multiple>
                                            </div>
                                        </div>
                                    </div>

                                    {#           End new Version #}

                                </div>
                            </div>

                        </div>
                        <div class="col-md-6 pr-0 pl-2">
                            <div class="col-12 bg-white px-5 pb-5 rounded-2">
                                <div class="panel-heading pt-5 mb-5 d-flex align-items-center">
                                    <span class="font-weight-bold mr-4 title-page">{{ 'Jobs'|trans }}</span>
                                    <span class="font-weight-bold title-page bg-white rounded-30 chips chips_bordered">1 {{ 'month'|trans }}</span>

                                    <a class="btn btn-light rounded-30 px-3 d-flex border ml-auto" id="btn-back"
                                       href="{{ path('advertiser_job_index', {'advertiser': advertiser.id}) }}#jobGroup">
                                        <i class="fal fa-long-arrow-left mr-2 my-auto"></i>
                                        {{ 'Back to job groups list'|trans }}
                                    </a>
                                    <button class="btn btn-danger rounded-30 px-3 ml-3 d-flex"
                                            @click="showConfirmationModal = true" id="btn-delete" type="submit">
                                        {{ 'Delete'|trans }}
                                        <i class="fal fa-trash-alt ml-2 my-auto"></i>
                                    </button>
                                </div>
                                <div class="panel-body">
                                    {#    {% if valuesJobJobgroup|length == 0 %}
                                        <h2>NO DATA TO DISPLAY</h2>
                                    {% else %}
                                        <canvas height="250" id="jobs30days"></canvas>
                                    {% endif %} #}

                                    <div class="d-flex justify-content-center">
                                        <div class="px-0 mb-1">
                                            <span class="font-400 mr-2 title-page">{{ 'Active Jobs'|trans }}</span>
                                            <span class="chips chips_green">{{ activeJobs }}</span>
                                        </div>
                                        <div class="">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <bar-vertical-chart :chart-data="charts.jobsByDate"></bar-vertical-chart>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 bg-white px-5 rounded-2 mt-2">
                                <div class="panel-body py-5">
                                    <div class="col-md-12 text-primary font-600 mb-5 pl-3">
                                        <span :class="[activeChartJobs === 'jobByCat' ? 'active' : 'chips_purple cursor-pointer', 'text-primary font-600 mr-4 chips_bordered chips']"
                                              id="jobByCat"
                                              @click="switchJobStat('jobByCat')">{{ 'Job by Category'|trans }}</span>
                                        <span :class="[activeChartJobs === 'jobByLocation' ? 'active' : 'chips_purple cursor-pointer', 'text-primary font-600 mr-4 chips_bordered chips']"
                                              id="jobByLocation"
                                              @click="switchJobStat('jobByLocation')">{{ 'Job by Location'|trans }}</span>
                                        <span :class="[activeChartJobs === 'jobByContract' ? 'active' : 'chips_purple cursor-pointer', 'text-primary font-600 mr-4 chips_bordered chips']"
                                              id="jobByContract"
                                              @click="switchJobStat('jobByContract')">{{ 'Job by Contracts type'|trans }}</span>
                                    </div>
                                    <bar-horizontal-chart v-if="activeChartJobs === 'jobByCat'"
                                                          :height="400"
                                                          :chart-data="charts.jobsByCat"
                                                          key="jobByCat"></bar-horizontal-chart>
                                    <bar-horizontal-chart v-if="activeChartJobs === 'jobByLocation'"
                                                          :height="400"
                                                          :chart-data="charts.jobsByRegion"
                                                          key="jobByLocation"></bar-horizontal-chart>
                                    <bar-horizontal-chart v-if="activeChartJobs === 'jobByContract'"
                                                          :height="400"
                                                          :chart-data="charts.jobsByContract"
                                                          key="jobByContract"></bar-horizontal-chart>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="quiz-config" v-if="activePanel === 'quiz-config'">
                    <div class="container bg-white p-5 border rounded shadow-1">
                        <div class="col-6 mx-auto">
                            <div class="rounded-2 bg-white py-5 px-5">
                                <form-input id="quiz-active"
                                            label="{{ 'Generate quizzes'|trans }}"
                                            type="checkbox"
                                            v-model="customData.quiz.active"
                                            class="mb-3"
                                ></form-input>
                                <form-input id="quiz-quiz-display"
                                            label="{{ 'Enable quizzes by default'|trans }}"
                                            type="checkbox"
                                            v-model="customData.quiz.quizDisplay"
                                            class="mb-3"
                                ></form-input>
                                <form-input id="quiz-size"
                                            label="{{ 'Number of questions'|trans }}"
                                            type="number"
                                            :min="0"
                                            :max="10"
                                            v-model="customData.quiz.size"
                                            class="mb-3">
                                </form-input>
                                <form-input v-if="aiConfig.active === false"
                                            id="quiz-expert"
                                            :disabled="true"
                                            label="{{ 'Create the quiz only for offers requiring technical expertise.'|trans }}"
                                            type="checkbox"
                                            v-model="customData.quiz.techExpert"
                                            class="mb-3"
                                            :data-tippy-content="Translator.trans('Please enable the AI Analysis option at the Job Feed config')">
                                </form-input>
                                <form-input v-else id="quiz-expert"
                                            label="{{ 'Create the quiz only for offers requiring technical expertise.'|trans }}"
                                            type="checkbox"
                                            v-model="customData.quiz.techExpert"
                                            class="mb-3"
                                ></form-input>
                                <div class="col-sm-12 d-flex justify-content-end mt-3 pl-5 pr-0">
                                    <button type="button"
                                            :disabled="!userRoles.includes('ROLE_BACKEND')"
                                            class="btn btn-primary rounded-30 px-4 py-2 border border-primary cursor-pointer"
                                            @click="saveQuizData(customData)">
                                        {{ 'Save'|trans }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        
{#        <div class="d-none modal-delete-form" id="modal-delete-form">#}

{#           #}{# {{ form_start(delete_form, {'attr': {'id': 'delete-form', 'style': 'display:none;'}}) }}#}
{#            {{ form_end(delete_form) }} #}

{#            {{ form_start(delete_form, {'attr': {'id': 'delete-form'}}) }}#}
{#            {{ form_end(delete_form) }}#}

{#        </div>#}

        <div :class="[showMatchingJobPanel ? 'show' : '', 'modal-backdrop']" id="modal-backdrop" ref="modalBackdrop" v-show="showMatchingJobPanel"></div>
        
        <transition name="slide-right">
            <div class="bg-white active form-campaign matching-jobs-wizard shadow-1" id="matching-jobs-wizard" v-if="showMatchingJobPanel">
                <div class="w-100 p-5">
                    <div class="header d-flex flex-column pl-2 mb-5">
                        <div class="slider-icon-group active ml-auto" style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);" @click="closeMatchingModal()">
                            <div class="slider-icon">
                                <i class="fal fa-times text-white"></i>
                            </div>
                        </div>
                        <div class="title mt-3">
                            <div class="">
                                <i class="fal fa-layer-group"></i>
                                <span class="ml-3 text-secondary">{{ 'Matching jobs'|trans }} <b>(<% jobsCount %> {{ 'jobs found'|trans }})</b></span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-body">
                        <div v-if="jobsCount > 200" class="alert alert-warning" role="alert">
                            {{ 'Job visualization is limited to'|trans }} <b>200</b> {{ 'rows'|trans }}.</div>
                        <div v-if="jobsCount == 0" class="alert alert-info text-center" role="alert">{{ 'No matching jobs'|trans }}</div>
                        <div v-if="jobsCount > 0" class="table-responsive pr-2" style="overflow-y: auto; height: 65vh;">
                            <table class="table table-bordered table-hover table-striped">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>{{ 'Title'|trans }}</th>
                                    <th>{{ 'Job link'|trans }}</th>
                                    <th>{{ 'Contract type'|trans }}</th>
                                    <th>{{ 'Company'|trans }}</th>
                                    <th>{{ 'Country'|trans }}</th>
                                    <th>Zip</th>
                                    <th>{{ 'City'|trans }}</th>
                                    <th>{{ 'State'|trans }}</th>
                                    <th>{{ 'Region'|trans }}</th>
                                    <th>{{ 'Domain'|trans }}</th>
                                    <th>{{ 'Category'|trans }}</th>
                                    <th>{{ 'Category level 1'|trans }}</th>
                                    <th>{{ 'Category level 2'|trans }}</th>
                                    <th>{{ 'Category level 3'|trans }}</th>
                                    <th>{{ 'Jobs By Company'|trans }}</th>
                                    <th>{{ 'Custom data'|trans }}</th>
                                    {% if is_granted('ROLE_BACKEND') %}
                                        <th>{{ 'estimatedCpa'|trans }}</th>
                                    {% endif %}
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(job, i) in jobs" :key="i">
                                    <td><% job.id_ext %></td>
                                    <td><% job.title %></td>
                                    <td><% job.link %></td>
                                    <td><% job.contract_type %></td>
                                    <td><% job.company %></td>
                                    <td><% job.country %></td>
                                    <td><% job.zip %></td>
                                    <td><% job.city %></td>
                                    <td><% job.state %></td>
                                    <td><% job.region %></td>
                                    <td><% job.domain %></td>
                                    <td><% job.category %></td>
                                    <td><% job.category_1 %></td>
                                    <td><% job.category_2 %></td>
                                    <td><% job.category_3 %></td>
                                    <td><% job.jobs_by_company %></td>
                                    <td><% job.custom_data %></td>
                                    {% if is_granted('ROLE_BACKEND') %}
                                        <td><% job.cpa %>&euro;</td>
                                    {% endif %}
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-12 d-flex py-5 justify-content-end">
                            <button type="button" class="btn btn-info mr-2" @click="exportMatchingJobs()">
                                {{ 'Export Matching Jobs'|trans }}
                            </button>
                            <button type="button" class="btn btn-info" @click="closeMatchingModal()">
                                {{ 'Close'|trans }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        
        <modal-confirmation :id-modal="'confirmationDeleteJobGroup'" :show="showConfirmationModal" @confirmation="confirmationModalDeleteJobGroup">
            <template v-slot:header>
                <i class="fas fa-exclamation-triangle ml-2"></i>
                <span>Delete confirmation</span>
            </template>
            <template v-slot:modal-body>
                <span class="text-danger">Do you really want to delete this job group ?</span>
            </template>
            <template v-slot:confirm-btn>
                Delete
            </template>
        </modal-confirmation>

        {% if is_granted('ROLE_BACKEND') %}
            <save-and-comment name-with-comment="{{ 'Save with a comment'|trans }}"
                              :is-linked-brief="false"
                              id="{{ 'modifyJobgroup' }}"
                              :e-save-with-comment="triggerSave"
            ></save-and-comment>
        {% endif %}
        
        <span class="d-none invisible twig-data-jobgroups" data-jobgroups="{{ jobgroups|json_encode }}"></span>
        <span class="d-none invisible twig-data-jobgroup-id" data-jobgroup-id="{{ jobgroup.id }}"></span>
        <span class="d-none invisible twig-data-rules" data-rules="{{ jobgroup.rules }}"></span>
        <span class="d-none invisible twig-data-custom-data" data-custom-data="{{ jobgroup.customData }}"></span>
        <span class="d-none invisible twig-data-ai-config" data-ai-config="{{ aiConfig|json_encode }}"></span>
        <span class="d-none invisible twig-data-job-categories" data-job-categories="{{ jobCategories|json_encode }}"></span>
        <span class="d-none invisible twig-data-advertiser-id" data-advertiser-id="{{ advertiser.id }}"></span>
        <span class="d-none invisible twig-data-user-roles" data-user-roles="{{ userRoles|json_encode }}"></span>


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

        <span class="d-none invisible twig-data-path-ajax-job-jobgroup-matching" data-path-ajax-job-jobgroup-matching="{{ path('ajax_job_jobgroup_matching', {advertiser: advertiser.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-job-jobgroup-export-matching" data-path-ajax-job-jobgroup-export-matching="{{ path('ajax_job_jobgroup_export_matching', {advertiser: advertiser.id}) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-job-jobgroup-delete" data-path-ajax-job-jobgroup-delete="{{ path('ajax_job_jobgroup_delete', {'advertiser': advertiser.id, 'jobgroup': jobgroup.id}) }}"></span>
        <span class="d-none invisible twig-data-path-advertiser-job-index" data-path-advertiser-job-index="{{ path('advertiser_job_index', {'advertiser': advertiser.id}) }}"></span>
        <span class="d-none invisible twig-data-path-overview" data-path-overview="{{ path('overview') }}"></span>
        <span class="d-none invisible twig-data-path-current-route" data-path-current-route="{{ path(routeName, {'advertiser': advertiser.id, 'jobgroup': ':jid' }) }}"></span>
        <span class="d-none invisible twig-data-path-ajax-job-jobgroup-quiz" data-path-ajax-job-jobgroup-quiz="{{ path('ajax_job_jobgroup_quiz', {advertiser: advertiser.id,jobgroup: jobgroup.id}) }}"></span>
    </div>
{% endblock %}

{% block specificJS %}
    {{ encore_entry_script_tags('job-group-edit') }}
{% endblock %}