{% 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 class="oh-empty h-100">
        <p class="oh-empty__message">
            <img style="display: block;width: 70px;margin: 20px auto ;" src="{% static "/images/ui/no_records.svg" %}" class="" alt=""/>
            {% trans "No records available at the moment." %}
        </p>
    </div>
{% endif %}
{% if leave_requests.has_next or leave_requests.has_previous %}
    <div class=" float-end mt-3 mb-3">
        {% if leave_requests.has_previous %}
            <span class="oh-card-dashboard__title" style="cursor: pointer"
                hx-target="#leaveApproveCardBody"
                hx-get="{% url 'leave-request-and-approve' %}?{{pd}}&page={{ leave_requests.previous_page_number }}"
                hx-trigger="click delay:0.3s">
                <ion-icon name="caret-back-outline" role="img" class="md hydrated" aria-label="caret back outline"></ion-icon>
            </span>
        {% endif %}

        {% if leave_requests.has_next %}
            <span class="oh-card-dashboard__title float-end ms-2" style="cursor: pointer"
                hx-target="#leaveApproveCardBody"
                hx-get="{% url 'leave-request-and-approve' %}?{{pd}}&page={{ leave_requests.next_page_number }}"
                hx-trigger="click delay:0.3s">
                <ion-icon name="caret-forward-outline" role="img" class="md hydrated"
                    aria-label="caret back outline"></ion-icon>
            </span>
        {% endif %}
        {% if leave_requests.has_next or leave_requests.has_previous %}
            <span class="oh-pagination__page float-end fw-bold">
                {% trans "Page" %} {{ leave_requests.number }} {%trans "of" %}
                {{leave_requests.paginator.num_pages }}
            </span>
        {% endif %}
    </div>
{% endif %}