{% extends "base.html" %}

{% block page_title %}My Leave{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/table-view.css?v=4">
<link rel="stylesheet" href="/static/css/mobile-cards.css?v=2">
<link rel="stylesheet" href="/plugins/employee-attendance/assets/css/attendance.css">
{% endblock %}

{% block content %}
<div class="container attendance-leaves-layout">
<section class="attendance-page">
    <header class="attendance-page-header">
        <h1>My Leave</h1>
        {% if employee_profile_linked | default(value=true) %}
        <p class="text-muted">View your leave balance for the year, submit a new request, and track approval status.</p>
        {% endif %}
    </header>

    {% if employee_profile_linked | default(value=true) %}
    <div class="attendance-form-panel attendance-panel-stack">
        <h2 class="attendance-panel-title">Leave balance (year)</h2>
        <div class="table-responsive attendance-table-responsive">
            <table class="responsive-table blocks-admin-table attendance-leaves-table">
                <thead>
                    <tr>
                        <th scope="col">Leave type</th>
                        <th scope="col" class="attendance-num-col">Entitled</th>
                        <th scope="col" class="attendance-num-col">Used</th>
                        <th scope="col" class="attendance-num-col">Balance</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in leave_breakup %}
                    <tr>
                        <td data-label="Leave type">{{ item.leave_type }}</td>
                        <td data-label="Entitled" class="attendance-num-col">{{ item.entitled_days }}</td>
                        <td data-label="Used" class="attendance-num-col">{{ item.used_days }}</td>
                        <td data-label="Balance" class="attendance-num-col">{{ item.balance_days }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="attendance-empty-cell">No leave entitlement rows for your profile yet.</td>
                    </tr>
                    {% endfor %}
                </tbody>
                {% if leave_breakup | length > 0 %}
                <tfoot>
                    <tr>
                        <th scope="row">Total</th>
                        <th class="attendance-num-col">{{ leave_breakup_totals.entitled_days | default(value=0) }}</th>
                        <th class="attendance-num-col">{{ leave_breakup_totals.used_days | default(value=0) }}</th>
                        <th class="attendance-num-col">{{ leave_breakup_totals.balance_days | default(value=0) }}</th>
                    </tr>
                </tfoot>
                {% endif %}
            </table>
        </div>
    </div>

    <div class="attendance-form-panel attendance-panel-stack">
        <h2 class="attendance-panel-title">Request leave</h2>
        <form data-form="leave-create" class="attendance-form-grid">
            <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/my-leaves-create">
            <label>Leave type
                <select name="leave_type" required class="blocks-input">
                    {% if leave_types | length == 0 %}
                    <option value="General">General</option>
                    {% endif %}
                    {% for lt in leave_types %}
                    <option value="{{ lt.name }}">{{ lt.name }}</option>
                    {% endfor %}
                </select>
            </label>
            <label>Start date <input name="start_date" type="date" required class="blocks-input"></label>
            <label>End date <input name="end_date" type="date" required class="blocks-input"></label>
            <label class="attendance-field-span-2">Reason <input name="reason" type="text" autocomplete="off" placeholder="Optional" class="blocks-input"></label>
            <div class="attendance-form-actions">
                <button class="blocks-button blocks-button-primary" type="submit">Submit leave</button>
            </div>
        </form>
    </div>

    <div class="attendance-form-panel attendance-panel-stack">
        <h2 class="attendance-panel-title">My leave requests</h2>
        <div class="table-responsive attendance-table-responsive">
            <table class="responsive-table blocks-admin-table attendance-leaves-table">
                <thead>
                    <tr>
                        <th scope="col">Type</th>
                        <th scope="col">Range</th>
                        <th scope="col" class="attendance-num-col">Days</th>
                        <th scope="col">Ignored dates</th>
                        <th scope="col">Status</th>
                        <th scope="col">Reason</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                    <tr>
                        <td data-label="Type">{{ item.leave_type }}</td>
                        <td data-label="Range"><span class="attendance-date-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") }}</span></td>
                        <td data-label="Days" class="attendance-num-col">{{ item.requested_days | default(value=0) }}</td>
                        <td data-label="Ignored dates">
                            {% if item.ignored_dates_details and item.ignored_dates_details != "" %}
                            {{ item.ignored_dates_details }}
                            {% else %}
                            <span class="text-muted">—</span>
                            {% endif %}
                        </td>
                        <td data-label="Status">
                            {% set st = item.status | default(value="") | lower %}
                            <span class="status-pill {% if st == "approved" %}ok{% elif st == "rejected" or st == "denied" %}bad{% endif %}">{{ item.status | replace(from="_", to=" ") | title }}</span>
                        </td>
                        <td data-label="Reason">{{ item.reason | default(value="") }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="attendance-empty-cell">You have not submitted any leave requests yet.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="attendance-unlinked-notice attendance-form-panel" role="status">
        <div class="attendance-unlinked-notice__icon" aria-hidden="true">
            <i class="fas fa-plane-departure"></i>
        </div>
        <div class="attendance-unlinked-notice__body">
            <p class="attendance-unlinked-notice__title">Not enrolled for leave yet</p>
            <p class="attendance-unlinked-notice__text">Your user account is not linked to an employee record (or leave entitlement), so you cannot request or view leave here. Please contact your office or HR administrator to get enrolled.</p>
        </div>
    </div>
    {% endif %}
</section>
</div>
{% endblock %}

{% block scripts %}
{% if employee_profile_linked | default(value=true) %}
<script src="/plugins/employee-attendance/assets/js/attendance.js"></script>
{% endif %}
{% endblock %}