<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_leave.LeaveList">
        <div class="o_xeno_hr_page" t-ref="root">
            <div class="o_xeno_hr_header">
                <div>
                    <h1>Leaves</h1>
                    <p class="o_xeno_hr_subtitle">Multi-step approval chain — minimum 2 approvers (supervisor → HR)</p>
                </div>
                <div class="o_xeno_hr_header_actions">
                    <button class="btn btn-outline-secondary" t-on-click="onExport">
                        <i class="fa fa-download me-1"/>Export
                    </button>
                    <button class="btn btn-outline-secondary" t-on-click="onTemplate">
                        <i class="fa fa-file-text-o me-1"/>Template
                    </button>
                    <button class="btn btn-outline-secondary" t-on-click="onImport">
                        <i class="fa fa-upload me-1"/>Import
                    </button>
                    <input type="file" t-ref="importFile" accept=".xlsx"
                           class="d-none" t-on-change="onImportFileChange"/>
                    <button class="btn btn-outline-secondary" t-on-click="onHolidayDeduct">
                        <i class="fa fa-calendar-minus-o me-1"/>Deduct Holiday
                    </button>
                    <button class="btn btn-outline-secondary" t-on-click="onLateDeduct">
                        <i class="fa fa-clock-o me-1"/>Late Check-in Deduction
                    </button>
                    <button class="btn btn-outline-secondary" t-on-click="onHrCreate">
                        <i class="fa fa-user-plus me-1"/>Create Leave (HR)
                    </button>
                    <button class="btn btn-primary" t-on-click="onNewRequest">
                        <i class="fa fa-plus me-1"/>New Request
                    </button>
                </div>
            </div>

            <div class="o_xeno_hr_card">
                <div class="o_xeno_hr_toolbar">
                    <div class="o_xeno_pill_tabs">
                        <t t-foreach="tabs" t-as="tab" t-key="tab.id">
                            <button t-attf-class="o_xeno_pill_tab {{ state.tab === tab.id ? 'active' : '' }}"
                                    t-on-click="() => this.onTabClick(tab.id)" t-esc="tab.label"/>
                        </t>
                    </div>
                    <select class="form-select o_xeno_department_filter" t-on-change="onDepartmentChange">
                        <option value="">All Departments</option>
                        <t t-foreach="state.departments" t-as="dept" t-key="dept.id">
                            <option t-att-value="dept.id" t-esc="dept.name"/>
                        </t>
                    </select>
                    <select class="form-select o_xeno_employee_filter" t-on-change="onEmployeeChange">
                        <option value="">All Employees</option>
                        <t t-foreach="state.employees" t-as="emp" t-key="emp.id">
                            <option t-att-value="emp.id" t-esc="emp.name"/>
                        </t>
                    </select>
                    <select class="form-select o_xeno_leave_type_filter" t-on-change="onLeaveTypeChange">
                        <option value="">All Leave Types</option>
                        <t t-foreach="state.leaveTypes" t-as="ltype" t-key="ltype.id">
                            <option t-att-value="ltype.id" t-esc="ltype.name"/>
                        </t>
                    </select>
                    <label class="o_xeno_deduction_check">
                        <input type="checkbox" t-att-checked="state.showHolidayDeductions"
                               t-on-change="onToggleHolidayDeductions"/>
                        Show Company holiday deductions
                    </label>
                    <label class="o_xeno_deduction_check">
                        <input type="checkbox" t-att-checked="state.showLateDeductions"
                               t-on-change="onToggleLateDeductions"/>
                        Show Late deductions
                    </label>
                </div>

                <table class="o_xeno_hr_table">
                    <thead>
                        <tr>
                            <th>Employee</th>
                            <th>Leave Type</th>
                            <th>Dates</th>
                            <th>Days</th>
                            <th>Reason</th>
                            <th>Approval Chain</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr t-if="!state.loading and !state.leaves.length">
                            <td colspan="8" class="text-center text-muted py-4">No leave requests here.</td>
                        </tr>
                        <t t-foreach="state.leaves" t-as="leave" t-key="leave.id">
                            <tr t-att-data-leave-id="leave.id">
                                <td>
                                    <div class="o_xeno_employee_cell">
                                        <img t-if="leave.hasPhoto" class="o_xeno_avatar_photo" t-att-src="leave.photoUrl" alt=""/>
                                        <span t-else="" class="o_xeno_avatar" t-attf-style="background-color: {{leave.avatarColor}}"
                                              t-esc="leave.avatarInitial"/>
                                        <div>
                                            <div class="fw-bold" t-esc="leave.employeeName"/>
                                            <div class="text-muted small" t-esc="leave.employeeCode"/>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div t-esc="leave.leaveTypeName"/>
                                    <div class="text-muted small" t-esc="leave.requestUnitLabel"/>
                                </td>
                                <td>
                                    <div t-esc="leave.dateFrom"/>
                                    <div t-esc="leave.dateTo"/>
                                </td>
                                <td t-esc="leave.days"/>
                                <td class="o_xeno_reason_cell" t-esc="leave.reason"/>
                                <td>
                                    <div class="o_xeno_chain">
                                        <t t-foreach="leave.steps" t-as="step" t-key="step.id">
                                            <div class="o_xeno_chain_step">
                                                <span t-attf-class="o_xeno_chain_icon o_xeno_chain_icon_{{step.state}}">
                                                    <i t-if="step.state === 'approved'" class="fa fa-check"/>
                                                    <i t-elif="step.state === 'rejected'" class="fa fa-times"/>
                                                    <i t-else="" class="fa fa-clock-o"/>
                                                </span>
                                                <div class="o_xeno_chain_label" t-esc="step.label"/>
                                                <div class="o_xeno_chain_approver" t-esc="step.approverName"/>
                                            </div>
                                            <div t-if="!step_last" class="o_xeno_chain_connector"/>
                                        </t>
                                    </div>
                                </td>
                                <td>
                                    <span t-attf-class="o_xeno_pill {{leave.statusClass}}" t-esc="leave.statusLabel"/>
                                </td>
                                <td>
                                    <div class="o_xeno_actions">
                                        <div class="o_xeno_actions_pair">
                                            <a href="#" t-on-click.prevent="() => this.onEdit(leave.id)">
                                                <i class="fa fa-pencil"/> Edit</a>
                                            <span class="o_xeno_actions_sep">/</span>
                                            <a href="#" class="o_xeno_action_warn" t-on-click.prevent="() => this.onOverride(leave.id)">
                                                <i class="fa fa-shield"/> Override</a>
                                        </div>
                                        <a href="#" t-on-click.prevent="() => this.onAddApprover(leave.id)">
                                            <i class="fa fa-plus"/> Add Approver</a>
                                        <a href="#" class="o_xeno_action_danger" t-on-click.prevent="() => this.onCancel(leave.id)">
                                            <i class="fa fa-ban"/> Cancel</a>
                                    </div>
                                </td>
                            </tr>
                        </t>
                    </tbody>
                </table>
            </div>

            <div class="o_xeno_pager" t-if="state.totalCount">
                <span class="o_xeno_pager_range">
                    <t t-esc="pageStart"/>-<t t-esc="pageEnd"/> of <t t-esc="state.totalCount"/>
                </span>
                <div class="o_xeno_pager_nav">
                    <button class="btn btn-outline-secondary btn-sm" t-att-disabled="!hasPrevPage"
                            t-on-click="onPrevPage">
                        <i class="fa fa-chevron-left"/> Prev</button>
                    <button class="btn btn-outline-secondary btn-sm" t-att-disabled="!hasNextPage"
                            t-on-click="onNextPage">
                        Next <i class="fa fa-chevron-right"/></button>
                </div>
            </div>
        </div>
    </t>
</templates>
