{% load i18n static %}

<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">


    <span class="oh-card-dashboard__title"
        >{% trans 'Overtime To Approve' %}
    </span>
    <span class="float-end chart_close_button " role="button" data-chart="overtime_approve" hx-post="{% url 'employee-charts' %}?chart_id=overtime_approve" hx-target="#OTApprove" hx-swap="outerHTML">
      <i class="material-icons fw-lighter fs-5">close</i>
    </span>
</div>

<div class="oh-card-dashboard__body" id="OTApproveBody" style="height: 75%">
    {% if overtime_attendances %}
    <div class="oh-sticky-table h-100">
        <div class="oh-sticky-table__table oh-table--sortable">
            <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 "Overtime" %}
                    </div>
                    <div class="oh-sticky-table__th" align="center">{% trans "Actions" %}</div>
                </div>
            </div>
            {% for attendance in overtime_attendances %}
            <div class="oh-sticky-table__tbody">
                <div
                    class="oh-sticky-table__tr"
                    draggable="false"
                    data-toggle="oh-modal-toggle"
                    data-target="#objectDetailsModalW25"
                    hx-target="#objectDetailsModalW25Target"
                    hx-get="{% url 'user-request-one-view' attendance.id %}?ot=true&instances_ids={{ot_attendances_ids}}&dashboard=true"
                >
                    <div class="oh-sticky-table__sd">
                        <div class="oh-profile oh-profile--md">
                            <div class="oh-profile__avatar mr-1">
                                <img
                                    src="{{attendance.employee_id.get_avatar}}"
                                    class="oh-profile__image"
                                    alt=""
                                />
                            </div>
                            <span class="oh-profile__name oh-text--dark"
                                >{{attendance.employee_id}}</span
                            >
                        </div>
                    </div>
                    <div class="oh-sticky-table__td">
                        {{attendance.attendance_overtime}}
                    </div>
                    <div class="oh-sticky-table__td">
                        <a
                            href="{% url 'approve-overtime' attendance.id %}"
                            onclick="event.stopPropagation();"
                            class="oh-btn oh-btn--info"
                        >
                            {% trans "Approve" %}
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% else %}
    <div
        style="
            height: 380px;
            display: flex;
            align-items: center;
            justify-content: center;
        "
        class=""
    >
        <div style="" class="">
            <img
                style="display: block; width: 70px; margin: 20px auto"
                src="{% static "/images/ui/joiningchart.png" %}"
                class=""
                alt=""
            />
            <h3 style="font-size: 16px" class="oh-404__subtitle">
                {% trans "No data Found..." %}
            </h3>
        </div>
    </div>
    {% endif %}
</div>
<div class=" float-end mt-3 mb-3">
    {% if overtime_attendances.has_previous %}
    <span
        class="oh-card-dashboard__title"
        id="department-previous"
        style="cursor: pointer"
        hx-target="#OTApproveTarget"
        hx-get="{% url 'dashboard-overtime-approve' %}?{{pd}}&page={{ overtime_attendances.previous_page_number }}"
        hx-trigger="click delay:0.3s"
        title="Previous Page"
    >
        <ion-icon
            name="caret-back-outline"
            role="img"
            class="md hydrated"
            aria-label="caret back outline"
        ></ion-icon>
    </span>
    {% endif %}
    {% if overtime_attendances.has_next %}
    <span
        class="oh-card-dashboard__title float-end ms-2 "
        id="department-previous"
        style="cursor: pointer"
        hx-target="#OTApproveTarget"
        hx-get="{% url 'dashboard-overtime-approve' %}?{{pd}}&page={{ overtime_attendances.next_page_number }}"
        hx-trigger="click delay:0.3s"
        title="Next Page"
    >
        <ion-icon
            name="caret-forward-outline"
            role="img"
            class="md hydrated"
            aria-label="caret back outline"
        ></ion-icon>
    </span>
    {% endif %}
    {% if overtime_attendances.has_next or overtime_attendances.has_previous %}
    <span class="oh-pagination__page float-end fw-bold">
        {% trans "Page" %} {{ overtime_attendances.number }} {%trans "of" %}
        {{overtime_attendances.paginator.num_pages }}
    </span>
    {% endif %}
</div>