{% load i18n static %}
{% if leave_requests %}
    <div class="oh-sticky-table h-100">
        <div class="oh-sticky-table__table ">
            <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 "Period" %}</div>
                    <div class="oh-sticky-table__th" align="center">{% trans "Actions" %}</div>
                </div>
            </div>
            <div class="oh-sticky-table__tbody">
                {% for leave_request in leave_requests %}
                <div class="oh-sticky-table__tr" draggable="true" data-toggle="oh-modal-toggle" data-target="#objectDetailsModalW25"
                hx-get="{% url 'one-request-view' leave_request.id %}?instances_ids={{requests_ids}}&dashboard=true" hx-target="#objectDetailsModalW25Target">
                    <div class="oh-sticky-table__sd">
                        <div class="oh-profile oh-profile--md">
                            <div class="oh-profile__avatar mr-1">
                                <img src="{{leave_request.employee_id.get_avatar}}" class="oh-profile__image"
                                    alt="" />
                            </div>
                            <span class="oh-profile__name oh-text--dark">{{leave_request.employee_id}}</span>
                        </div>
                    </div>
                    <div class="oh-sticky-table__td"><span class="dateformat_changer">{{leave_request.start_date}}</span> {% trans "to" %} <span class="dateformat_changer">{{leave_request.end_date}}</span></div>
                    <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                        <div class="oh-btn-group" >
                            <a type="submit" href="{% url 'request-approve' leave_request.id %}" title="{% trans 'Approve' %}"
                                class="oh-btn oh-btn--success w-100"
                                onclick="event.stopPropagation();return confirm('{% trans "Do you want to Approve this leave request?" %}')">
                                <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
                            </a>
                            <a type="submit" data-toggle="oh-modal-toggle"
                                data-target="#bigModal" hx-get="{% url 'request-cancel' leave_request.id %}" hx-target="#bigModalTarget" title="{% trans 'Reject' %}"
                                class="oh-btn oh-btn--danger w-100">
                                <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% else %}
<div style="height: 100%; 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 class=" float-end mt-3 mb-3">
    {% if validate_attendances.has_previous %}
    <span
        class="oh-card-dashboard__title"
        id="department-previous"
        style="cursor: pointer"
        hx-target="#AttendanceValidateTarget"
        hx-get="{% url 'dashboard-attendance-validate' %}?{{pd}}&page={{ validate_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 validate_attendances.has_next %}
    <span
        class="oh-card-dashboard__title float-end ms-2"
        id="department-previous"
        style="cursor: pointer"
        hx-target="#AttendanceValidateTarget"
        hx-get="{% url 'dashboard-attendance-validate' %}?{{pd}}&page={{ validate_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 validate_attendances.has_next or validate_attendances.has_previous %}
    <span class="oh-pagination__page float-end fw-bold">
        {% trans "Page" %} {{ validate_attendances.number }} {%trans "of" %}
        {{validate_attendances.paginator.num_pages }}
    </span>
    {% endif %}
</div>