{% load static i18n offboarding_filter %}

<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
    <span class="oh-card-dashboard__title">{% trans "Task Status" %}</span>
</div>
<div class="oh-card-dashboard__body h-75 overflow-auto position-relative">
    {% if employees %}
    <div
        class="oh-sticky-table__table"
        style="border: 1px solid hsl(213, 22%, 93%)"
    >
        <div class="oh-sticky-table__thead">
            <div class="oh-sticky-table__tr">
                <div class="oh-sticky-table__th">{% trans "Employee" %}</div>
                <div class="oh-sticky-table__th">{% trans "Stage" %}</div>
                <div class="oh-sticky-table__th text-center">
                    {% trans "Task Status" %}
                </div>
            </div>
        </div>
        <div class="oh-sticky-table__tbody">
            {% for employee in employees %}
            <div class="oh-sticky-table__tr oh-multiple-table-sort__movable">
                <div class="oh-sticky-table__sd">
                    <a href="{% url 'employee-view-individual' employee.employee_id.id %}">
                        <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>
                    </a>
                </div>
                <div
                    class="oh-sticky-table__td"
                    onclick="event.stopPropagation()"
                >
                    {{employee.stage_id}}
                </div>
                <div class="oh-sticky-table__td text-center">
                    <div
                        class="oh-checkpoint-badge oh-checkpoint-badge--secondary"
                        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>
            {% endfor %}
        </div>
    </div>
    {% else %}
    <div class= "oh-404">
        <img
            style="display: block; width: 120px; margin: 20px auto"
            src="{% static 'images/ui/conditions.png' %}"
            class=""
        />
        <h3 style="font-size: 16px" class="oh-404__subtitle">
            {% trans "No Pending Tasks for Offboarding Employees." %}
        </h3>
    </div>
    {% endif %}
</div>