<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_leave.EmployeeList">
        <div class="o_xeno_hr_page o_xeno_employee_list_page">
            <div class="o_xeno_hr_header">
                <div>
                    <h1>Employee List</h1>
                </div>
                <div class="o_xeno_hr_header_actions">
                    <div class="o_xeno_emp_search_box">
                        <i class="fa fa-search o_xeno_emp_search_icon"/>
                        <input type="text" class="form-control"
                               placeholder="Search name, code, or job title..."
                               t-att-value="state.search"
                               t-on-input="onSearchInput"/>
                    </div>
                    <button class="btn btn-outline-secondary o_xeno_emp_import_btn" t-on-click="onImport">
                        <i class="fa fa-upload me-1"/>Import
                    </button>
                    <button class="btn btn-primary o_xeno_emp_new_btn" t-on-click="onNew">
                        <i class="fa fa-plus me-1"/>New Employee
                    </button>
                </div>
            </div>

            <div class="o_xeno_emp_filters">
                <div class="o_xeno_emp_filter_row">
                    <span class="o_xeno_emp_filter_label">Status:</span>
                    <button t-attf-class="o_xeno_pill_btn {{ state.statusFilter === 'all' ? 'active' : '' }}"
                            t-on-click="() => this.onStatusFilter('all')">All</button>
                    <button t-attf-class="o_xeno_pill_btn {{ state.statusFilter === 'active' ? 'active' : '' }}"
                            t-on-click="() => this.onStatusFilter('active')">Active</button>
                    <button t-attf-class="o_xeno_pill_btn {{ state.statusFilter === 'inactive' ? 'active' : '' }}"
                            t-on-click="() => this.onStatusFilter('inactive')">Inactive</button>
                </div>
                <div class="o_xeno_emp_filter_row">
                    <span class="o_xeno_emp_filter_label">Employee Type:</span>
                    <button t-attf-class="o_xeno_pill_btn {{ !state.employeeTypeId ? 'active' : '' }}"
                            t-on-click="() => this.onEmployeeTypeFilter(false)">All</button>
                    <t t-foreach="state.employeeTypes" t-as="type" t-key="type.id">
                        <button t-attf-class="o_xeno_pill_btn {{ state.employeeTypeId === type.id ? 'active' : '' }}"
                                t-on-click="() => this.onEmployeeTypeFilter(type.id)" t-esc="type.name"/>
                    </t>
                </div>
                <div class="o_xeno_emp_filter_row">
                    <span class="o_xeno_emp_filter_label">Department:</span>
                    <button t-attf-class="o_xeno_pill_btn {{ !state.departmentId ? 'active' : '' }}"
                            t-on-click="() => this.onDepartmentFilter(false)">All</button>
                    <t t-foreach="state.departments" t-as="dept" t-key="dept.id">
                        <button t-attf-class="o_xeno_pill_btn {{ state.departmentId === dept.id ? 'active' : '' }}"
                                t-on-click="() => this.onDepartmentFilter(dept.id)" t-esc="dept.name"/>
                    </t>
                </div>
                <div class="o_xeno_emp_filter_row">
                    <span class="o_xeno_emp_filter_label">Filter by group:</span>
                    <button t-attf-class="o_xeno_pill_btn {{ !state.categoryId ? 'active' : '' }}"
                            t-on-click="() => this.onCategoryFilter(false)">All</button>
                    <t t-foreach="state.categories" t-as="cat" t-key="cat.id">
                        <button t-attf-class="o_xeno_pill_btn o_xeno_pill_btn_dot {{ state.categoryId === cat.id ? 'active' : '' }}"
                                t-on-click="() => this.onCategoryFilter(cat.id)">
                            <span class="o_xeno_pill_dot" t-attf-style="background-color: {{cat.dotColor}}"/>
                            <t t-esc="cat.name"/>
                        </button>
                    </t>
                </div>
            </div>

            <div t-if="state.loading" class="text-center p-5">
                <i class="fa fa-spin fa-circle-o-notch fa-2x text-muted"/>
            </div>

            <div class="o_xeno_hr_card" t-if="!state.loading">
                <table class="o_xeno_hr_table">
                    <thead>
                        <tr>
                            <th>Employee</th>
                            <th>Job Title</th>
                            <th>Department</th>
                            <th>Manager</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Work Schedule</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr t-if="!state.rows.length">
                            <td colspan="8" class="text-center text-muted py-4">No employees found.</td>
                        </tr>
                        <t t-foreach="state.rows" t-as="row" t-key="row.id">
                            <tr class="o_xeno_emp_row" t-on-click="() => this.onView(row.id)">
                                <td>
                                    <div class="o_xeno_employee_cell">
                                        <img t-if="row.hasPhoto" class="o_xeno_avatar_photo" t-att-src="row.photoUrl" alt=""/>
                                        <span t-else="" class="o_xeno_avatar" t-attf-style="background-color: {{row.avatarColor}}"
                                              t-esc="row.avatarInitial"/>
                                        <div>
                                            <div class="fw-bold">
                                                <t t-esc="row.name"/>
                                                <span t-if="!row.active" class="o_xeno_emp_inactive_badge">Inactive</span>
                                            </div>
                                            <div class="text-muted small" t-if="row.code" t-esc="row.code"/>
                                        </div>
                                    </div>
                                </td>
                                <td t-esc="row.jobTitle"/>
                                <td t-esc="row.department"/>
                                <td t-esc="row.manager"/>
                                <td>
                                    <a t-if="row.email" t-attf-href="mailto:{{row.email}}"
                                       class="o_xeno_emp_email" t-on-click.stop=""
                                       t-esc="row.email"/>
                                    <span t-else="" class="text-muted">—</span>
                                </td>
                                <td>
                                    <t t-if="row.phone" t-esc="row.phone"/>
                                    <span t-else="" class="text-muted">—</span>
                                </td>
                                <td>
                                    <t t-if="row.schedule" t-esc="row.schedule"/>
                                    <span t-else="" class="text-muted">—</span>
                                </td>
                                <td>
                                    <div class="o_xeno_balance_icons" t-on-click.stop="">
                                        <a href="#" class="o_xeno_balance_icon" title="View / Edit"
                                           t-on-click.prevent="() => this.onView(row.id)">
                                            <i class="fa fa-pencil"/>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </t>
                    </tbody>
                </table>

                <div class="o_xeno_pager" t-if="state.total > 0">
                    <span t-esc="pageLabel"/>
                    <div class="o_xeno_pager_nav">
                        <button class="btn btn-sm btn-outline-secondary" t-att-disabled="!canPrev" t-on-click="prevPage">
                            <i class="fa fa-chevron-left"/>
                        </button>
                        <button class="btn btn-sm btn-outline-secondary" t-att-disabled="!canNext" t-on-click="nextPage">
                            <i class="fa fa-chevron-right"/>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </t>
</templates>
