<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_leave.LeaveApproval">
        <div class="o_xeno_hr_page">
            <div class="o_xeno_hr_card mb-4">
                <div class="o_xeno_section_title">
                    Pending My Approval
                    <span class="o_xeno_count_badge" t-esc="state.pending.length"/>
                </div>
                <p class="o_xeno_hr_subtitle">Leave requests where you are the assigned approver for the current step</p>

                <table class="o_xeno_hr_table">
                    <thead>
                        <tr>
                            <th>Employee</th>
                            <th>Leave Type</th>
                            <th>Dates (Times)</th>
                            <th>Duration</th>
                            <th>Reason</th>
                            <th>Your Step</th>
                            <th>Full Chain</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr t-if="!state.loading and !state.pending.length">
                            <td colspan="8" class="text-center text-muted py-4">Nothing waiting on your approval right now.</td>
                        </tr>
                        <t t-foreach="state.pending" t-as="leave" t-key="leave.id">
                            <tr>
                                <td>
                                    <div class="fw-bold" t-esc="leave.employeeName"/>
                                </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.duration"/>
                                <td class="o_xeno_reason_cell" t-esc="leave.reason"/>
                                <td>
                                    <span class="o_xeno_pill o_xeno_pill_step_current">
                                        <i class="fa fa-clock-o me-1"/><t t-esc="leave.yourStep"/>
                                    </span>
                                </td>
                                <td>
                                    <div class="o_xeno_full_chain">
                                        <t t-foreach="leave.steps" t-as="step" t-key="step.id">
                                            <span t-attf-class="o_xeno_pill o_xeno_chain_pill {{
                                                step.state === 'approved' ? 'o_xeno_pill_approved'
                                                : step.isCurrent ? 'o_xeno_pill_step_current'
                                                : 'o_xeno_pill_muted' }}"
                                                  t-esc="step.label"/>
                                        </t>
                                    </div>
                                </td>
                                <td>
                                    <div class="o_xeno_approval_buttons">
                                        <button class="btn btn-sm o_xeno_btn_approve" t-on-click="() => this.onApprove(leave.id)">
                                            <i class="fa fa-check-circle me-1"/>Approve</button>
                                        <button class="btn btn-sm o_xeno_btn_reject" t-on-click="() => this.onReject(leave.id)">
                                            <i class="fa fa-times-circle me-1"/>Reject</button>
                                    </div>
                                </td>
                            </tr>
                        </t>
                    </tbody>
                </table>
            </div>

            <div class="o_xeno_hr_card">
                <div class="o_xeno_section_title">
                    My Team Leaves
                    <span class="o_xeno_count_badge" t-esc="state.team.length"/>
                </div>
                <p class="o_xeno_hr_subtitle">Your team members' leave requests</p>

                <table class="o_xeno_hr_table">
                    <thead>
                        <tr>
                            <th>Employee</th>
                            <th>Leave Type</th>
                            <th>Dates (Times)</th>
                            <th>Duration</th>
                            <th>Reason</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr t-if="!state.loading and !state.team.length">
                            <td colspan="6" class="text-center text-muted py-4">No leave history for your team yet.</td>
                        </tr>
                        <t t-foreach="state.team" t-as="leave" t-key="leave.id">
                            <tr>
                                <td>
                                    <div class="fw-bold" t-esc="leave.employeeName"/>
                                </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.duration"/>
                                <td class="o_xeno_reason_cell o_xeno_reason_cell_wrap" t-esc="leave.reason"/>
                                <td>
                                    <span t-attf-class="o_xeno_pill {{leave.statusClass}}" t-esc="leave.statusLabel"/>
                                </td>
                            </tr>
                        </t>
                    </tbody>
                </table>
            </div>
        </div>
    </t>
</templates>
