<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_mobile.Attendance">
        <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>
                        <div class="o_xeno_m_userbox">
                            <span class="o_xeno_m_username" t-esc="state.employeeName"/>
                            <a class="o_xeno_m_logout_btn" href="/web/session/logout"
                               aria-label="Log out" title="Log out">
                                <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="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                                    <path d="M16 17l5-5-5-5"/>
                                    <path d="M21 12H9"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                    <div class="o_xeno_m_clock" t-esc="clockLabel"/>
                    <div class="o_xeno_m_date" t-esc="dateLabel"/>
                </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">
                    <div class="o_xeno_m_card o_xeno_m_status_card">
                        <div t-attf-class="o_xeno_m_status {{ isPresent ? 'is_in' : 'is_out' }}">
                            <span class="o_xeno_m_status_dot"/>
                            <span t-esc="statusLabel"/>
                        </div>
                        <button class="o_xeno_m_bigbtn"
                                t-att-class="{ 'is_checkout': isPresent, 'is_busy': state.busy }"
                                t-att-disabled="state.busy"
                                t-on-click="onToggle">
                            <t t-if="state.busy">Please wait…</t>
                            <t t-elif="isPresent">Check Out</t>
                            <t t-else="">Check In</t>
                        </button>
                    </div>

                    <div class="o_xeno_m_card">
                        <div class="o_xeno_m_card_title">Today's Attendance</div>
                        <div class="o_xeno_m_times">
                            <div class="o_xeno_m_time_item">
                                <div class="o_xeno_m_time_label">🟢 Check In</div>
                                <div class="o_xeno_m_time_val" t-esc="state.todayCheckIn or state.fingerprintInTime or '--:--'"/>
                            </div>
                            <div class="o_xeno_m_time_divider"/>
                            <div class="o_xeno_m_time_item">
                                <div class="o_xeno_m_time_label">🔴 Check Out</div>
                                <div class="o_xeno_m_time_val" t-esc="state.todayCheckOut or '--:--'"/>
                            </div>
                        </div>
                    </div>

                    <div class="o_xeno_m_card">
                        <div class="o_xeno_m_card_title">This Month <span class="o_xeno_m_muted" t-esc="monthLabel"/></div>
                        <div class="o_xeno_m_stats">
                            <div class="o_xeno_m_stat" style="border-top-color:#81c784;">
                                <div class="o_xeno_m_stat_val" t-esc="state.present"/>
                                <div class="o_xeno_m_stat_lbl">Days Present</div>
                            </div>
                        </div>
                    </div>

                    <div class="o_xeno_m_quicklinks">
                        <button class="o_xeno_m_quicklink" t-on-click="goToLeave">
                            <span class="o_xeno_m_quicklink_icon" style="background:#fdecd2;">
                                <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#e8983a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="3" y="5" width="18" height="16" rx="3"/>
                                    <path d="M3 10h18"/>
                                    <path d="M8 3v4"/>
                                    <path d="M16 3v4"/>
                                </svg>
                            </span>
                            <span class="o_xeno_m_quicklink_lbl">Leave Request</span>
                        </button>
                        <button class="o_xeno_m_quicklink" t-on-click="goToBalance">
                            <span class="o_xeno_m_quicklink_icon" style="background:#dcf1fb;">
                                <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#29b6f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M4 19V10"/>
                                    <path d="M11 19V5"/>
                                    <path d="M18 19v-7"/>
                                    <path d="M3 19h18"/>
                                </svg>
                            </span>
                            <span class="o_xeno_m_quicklink_lbl">Leave Balance</span>
                        </button>
                        <button class="o_xeno_m_quicklink" t-on-click="goToPersonalInfo">
                            <span class="o_xeno_m_quicklink_icon" style="background:#e3ddf7;">
                                <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#7c5cd6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="3" y="5" width="18" height="14" rx="2"/>
                                    <circle cx="8.5" cy="10.5" r="1.5"/>
                                    <path d="M5 16c.8-1.6 2.2-2.5 3.5-2.5S11.2 14.4 12 16"/>
                                    <path d="M14 9h5"/>
                                    <path d="M14 13h5"/>
                                </svg>
                            </span>
                            <span class="o_xeno_m_quicklink_lbl">Personal Info</span>
                        </button>
                        <button t-if="state.canApproveLeaves" class="o_xeno_m_quicklink" t-on-click="goToLeaveApproval">
                            <span class="o_xeno_m_quicklink_icon" style="background:#d9f2e3;">
                                <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#206b45" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M9 12l2 2 4-4"/>
                                    <rect x="3" y="4" width="18" height="17" rx="3"/>
                                    <path d="M3 9h18"/>
                                </svg>
                            </span>
                            <span class="o_xeno_m_quicklink_lbl">Leave Approval</span>
                        </button>
                        <button t-if="state.canApproveLeaves" class="o_xeno_m_quicklink" t-on-click="goToTeamLeaves">
                            <span class="o_xeno_m_quicklink_icon" style="background:#dbeafe;">
                                <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#1d4ed8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                                    <circle cx="9" cy="7" r="4"/>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                                </svg>
                            </span>
                            <span class="o_xeno_m_quicklink_lbl">Team Leaves</span>
                        </button>
                    </div>
                </t>

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