{% load i18n offboarding_filter mathfilters %}
{% if response_message %}
<div class="oh-alert-container">
    <div class="oh-alert oh-alert--animated oh-alert--success">
        {{response_message}}
    </div>
</div>
{% endif %}
{% for employee in stage.list %}
    {% if perms.offboarding.view_offboarding or request.user.employee_get|is_in_offboarding:offboarding.offboarding or request.user.employee_get|is_in_managers:offboarding.offboarding or request.user.employee_get|is_in_managers:stage.grouper or request.user.employee_get|is_in_managers:employee or request.user.employee_get|is_manager_for_any_task:stage.grouper.offboardingtask_set.all %}
        <div
            class="oh-sticky-table__tr oh-multiple-table-sort__movable"
            data-employee="{{employee.employee_id.get_full_name}}"
            data-employee-id="{{ employee.id }}"
            hx-get='{% url "offboarding-individual-view" employee.id %}?requests_ids={{offboarding.employee_ids}}'
            hx-target='#objectDetailsModalTarget'
            data-toggle = 'oh-modal-toggle'
            data-target="#objectDetailsModal"
        >
            <div class="oh-sticky-table__sd">
                <div class="oh-profile oh-profile--md">
                    <div class="oh-profile__avatar mr-1">
                        <img
                            src="{{ employee.employee_id.get_avatar }}"
                            class="oh-profile__image"
                        />
                    </div>
                    <span class="oh-profile__name oh-text--dark"
                        >{{ employee.employee_id.get_full_name }}</span
                    >
                </div>
            </div>
            <div class="oh-sticky-table__td">
                {% if employee.notice_period_ends == today %}
                    {% trans "today" %}
                {% elif employee.notice_period_ends < today %}
                    {% trans "Notice period ended" %}
                {% else %}
                    {% if employee.notice_period_ends %}
                        {% trans 'In' %} {{employee.notice_period_ends|timeuntil}}
                    {% endif %}
                {% endif %}
            </div>
            <div class="oh-sticky-table__td dateformat_changer">{{ employee.notice_period_starts }}</div>
            <div class="oh-sticky-table__td dateformat_changer">{{ employee.notice_period_ends }}</div>
            {% if request.user.employee_get|is_any_stage_manager or perms.offboarding.change_offboarding or	perms.offboarding.change_offboardingemployee %}
            <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                <form hx-get="{% url "offboarding-change-stage" %}?employee_ids={{employee.id}}"
                    hx-target="#offboardingBody{{offboarding.offboarding.id}}">
                    {{ stage_forms|stages:employee.stage_id }}
                    <input type="submit" hidden />
                </form>
            </div>
            {% endif %}
            <div class="oh-sticky-table__td text-center">
                <div class="oh-checkpoint-badge oh-checkpoint-badge--primary" title="Completed {{ employee.employeetask_set|completed_tasks }} of {{employee.employeetask_set.all|length}} tasks">
                    {{ employee.employeetask_set|completed_tasks }} / {{employee.employeetask_set.all|length}}
                </div>
            </div>
            <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                <div class="oh-btn-group">
                    {% if request.user.employee_get|is_any_stage_manager or perms.offboarding.change_offboarding or	perms.offboarding.change_offboardingemployee %}
                        <button
                            type="button"
                            hx-get="{% url 'send-mail-employee' employee.employee_id.id %}"
                            title="{% trans 'Send Mail' %}"
                            hx-target="#offboardingModalBody"
                            class="oh-btn oh-btn--light"
                            data-toggle="oh-modal-toggle"
                            data-target="#offboardingModal"
                            style="flex: 1 0 auto; width: 20px; height: 40.68px; padding: 0"
                            onclick="event.stopPropagation()"
                        >
                            <ion-icon name="mail-open-outline"></ion-icon>
                        </button>
                        <button
                            type="button"
                            title="{% trans 'Notes' %}"
                            class="oh-btn oh-btn--light oh-activity-sidebar__open"
                            data-target="#activitySidebar"
                            hx-get="{% url 'view-offboarding-note' employee.id %}"
                            hx-target="#noteContainer"
                            style="flex: 1 0 auto; width: 20px; height: 40.68px; padding: 0"
                            onclick="event.stopPropagation()"
                        >
                            <ion-icon name="newspaper-outline"></ion-icon>
                        </button>
                        {% if stage.grouper.type == "archived" %}
                        <a
                            type="button"
                            hx-get="{% url 'employee-archive' employee.employee_id.id %}"
                            hx-target="#objectDetailsModalTarget"
                            data-toggle="oh-modal-toggle"
                            data-target="#objectDetailsModal"
                            title="{% if not employee.employee_id.is_active %}{% trans 'Un Archive' %} {% else %} {% trans 'Archive' %}{% endif %}"
                            class="oh-btn oh-btn--light tex-primary"
                            style="flex: 1 0 auto; width: 20px; height: 40.68px; padding: 0"
                            onclick="event.stopPropagation()"
                            ><ion-icon name="archive"></ion-icon
                        ></a>
                        {% else %}
                        <a
                            type="button"
                            hx-get="{% url "add-employee" %}?instance_id={{employee.id}}&stage_id={{stage.grouper.id}}"
                            hx-target="#objectDetailsModalTarget"
                            data-toggle="oh-modal-toggle"
                            data-target="#objectDetailsModal"
                            title="{% trans 'Edit' %}"
                            class="oh-btn oh-btn--light tex-primary"
                            style="flex: 1 0 auto; width: 20px; height: 40.68px; padding: 0"
                            onclick="event.stopPropagation()"
                            ><ion-icon name="create-outline"></ion-icon
                        ></a>
                        {% endif %}
                        {% if employee.employee_id.get_archive_condition %}
                        <a
                            type="button"
                            title="{% trans 'Show managing records' %}"
                            hx-get="{% url 'get-manager-in' %}?employee_id={{employee.employee_id.id}}&offboarding=True"
                            hx-target="#objectDetailsModalTarget"
                            data-toggle="oh-modal-toggle"
                            data-target="#objectDetailsModal"
                            class="oh-btn oh-btn--light tex-primary"
                            style="flex: 1 0 auto; width: 20px; height: 40.68px; padding: 0"
                            onclick="event.stopPropagation()"
                            ><ion-icon name="people-outline"></ion-icon
                        ></a>
                        {% endif %}
                        {% if perms.offboarding.delete_offboardingemployee %}
                        <a
                            type="button"
                            style="flex: 1 0 auto; width: 20px; height: 40.68px; padding: 0"
                            hx-confirm="Do you want to delete this offboarding user?"
                            hx-post="{% url "delete-offboarding-employee" %}?employee_ids={{employee.id}}"
                            hx-target = "#offboardingContainer"
                            title="{% trans 'Delete' %}"
                            class="oh-btn oh-btn--light"
                            ><ion-icon name="trash-outline"></ion-icon>
                        </a>
                        {% endif %}
                    {% else %}
                    <button
                        type="button"
                        title="{% trans 'Notes' %}"
                        class="oh-btn oh-btn--light oh-activity-sidebar__open"
                        data-target="#activitySidebar"
                        hx-get="{% url 'view-offboarding-note' employee.id %}"
                        hx-target="#noteContainer"
                        style="flex: 1 0 auto; width: 20px; height: 40.68px; padding: 0"
                        onclick="event.stopPropagation()"
                    >
                        <ion-icon name="newspaper-outline"></ion-icon>
                    </button>
                    {% endif %}
                </div>
            </div>
            {% for task in stage.grouper.offboardingtask_set.all %}
            {% if task|have_task:employee %}
                <div class="oh-sticky-table__td">
                {% for assinged_tasks in employee|get_assigned_task:task %}
                <select
                    hx-get="{% url "update-task-status" %}?stage_id={{stage.grouper.id}}&employee_ids={{employee.id}}&task_id={{assinged_tasks.task_id.id}}"
                    hx-target="#offboardingBody{{offboarding.offboarding.id}}"
                    name="task_status"
                    id="task_status{{assinged_tasks.id}}"
                    class="oh-select-custom w-100"
                    onclick="event.stopPropagation()"
                >
                    {% for assinged_task in assinged_tasks.statuses %}
                    {% if assinged_tasks.status == assinged_task.0 %}
                    <option value="{{ assinged_task.0 }}" selected>
                        {{ assinged_task.1 }}
                    </option>
                    {% else %}
                    <option value="{{ assinged_task.0 }}">{{ assinged_task.1 }}</option>
                    {% endif %} {% endfor %}
                </select>
                {% endfor %}
                </div>
                {% else %}
                {% if perms.offboarding.add_offboardingtask or request.user.employee_get|any_manager %}
                    <div class="oh-sticky-table__td">
                    <button
                        hx-get="{% url "offboarding-assign-task" %}?employee_ids={{employee.id}}&task_id={{task.id}}"
                        hx-target="#offboardingBody{{offboarding.offboarding.id}}"
                        class="oh-checkpoint-badge text-info"
                        data-toggle="oh-modal-toggle"
                        onclick="event.stopPropagation()"
                    >
                        {% trans 'Assign' %}
                    </button>
                    </div>
                    {% endif %}
                {% endif %}
            {% endfor %}
            {% if perms.offboarding.add_offboardingtask or request.user.employee_get|any_manager %}
            <div class="oh-sticky-table__td"></div>
            {% endif %}
        </div>
    {% endif %}
{% endfor %}
<script>
    function showArchived($element) {
        let checked = $element.is(":checked");
        if (checked) {
            $element
                .closest(".oh-accordion-meta")
                .find(".oh-sticky-table__tr[data-employee-id]")
                .show();
        } else {
            $element
                .closest(".oh-accordion-meta")
                .find(".oh-sticky-table__tr[data-employee-id]")
                .hide();
        }
    }
    var selects = $("[name=stage_id][data-initial-stage]");
    $.each(selects, function (indexInArray, valueOfElement) {
        $(valueOfElement).val($(valueOfElement).attr("data-initial-stage"));
    });
    function submitForm(elem) {
        $(elem).siblings(".add_more_submit").click();
    }
</script>
