<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_theme_slate.AppDashboard">
        <div class="xeno_app_dashboard p-4">

            <div t-if="employee and employee.xeno_is_birthday_today" class="xeno_birthday_banner mb-4">
                <span class="xeno_birthday_emoji">🎉🎂🎉</span>
                <span>Happy Birthday, <t t-esc="employee.name"/>! Wishing you a great day.</span>
            </div>
            <div t-if="employee and employee.xeno_is_welcome_back_today" class="xeno_birthday_banner mb-4">
                <span class="xeno_birthday_emoji">👶🎉</span>
                <span>Welcome back, <t t-esc="employee.name"/>! Congratulations on your new baby.</span>
            </div>

            <div class="xeno_profile_strip mb-4" t-if="employee">
                <img t-att-src="employeeAvatarUrl" class="xeno_profile_avatar" alt=""/>
                <div class="xeno_profile_strip_text">
                    <div class="xeno_profile_name" t-esc="employee.name"/>
                    <div t-if="employee.department_id" class="xeno_profile_sub" t-esc="employee.department_id[1]"/>
                </div>
            </div>

            <div class="xeno_card mb-4" t-if="leaveBalances.length">
                <div class="xeno_card_header">
                    <i class="fa fa-user-times"/>
                    <span>Leave Balances</span>
                </div>
                <div class="xeno_leave_grid">
                    <div t-foreach="leaveBalances" t-as="bal" t-key="bal.id" class="xeno_leave_card">
                        <div class="xeno_leave_card_top">
                            <span class="xeno_leave_type" t-esc="bal.name"/>
                            <span class="xeno_leave_remaining_big" t-esc="bal.remainingStr"/>
                        </div>
                        <div class="xeno_leave_bar">
                            <div class="xeno_leave_bar_fill"
                                 t-attf-style="width: {{bal.remainingPct}}%; background: {{bal.barColor}};"/>
                        </div>
                        <div class="xeno_leave_stats">
                            <span>Allocated <strong t-esc="bal.allocatedStr"/></span>
                            <span>Used <strong t-esc="bal.usedStr"/></span>
                            <span>Pending <strong t-esc="bal.pendingStr"/></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="xeno_card mb-4" t-if="upcomingLeave">
                <div class="xeno_upcoming_leave">
                    <span class="xeno_upcoming_leave_icon"><i class="fa fa-calendar-check-o"/></span>
                    <div class="xeno_upcoming_leave_text">
                        <div class="xeno_upcoming_leave_title">Upcoming Leave · <t t-esc="upcomingLeave.typeName"/></div>
                        <div class="xeno_upcoming_leave_dates">
                            <t t-esc="upcomingLeave.dateFrom"/> → <t t-esc="upcomingLeave.dateTo"/>
                            (<t t-esc="upcomingLeave.daysStr"/> d)
                        </div>
                    </div>
                    <span t-attf-class="xeno_pill {{upcomingLeave.isPending and 'xeno_pill_pending' or 'xeno_pill_approved'}}">
                        <t t-esc="upcomingLeave.isPending and 'Pending' or 'Approved'"/>
                    </span>
                </div>
            </div>

            <div class="xeno_card mb-4">
                <div class="xeno_card_header xeno_card_head_nav">
                    <div>
                        <div class="xeno_card_header_title"><i class="fa fa-id-badge"/><span>Employee Attendance Report</span></div>
                        <p class="xeno_hr_subtitle">Approved &amp; pending leaves for selected date</p>
                    </div>
                    <div class="xeno_day_nav">
                        <button class="btn btn-sm btn-light" t-on-click="prevReportDay" aria-label="Previous day">
                            <i class="fa fa-chevron-left"/>
                        </button>
                        <span t-esc="attendanceReportDateLabel"/>
                        <button class="btn btn-sm btn-light" t-on-click="nextReportDay" aria-label="Next day">
                            <i class="fa fa-chevron-right"/>
                        </button>
                    </div>
                </div>
                <div class="xeno_table_wrap" t-if="!attendanceReport.loading">
                    <table class="table xeno_report_table">
                        <thead>
                            <tr>
                                <th>#</th><th>Name</th><th>Position</th><th>Department</th>
                                <th>Leave Type</th><th>Total Leave Days</th><th>Leave Date</th>
                                <th>Back to Work Date</th><th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr t-if="!attendanceReport.records.length">
                                <td colspan="9" class="xeno_table_empty">No approved or pending leaves for this date.</td>
                            </tr>
                            <t t-foreach="attendanceReport.records" t-as="rec" t-key="rec.id">
                                <tr>
                                    <td t-esc="rec_index + 1"/>
                                    <td t-esc="rec.employeeName"/>
                                    <td t-esc="rec.position"/>
                                    <td t-esc="rec.department"/>
                                    <td t-attf-style="color: {{rec.leaveTypeColor}}; font-weight: 600;" t-esc="rec.leaveTypeName"/>
                                    <td t-esc="rec.totalLeaveDays"/>
                                    <td t-esc="rec.leaveDateStr"/>
                                    <td t-esc="rec.backToWorkDateStr"/>
                                    <td>
                                        <span t-attf-class="xeno_pill {{ rec.approved and 'xeno_pill_approved' or 'xeno_pill_pending' }}"
                                              t-esc="rec.approved and 'Approved' or 'Pending'"/>
                                    </td>
                                </tr>
                            </t>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="xeno_home_grid">
                <div class="xeno_card xeno_mini_calendar">
                    <div class="xeno_card_header">
                        <i class="fa fa-calendar-o"/>
                        <span t-esc="calendar.label"/>
                    </div>
                    <div class="xeno_mini_calendar_body">
                        <div class="xeno_mini_calendar_weekdays">
                            <span t-foreach="calendar.weekdays" t-as="wd" t-key="wd" t-esc="wd"/>
                        </div>
                        <div class="xeno_mini_calendar_grid">
                            <span t-foreach="calendar.cells" t-as="cell" t-key="cell_index"
                                  class="xeno_mini_calendar_cell"
                                  t-att-class="{ 'today': cell and cell.isToday,
                                                 'holiday': cell and cell.isHoliday,
                                                 'my-leave': cell and cell.isMyLeave }"
                                  t-att-title="cell and cell.isHoliday and cell.holidayName"
                                  t-esc="cell and cell.day or ''"/>
                        </div>
                        <div class="xeno_mini_calendar_legend">
                            <span><i class="xeno_legend_dot xeno_legend_dot_holiday"/> Holiday</span>
                            <span><i class="xeno_legend_dot xeno_legend_dot_leave"/> My Leave</span>
                        </div>
                    </div>
                </div>

                <div class="xeno_card xeno_news_feed">
                    <div class="xeno_card_header">
                        <i class="fa fa-bullhorn"/>
                        <span>Company News</span>
                    </div>
                    <div class="xeno_news_feed_body">
                        <div t-if="!announcements.length" class="text-muted">No announcements yet</div>
                        <div t-foreach="announcements" t-as="ann" t-key="ann.id" class="xeno_news_item">
                            <div class="xeno_news_date" t-esc="ann.date"/>
                            <div class="xeno_news_title" t-esc="ann.name"/>
                            <div class="xeno_news_body" t-out="ann.body"/>
                        </div>
                    </div>
                </div>
            </div>

            <h2 class="mb-4 mt-4">Apps</h2>
            <div class="xeno_app_grid">
                <a t-foreach="apps" t-as="app" t-key="app.id"
                     class="xeno_app_tile"
                     t-att-href="getAppHref(app)"
                     target="_blank" rel="noopener">
                    <span class="xeno_app_badge xeno_app_badge_lg">
                        <i t-attf-class="fa {{getXenoAppIconClass(app)}}"/>
                    </span>
                    <div class="xeno_app_name" t-esc="app.name"/>
                </a>
            </div>
        </div>
    </t>
</templates>
