<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_mobile.Balance">
        <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 Balance</div>
                    <div t-if="state.employeeName" class="o_xeno_m_date" t-esc="state.employeeName"/>
                </div>

                <t t-if="state.loaded and !state.linked">
                    <div class="o_xeno_m_card o_xeno_m_notice">Your user isn't linked to an employee record yet. Please contact HR.</div>
                </t>

                <t t-if="state.loaded and state.linked">
                    <t t-if="!state.balances.length">
                        <div class="o_xeno_m_card o_xeno_m_notice">No leave balances allocated yet.</div>
                    </t>
                    <t t-foreach="state.balances" t-as="bal" t-key="bal.typeName">
                        <div class="o_xeno_m_card o_xeno_m_bal_card" t-attf-style="border-left-color: {{bal.color}};">
                            <div class="o_xeno_m_bal_top">
                                <div class="o_xeno_m_bal_type" t-attf-style="color: {{bal.color}};" t-esc="bal.typeName"/>
                                <div class="o_xeno_m_bal_remaining">
                                    <span class="o_xeno_m_bal_remaining_val" t-esc="bal.remaining"/> days left</div>
                            </div>
                            <div class="o_xeno_m_bal_bar">
                                <div class="o_xeno_m_bal_bar_fill"
                                     t-attf-style="width: {{bal.remainingPct}}%; background-color: {{bal.color}};"/>
                            </div>
                            <div class="o_xeno_m_bal_stats">
                                <div class="o_xeno_m_bal_stat">
                                    <div class="o_xeno_m_bal_stat_val" t-esc="bal.allocated"/>
                                    <div class="o_xeno_m_bal_stat_lbl">Allocated</div>
                                </div>
                                <div class="o_xeno_m_bal_stat">
                                    <div class="o_xeno_m_bal_stat_val" t-esc="bal.used"/>
                                    <div class="o_xeno_m_bal_stat_lbl">Used</div>
                                </div>
                                <div class="o_xeno_m_bal_stat">
                                    <div class="o_xeno_m_bal_stat_val o_xeno_m_bal_pending" t-esc="bal.pending"/>
                                    <div class="o_xeno_m_bal_stat_lbl">Pending</div>
                                </div>
                                <div class="o_xeno_m_bal_stat">
                                    <div class="o_xeno_m_bal_stat_val" t-attf-style="color: {{bal.color}};" t-esc="bal.remaining"/>
                                    <div class="o_xeno_m_bal_stat_lbl">Remaining</div>
                                </div>
                            </div>
                        </div>
                    </t>
                </t>

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