<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_mobile.TeamLeaves">
        <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">Team Leaves</div>
                </div>

                <t t-if="state.loaded">
                    <t t-if="!state.team.length">
                        <div class="o_xeno_m_card o_xeno_m_notice">No one on your team is on leave today or coming up.</div>
                    </t>

                    <t t-foreach="state.team" 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-attf-class="o_xeno_m_pill {{lv.statusClass}}" t-esc="lv.statusLabel"/>
                            </div>
                        </div>
                    </t>
                </t>

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