<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_mobile.LeaveApproval">
        <div class="o_xeno_mobile">
            <div class="o_xeno_mobile_shell">

                <div class="o_xeno_m_hero">
                    <div class="o_xeno_m_hero_top">
                        <div class="o_xeno_m_brand">XEN<span>HR</span></div>
                        <button class="o_xeno_m_home_btn" t-on-click="goHome" aria-label="Back to Attendance" title="Back to Attendance">
                            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M3 11.5 12 4l9 7.5"/>
                                <path d="M5.5 10v9a1 1 0 0 0 1 1H9a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h2.5a1 1 0 0 0 1-1v-9"/>
                            </svg>
                        </button>
                    </div>
                    <div class="o_xeno_m_hero_title">Leave Approval</div>
                </div>

                <t t-if="state.loaded">
                    <t t-if="!state.pending.length">
                        <div class="o_xeno_m_card o_xeno_m_notice">Nothing waiting for your approval right now.</div>
                    </t>

                    <t t-foreach="state.pending" t-as="lv" t-key="lv.id">
                        <div class="o_xeno_m_card o_xeno_m_approval_card">
                            <div class="o_xeno_m_leave_row">
                                <div class="o_xeno_m_leave_main">
                                    <div class="o_xeno_m_leave_type" t-esc="lv.employeeName"/>
                                    <div class="o_xeno_m_leave_dates" t-esc="lv.leaveTypeName"/>
                                    <div t-if="lv.requestUnitLabel" class="o_xeno_m_leave_dates">
                                        <t t-esc="lv.requestUnitLabel"/> (<t t-esc="lv.days"/> d)
                                    </div>
                                    <div class="o_xeno_m_leave_dates">
                                        <t t-esc="lv.dateFrom"/> → <t t-esc="lv.dateTo"/>
                                    </div>
                                    <div t-if="lv.timeRange" class="o_xeno_m_leave_dates">
                                        <t t-esc="lv.timeRange"/> (<t t-esc="lv.timeDurationLabel"/>)
                                    </div>
                                    <div t-if="lv.reason" class="o_xeno_m_approval_reason" t-esc="lv.reason"/>
                                </div>
                                <!-- <span t-if="lv.stepLabel" class="o_xeno_m_pill is_pending" t-esc="lv.stepLabel"/> -->
                            </div>

                            <t t-if="!lv.decision">
                                <div class="o_xeno_m_approval_actions">
                                    <button class="o_xeno_m_approve_btn" t-on-click="() => this.openDecision(lv, 'approve')">Approve</button>
                                    <button class="o_xeno_m_reject_btn" t-on-click="() => this.openDecision(lv, 'reject')">Reject</button>
                                </div>
                            </t>
                            <t t-else="">
                                <div class="o_xeno_m_decision_box">
                                    <t t-if="!lv.analysisShown">
                                        <label class="o_xeno_m_label">
                                            <t t-if="lv.decision === 'approve'">Note (optional)</t>
                                            <t t-else="">Reason (optional)</t>
                                        </label>
                                        <textarea class="o_xeno_m_input o_xeno_m_textarea" rows="2"
                                                  t-att-value="lv.note"
                                                  t-on-input="(ev) => this.onNote(lv, ev)"/>
                                        <div class="o_xeno_m_approval_actions">
                                            <button class="o_xeno_m_cancel_btn" t-att-disabled="lv.busy" t-on-click="() => this.cancelDecision(lv)">Cancel</button>
                                            <button t-attf-class="{{ lv.decision === 'approve' ? 'o_xeno_m_approve_btn' : 'o_xeno_m_reject_btn' }}"
                                                    t-att-disabled="lv.analysisLoading"
                                                    t-on-click="() => this.onConfirmClick(lv)">
                                                <t t-if="lv.analysisLoading">Checking…</t>
                                                <t t-elif="lv.decision === 'approve'">Confirm Approve</t>
                                                <t t-else="">Confirm Reject</t>
                                            </button>
                                        </div>
                                    </t>
                                    <t t-else="">
                                        <label class="o_xeno_m_label">Analysis</label>
                                        <div class="o_xeno_m_analysis">
                                            <t t-foreach="lv.analysis" t-as="chk" t-key="chk_index">
                                                <div class="o_xeno_m_analysis_row">
                                                    <span t-attf-class="o_xeno_m_analysis_dot {{ chk.flagged ? 'is_flagged' : '' }}"/>
                                                    <span t-esc="chk.text"/>
                                                </div>
                                            </t>
                                        </div>
                                        <div class="o_xeno_m_approval_actions">
                                            <button class="o_xeno_m_cancel_btn" t-att-disabled="lv.busy" t-on-click="() => this.cancelDecision(lv)">Cancel</button>
                                            <button t-attf-class="{{ lv.decision === 'approve' ? 'o_xeno_m_approve_btn' : 'o_xeno_m_reject_btn' }}"
                                                    t-att-disabled="lv.busy"
                                                    t-on-click="() => this.confirmDecision(lv)">
                                                <t t-if="lv.busy">Saving…</t>
                                                <t t-elif="lv.decision === 'approve'">Yes, Approve</t>
                                                <t t-else="">Yes, Reject</t>
                                            </button>
                                        </div>
                                    </t>
                                </div>
                            </t>
                        </div>
                    </t>
                </t>

                <div t-if="!state.loaded" class="o_xeno_m_card o_xeno_m_loading">Loading…</div>
            </div>
        </div>
    </t>
</templates>
