{% load i18n recruitmentfilters horillafilters %}

<!-- start of messages -->
{% if messages %}
<div class="oh-wrapper">
  {% for message in messages %}
  <div class="oh-alert-container">
    <div class="oh-alert oh-alert--animated {{message.tags}}">
      {{ message }}
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}
<!-- end of messages -->

<button
    data-stage-toggle-id="{{stage.id}}"
    id="stageLoad{{stage.id}}"
    hx-get="{% url 'candidate-stage-component' %}?stage_id={{stage.id}}"
    hx-target="#pipelineStageContainer{{stage.id}}"
    hidden
></button>
<div class="oh-sticky-table oh-table--configurable candidate-table" id="candidateTable{{stage.id}}"
    data-stage-id="{{stage.id}}">
    <div class="oh-sticky-table__table oh-table__movable">
        <div class="oh-sticky-table__thead">
            <div class="oh-sticky-table__tr oh-table-config__tr">
                <div class="oh-sticky-table__th" style="width: 50px;z-index: 12 !important;">
                    <div class="centered-div">
                        <input type="checkbox"
                        onchange="
                        if ($(this).is(':checked')) {
                            $(this).closest('.oh-sticky-table').find('.candidate-checkbox').prop('checked',true).change();
                        }else{
                            $(this).closest('.oh-sticky-table').find('.candidate-checkbox').prop('checked',false).change();
                        }"
                        class="oh-input oh-input__checkbox stage-candidates"
                            data-stage-id="{{stage.id}}" title="Select All" id="tick">
                    </div>
                </div>
                <div class="oh-sticky-table__th oh-table-config__th" style="width: 200px;z-index: 11;">
                    <span> {% trans "Candidate" %} </span>
                </div>

                <div class="oh-sticky-table__th oh-table-config__th" style="width: 135">
                    <span> {% trans "Email" %}</span>
                </div>
                <div class="oh-sticky-table__th oh-table-config__th" style="width: 135px;">
                    <span> {% trans "Job Position" %} </span>
                </div>
                <div class="oh-sticky-table__th oh-table-config__th" style="width: 135px;">
                    <span> {% trans "Contact" %} </span>
                </div>
                <div class="oh-sticky-table__th oh-table-config__th" style="width: 155px;">
                    <span> {% trans "Scheduled Interviews" %} </span>
                </div>
                {% if request.user.employee_get in stage.stage_managers.all or request.user.employee_get in rec.recruitment_managers.all or perms.recruitment.change_candidate %}
                <div class="oh-sticky-table__th oh-table-config__th" style="width: 135px;">
                    <span> {% trans "Rating" %} </span>
                </div>
                {% endif %}
                {% if request.user.employee_get in stage.stage_managers.all or perms.recruitment.change_candidate or request.user.employee_get in rec.recruitment_managers.all %}
                    <div class="oh-sticky-table__th oh-table-config__th">{% trans "Stage" %}</div>
                    <div class="oh-sticky-table__th oh-table-config__th" style="width: 225px;">
                        <select name="bulk_stage"
                        onchange="
                        if (this.value) {
                            preStageId= {{stage.id}}
                            stageId = this.value
                            candidateCheckBoxes = $(this).closest('.oh-sticky-table').find('.stage-candidate-row[type=checkbox]:checked')
                            if (!candidateCheckBoxes.length) {
                                Swal.fire({
                                    title: 'No rows selected!',
                                    icon: 'warning'
                                });
                            }else{
                                canIds=[]
                                $.each(candidateCheckBoxes, function(index, checkbox) {
                                    canId=$(checkbox).val()
                                    canIds.push($(checkbox).val())
                                });
                                bulkStageUpdate(canIds,stageId,preStageId)
                            }
                        }
                        "
                        class="oh-select w-100" data-stage-id="{{stage.id}}">
                            <option value="" style="color: gray !important;" selected>{% trans "Stage bulk update" %}
                            </option>
                            {% for stage in rec.stage_set.all|dictsort:"sequence" %}
                            <option value="{{stage.id}}">{{stage}}</option>
                            {% endfor %}
                        </select>
                    </div>
                {% endif %}
            </div>
        </div>
        <div hx-trigger="end" data-drag-htmx="true" hx-target="#pipelineStageContainer{{stage.id}}" hx-swap="none" hx-get="" class="hx-sortable oh-sticky-table__tbody oh-table--inter-sortable ui-sortable candidate-container"
            data-container="candidate" data-container-list="candidate" data-stage-id="{{stage.id}}"
            data-recruitment-id="{{rec.id}}" id="candidateContainer{{stage.id}}">
            {% for cand in candidates %}
            <div onclick="window.location.href = '{% url 'candidate-view-individual' cand.id %}'"
                class="oh-sticky-table__tr oh-table-config__tr candidate ui-droppable ui-sortable-handle cand change-cand "
                data-candidate-id="{{cand.id}}"
                data-drop="candidate"
                data-change-cand-id="{{cand.id}}"
                data-sequence="{{cand.sequence}}"
                data-candidate="{{cand.name}}"
                data-pre_stage_id ="{{cand.stage_id.id}}"
                data-stage_order = '{{cand.recruitment_id.ordered_stages|to_json|safe}}'
                data-job-position="{{cand.job_position_id}}">
                <div class="oh-sticky-table__sd" style="z-index: 11 !important;" onclick="event.stopPropagation()">
                    <div class="centered-div">
                        <input type="checkbox" id="{{cand.id}}"
                            class="oh-input candidate-checkbox oh-input__checkbox stage-candidate-row" value="{{cand.id}}"
                            onchange="highlightRow($(this));
                            if (!$(this).is(':checked')) {
                                $(this).closest('.oh-sticky-table').find('.stage-candidates').prop('checked',false);
                            }
                            ">
                    </div>
                    <input type="text" name="order" value="{{cand.id}}" hidden>
                </div>
                <div class="oh-sticky-table__td oh-table-config__td"
                    style="text-decoration: none;width: 400px !important;">
                    {% for interview_schedule in cand.candidate_interview.all %}
                        {% if interview_schedule.interview_date|date:"Y-m-d" == now|date:"Y-m-d" %}
                            <div class="d-flex" style="flex-direction: row-reverse; margin-bottom:-30px;">
                                <span class="tooltip">
                                    <span class="material-symbols-outlined" style="flex-direction: row-reverse;color:green;">
                                        alarm_on
                                    </span>
                                    <span class="tooltiptext fw-bold">
                                        {% trans "INTERVIEW : Today at" %} {{interview_schedule.interview_time}} {% trans "with" %}
                                        {% for emp in interview_schedule.employee_id.all %} {{emp}}, {% endfor %}
                                    </span>
                                </span>
                            </div>
                        {% endif %}
                    {% endfor %}

                    <span title={% trans "Move" %}><ion-icon name="move"></ion-icon></span>
                    <div class="oh-profile oh-profile--md">
                        <div class="oh-profile__avatar mr-1">
                            <img src="{{cand.get_avatar}}" class="oh-profile__image" alt="User" />
                        </div>
                        <span title="{{cand}}">{{cand|truncatechars:15}} </span>
                    </div>
                </div>

                <div class="oh-sticky-table__td oh-table-config__td" style="width: 200px">
                    <span title="{{cand.email}}">
                        {{cand.email|truncatechars:10}}
                    </span>

                    {% if cand.get_last_sent_mail %}
                    <span title="{{cand.get_last_sent_mail.subject}} | {{cand.get_last_sent_mail.get_status_display}}"
                        class="oh-dot oh-dot--small me-1"
                        style="background-color:{% if cand.get_last_sent_mail.status == "sent" %}yellowgreen
                        {% else %}red{% endif %}"></span>
                    {% endif %}
                </div>
                <div class="oh-sticky-table__td oh-table-config__td">
                    <span title="{{cand.job_position_id}}">
                        {{cand.job_position_id|truncatechars:21}}
                    </span>
                </div>
                <div class="oh-sticky-table__td oh-table-config__td">
                    {{cand.mobile}}
                </div>

                <div class="oh-sticky-table__td oh-table-config__td">
                    {% trans "Interviews Scheduled" %} : {{cand.candidate_interview.count}}
                </div>

                {% if request.user.employee_get in stage.stage_managers.all or request.user.employee_get in rec.recruitment_managers.all or perms.recruitment.add_candidaterating %}
                <div onclick="event.stopPropagation()" class="oh-sticky-table__td oh-table-config__td"
                    onclick="event.stopPropagation()">
                    {% with request.user.employee_get.candidate_rating.all as candidate_ratings %}
                    {% if candidate_ratings|has_candidate_rating:cand %}
                    <form hx-swap="none" hx-post='{% url "update-candidate-rating" cand.id %}' method="post">
                        {% csrf_token %}
                        <div class="d-block mb-0">
                            <div class="oh-rate" onclick="$(this).parents().closest('form').find('button').click()">
                                {% for i in "54321" %}
                                <input type="radio" id="star{{i}}{{cand.id}}" name="rating" class="rating-radio"
                                    value="{{i}}" {% if candidate_ratings|rating:cand == i %} checked {% endif %} />
                                <label for="star{{i}}{{cand.id}}" title="{{i}} Stars"></label>
                                {% endfor %}
                            </div>
                            <button type="submit" hidden="true"></button>
                            <span id="rating-radio-error"></span>
                        </div>
                    </form>
                    {% else %}
                    <form hx-swap="none" hx-post='{% url "create-candidate-rating" cand.id %}' method="post">
                        {% csrf_token %}
                        <div class="d-block mb-0">
                            <div class="oh-rate" onclick="$(this).parents().closest('form').find('button').click()">
                                {% for i in "54321" %}
                                <input type="radio" id="star{{i}}{{cand.id}}" name="rating" class="rating-radio"
                                    value="{{i}}" />
                                <label for="star{{i}}{{cand.id}}" title="{{i}} Stars"></label>
                                {% endfor %}
                            </div>
                            <button type="submit" hidden="true"></button>
                            <span id="rating-radio-error"></span>
                        </div>
                    </form>
                    {% endif %}
                    {% endwith %}
                </div>
                {% endif %}
                {% if request.user.employee_get in stage.stage_managers.all or perms.recruitment.change_candidate or request.user.employee_get in rec.recruitment_managers.all %}
                    <div onclick="event.stopPropagation()" class="oh-sticky-table__td oh-table-config__td">
                        <select
                            name="stage_id"
                            onchange="checkSequence(this)"
                            data-stage_id = {{stage.id}}
                            data-cand_id = {{cand.id}}
                            data-stage_order = '{{rec.ordered_stages|to_json|safe}}'
                            id="stageChange{{cand.id}}"
                            class="oh-select w-100"
                            data-candidate-id="{{cand.id}}" data-stage-id="{{stage.id}}">
                            {% for sg in rec.ordered_stages %}
                                <option value="{{sg.id}}" {% if sg == cand.stage_id %} selected{% endif %}>{{sg}}</option>
                            {% endfor %}
                        </select>
                        <input onclick="setTimeout(() => {
                            $('#stageReloadContainer{{rec.id}}').click()
                            }, 100);" type="submit" hidden>

                    </div>
                {% endif %}
                {% if request.user.employee_get in stage.stage_managers.all or perms.recruitment.change_candidate or perms.recruitment.add_interviewschedule or perms.recruitment.add_candidatedocumentrequest or request.user.employee_get in rec.recruitment_managers.all %}
                    <div onclick="event.stopPropagation()" class="oh-sticky-table__td oh-table-config__td">
                        <div class="oh-btn-group">
                            {% if perms.recruitment.add_interviewschedule or request.user.employee_get in stage.stage_managers.all %}
                                <button type="button" hx-get='{% url "interview-schedule" cand.id %}' title="{% trans "Schedule Interview" %}"
                                        hx-target="#createTarget"
                                        hx-swap="innerHTML"
                                        data-target="#createModal" class="oh-btn oh-btn--light"
                                        data-toggle="oh-modal-toggle"
                                        style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;">
                                    <ion-icon name="time-outline"></ion-icon>
                                </button>
                            {% endif %}
                            {% if perms.recruitment.change_candidate or request.user.employee_get in stage.stage_managers.all %}
                                <button type="button" hx-get='{% url "send-mail" cand.id %}' title="{% trans " Send Mail" %}"
                                    hx-target="#objectDetailsModalTarget" hx-swap="innerHTML" class="oh-btn oh-btn--light"
                                    data-toggle="oh-modal-toggle" data-target="#objectDetailsModal"
                                    onclick="$('#objectDetailsModal').addClass('oh-modal--show')"
                                    style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;">
                                    <ion-icon name="mail-open-outline"></ion-icon>
                                </button>
                            {% endif %}
                            {% if perms.recruitment.add_skillzonecandidate or request.user.employee_get in stage.stage_managers.all %}
                                <button type="button" class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'To Skill zone' %}"
                                    data-toggle="oh-modal-toggle"
                                    hx-get="{% url 'to-skill-zone' cand.id %}"
                                    hx-target="#createTarget"
                                    hx-swap="innerHTML"
                                    data-target="#createModal"
                                    style="flex: 1 0 auto; width:25px !important;height: 40.68px; padding: 0;color: orangered;">
                                    <ion-icon name="heart-circle-outline"></ion-icon>
                                </button>
                            {% endif %}
                            {% if "onboarding"|app_installed %}
                                {% if perms.recruitment.add_rejectedcandidate or request.user.employee_get in stage.stage_managers.all %}
                                    <button type="button" hx-target="#rejectModalBody" hx-swap="innerHTML"
                                        class="oh-btn oh-btn--light" data-toggle="oh-modal-toggle" data-target="#rejectModal"
                                        onclick="$('#rejectModal').addClass('oh-modal--show')"
                                        hx-get="{% url 'add-to-rejected-candidates' %}?candidate_id={{cand.id}}"
                                        {% if cand.is_offer_rejected %}
                                            style="flex: 1 0 auto;background: #ff4500a3;width:20px;height: 40.68px; padding: 0;color: white;"
                                        {% else %}
                                            style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;"
                                        {% endif %}
                                        {% if cand.is_offer_rejected %} title="{% trans " Added In Rejected Candidates" %}" {% else %}
                                        title="{% trans " Add To Rejected Candidates" %}" {% endif %}>
                                        <ion-icon name="thumbs-down-outline"></ion-icon>
                                    </button>
                                {% endif %}
                            {% endif %}
                            {% if perms.view_stagenote or request.user.employee_get in stage.stage_managers.all %}
                                <button type="button" hx-get='{% url "view-note" cand.id %}' title="{% trans " View Note" %}"
                                    hx-target="#activitySidebar" hx-swap="innerHTML" data-target="#activitySidebar"
                                    onclick="$('#activitySidebar').addClass('oh-activity-sidebar--show')"
                                    hx-swap="innerHTML" class="oh-btn oh-btn--light oh-activity-sidebar__open"
                                    style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;">
                                    <ion-icon name="newspaper-outline"></ion-icon>
                                </button>
                            {% endif %}
                            {% if check_candidate_self_tracking %}
                                {% if perms.recruitment.change_candidate or perms.recruitment.add_candidatedocumentrequest or request.user.employee_get in stage.stage_managers.all or request.user.employee_get in rec.recruitment_managers.all %}
                                    <button type="button" hx-get="{% url 'candidate-document-request' %}?candidate_id={{cand.id}}"
                                        title="{% trans " Request Document" %}"
                                        class="oh-btn oh-btn--light"
                                        hx-target="#objectDetailsModalTarget" data-target="#objectDetailsModal"
                                        data-toggle="oh-modal-toggle"
                                        hx-swap="innerHTML"
                                        style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;">
                                        <ion-icon name="clipboard-outline"></ion-icon>
                                    </button>
                                {% endif %}
                            {% endif %}
                            <a class="oh-btn oh-btn--light {% if not cand.resume.url %}oh-btn--disabled{% endif %}" href="{{cand.resume.url}}"
                                target="_blank" title="{% trans " Resume" %}" rel="noopener noreferrer"
                                style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;"><ion-icon
                                name="document-outline"></ion-icon>
                            </a>
                        </div>
                    </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
