{% load static i18n offboarding_filter %}

<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
    <span class="oh-card-dashboard__title"
        >{% trans "Offboarding Employees Feedbacks" %}</span
    >
</div>
<div class="oh-card-dashboard__body h-75 overflow-auto position-relative">
    {% if feedbacks %}
    <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 "Feedback" %}</div>
                <div class="oh-sticky-table__th">{% trans "Status" %}</div>
            </div>
        </div>
        <div class="oh-sticky-table__tbody">
            {% for feedback in feedbacks %}
            <div class="oh-sticky-table__tr oh-multiple-table-sort__movable">
                <div class="oh-sticky-table__sd">
                    <a href="">
                        <div class="oh-profile oh-profile--md">
                            <div class="oh-profile__avatar mr-1">
                                <img
                                    src="{{ feedback.employee_id.get_avatar }}"
                                    class="oh-profile__image"
                                />
                            </div>
                            <span class="oh-profile__name oh-text--dark"
                                >{{ feedback.employee_id.get_full_name}}
                            </span>
                        </div>
                    </a>
                </div>
                <div
                    class="oh-sticky-table__td"
                    onclick="event.stopPropagation()"
                >
                    {{feedback.review_cycle}}
                </div>
                <div
                    class="oh-sticky-table__td fw-bold"
                    onclick="event.stopPropagation()"
                >
                    {{feedback.status}}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% else %}
    <div class= "oh-404">
        <img
            style="display: block; width: 120px; margin: 20px auto"
            src="{% static 'images/ui/feedback.png' %}"
            class=""
        />
        <h3 style="font-size: 16px" class="oh-404__subtitle">
            {% trans "No feedbacks for Offboarding Employees." %}
        </h3>
    </div>
    {% endif %}
</div>
<script>
    $(document).ready(function () {
        $("[data-toggle='oh-modal-toggle']").on("click", function () {
            var target = $(this).data("target");
            $(target).toggleClass("oh-modal--show");
        });
    });
</script>