{% extends "admin_base.html" %}

{% block page_title %}Leave Requests{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/employee-attendance/assets/css/attendance.css">
{% endblock %}

{% block admin_content %}
<div class="attendance-page">
    <h1>Leave Requests</h1>
    <table class="blocks-admin-table responsive-table">
        <thead><tr><th>Employee</th><th>Type</th><th>Range</th><th>Status</th><th>Action</th></tr></thead>
        <tbody>
            {% for item in items %}
            <tr>
                <td data-label="Employee">{{ item.full_name }} ({{ item.employee_code }})</td>
                <td data-label="Type">{{ item.leave_type }}</td>
                <td data-label="Range">{{ item.start_date | date_in_tz(timezone=settings.timezone, format="%d %b %Y") }} - {{ item.end_date | date_in_tz(timezone=settings.timezone, format="%d %b %Y") }}</td>
                <td data-label="Status">{{ item.status }}</td>
                <td data-label="Action">
                    <form data-form="leave-review" class="attendance-toolbar">
                        <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-leaves-update/{{ item.id }}">
                        <select name="status" class="blocks-input">
                            <option value="requested" {% if item.status == "requested" %}selected{% endif %}>Requested</option>
                            <option value="approved" {% if item.status == "approved" %}selected{% endif %}>Approved</option>
                            <option value="rejected" {% if item.status == "rejected" %}selected{% endif %}>Rejected</option>
                            <option value="cancelled" {% if item.status == "cancelled" %}selected{% endif %}>Cancelled</option>
                        </select>
                        <input type="hidden" name="reviewed_by" value="admin">
                        <button class="blocks-button blocks-button-secondary" type="submit">Save</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/employee-attendance/assets/js/attendance.js"></script>
{% endblock %}