</div>
<script>
    $("#stageCount{{stage.id}}").text({{candidates.paginator.count}})
    $("#stageCount{{stage.id}}").attr("title",'{{candidates.paginator.count}} {% trans "Candidates" %}')
</script>
{% if candidates.number %}
<div class="oh-pagination">
    <span class="oh-pagination__page">
        {% trans "Page" %} {{ candidates.number }} {% trans "of" %} {{ candidates.paginator.num_pages }}.
    </span>
    <nav class="oh-pagination__nav">
        <div class="oh-pagination__input-container me-3">
            <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
            <input type="number" name="candidate_page" class="oh-pagination__input"
                value="{{candidates.number}}" hx-target="#pipelineStageContainer{{candidates.0.stage_id.id}}" hx-get="{% url 'candidate-stage-component' %}?{{pd}}&stage_id={{candidates.0.stage_id.id}}" min="1" />
            <span class="oh-pagination__label">{% trans "of" %} {{candidates.paginator.num_pages}}</span>
        </div>
        <ul class="oh-pagination__items">
            {% if candidates.has_previous %}
            <li class="oh-pagination__item oh-pagination__item--wide">
                <a hx-target="#pipelineStageContainer{{candidates.0.stage_id.id}}" hx-get="{% url 'candidate-stage-component' %}?{{pd}}&candidate_page=1&stage_id={{candidates.0.stage_id.id}}" class="oh-pagination__link">{% trans "First" %}</a>
            </li>
            <li class="oh-pagination__item oh-pagination__item--wide">
                <a hx-target="#pipelineStageContainer{{candidates.0.stage_id.id}}" hx-get="{% url 'candidate-stage-component' %}?{{pd}}&candidate_page={{ candidates.previous_page_number }}&stage_id={{candidates.0.stage_id.id}}"
                    class="oh-pagination__link">{% trans "Previous" %}</a>
            </li>
            {% endif %} {% if candidates.has_next %}
            <li class="oh-pagination__item oh-pagination__item--wide">
                <a hx-target="#pipelineStageContainer{{candidates.0.stage_id.id}}" hx-get="{% url 'candidate-stage-component' %}?{{pd}}&candidate_page={{ candidates.next_page_number }}&stage_id={{candidates.0.stage_id.id}}"
                    class="oh-pagination__link">{% trans "Next" %}</a>
            </li>
            <li class="oh-pagination__item oh-pagination__item--wide">
                <a hx-target="#pipelineStageContainer{{candidates.0.stage_id.id}}" hx-get="{% url 'candidate-stage-component' %}?{{pd}}&candidate_page={{ candidates.paginator.num_pages }}&stage_id={{candidates.0.stage_id.id}}"
                    class="oh-pagination__link">{% trans "Last" %}</a>
            </li>
            {% endif %}
        </ul>
    </nav>
</div>
{% endif %}
<script>
    $("#stageCount{{candidates.first.stage_id.id}}").html("{{candidates.count}}")
</script>