<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_leave.LeaveApproverConfig">
        <div class="o_xeno_hr_page o_xeno_approver_config">
            <div class="o_xeno_hr_header">
                <div>
                    <h1>Approver Configuration</h1>
                    <p class="o_xeno_hr_subtitle">
                        Set up default approval chains per department. Override for specific employees.
                        Chain order: personal supervisor → employee overrides (or dept chain) → HR final.
                    </p>
                </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>

            <t t-if="!state.loading">
                <!-- Department Approval Chains -->
                <h2 class="o_xeno_approver_section_title">Department Approval Chains</h2>
                <div class="o_xeno_approver_card_list">
                    <t t-foreach="state.departments" t-as="dept" t-key="dept.id">
                        <div class="o_xeno_approver_card">
                            <button class="o_xeno_approver_card_head" t-on-click="() => this.toggleDept(dept.id)">
                                <div>
                                    <span class="o_xeno_approver_card_title" t-esc="dept.name"/>
                                    <span class="o_xeno_approver_card_count"
                                          t-if="state.deptStepCount[dept.id]"
                                          t-esc="state.deptStepCount[dept.id] + ' step' + (state.deptStepCount[dept.id] !== 1 ? 's' : '')"/>
                                </div>
                                <i t-attf-class="fa {{ state.expandedDept === dept.id ? 'fa-chevron-up' : 'fa-chevron-down' }} text-muted"/>
                            </button>

                            <div class="o_xeno_approver_card_body" t-if="state.expandedDept === dept.id">
                                <p class="o_xeno_approver_hint">
                                    These steps will apply to all employees in <strong t-esc="dept.name"/> unless overridden at individual level.
                                </p>

                                <div t-if="!state.deptSteps[dept.id]" class="text-center p-3">
                                    <i class="fa fa-spin fa-circle-o-notch text-muted"/>
                                </div>
                                <div t-else="" class="o_xeno_step_editor">
                                    <t t-foreach="state.deptSteps[dept.id]" t-as="step" t-key="step_index">
                                        <div class="o_xeno_step_row">
                                            <i class="fa fa-bars o_xeno_step_grip"/>
                                            <span class="o_xeno_step_num" t-esc="step_index + 1"/>
                                            <input type="text" class="form-control form-control-sm"
                                                   placeholder="Step label (e.g. Department Head)"
                                                   t-att-value="step.label"
                                                   t-on-change="(ev) => this.onDeptStepChange(dept.id, step_index, 'label', ev.target.value)"/>
                                            <select class="form-select form-select-sm"
                                                    t-on-change="(ev) => this.onDeptUserSelectChange(dept.id, step_index, ev)">
                                                <option value="">Any HR/Admin</option>
                                                <t t-foreach="state.userOptions" t-as="opt" t-key="opt.value">
                                                    <option t-att-value="opt.value" t-att-selected="opt.value === step.user_id" t-esc="opt.label"/>
                                                </t>
                                            </select>
                                            <a href="#" class="o_xeno_step_remove" t-on-click.prevent="() => this.removeDeptStep(dept.id, step_index)">
                                                <i class="fa fa-trash-o"/></a>
                                        </div>
                                    </t>
                                    <a href="#" class="o_xeno_step_add" t-on-click.prevent="() => this.addDeptStep(dept.id)">
                                        <i class="fa fa-plus"/> Add approval step</a>
                                    <div class="o_xeno_approver_save_row">
                                        <button class="btn btn-primary btn-sm" t-att-disabled="state.deptSaving"
                                                t-on-click="() => this.saveDeptChain(dept.id)">Save Chain</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </t>
                </div>

                <!-- Individual Employee Overrides -->
                <h2 class="o_xeno_approver_section_title mt-4">Individual Employee Overrides</h2>
                <p class="o_xeno_approver_hint">
                    When an employee has custom steps set here, the department chain is skipped for them.
                </p>
                <div class="o_xeno_approver_search">
                    <i class="fa fa-search"/>
                    <input type="text" placeholder="Search name or employee code…"
                           t-att-value="state.employeeSearch" t-on-input="onEmployeeSearchInput"/>
                </div>
                <div class="o_xeno_approver_card_list">
                    <div class="o_xeno_approver_no_results" t-if="!filteredEmployees.length">
                        No employees match "<t t-esc="state.employeeSearch"/>".
                    </div>
                    <t t-foreach="filteredEmployees" t-as="emp" t-key="emp.id">
                        <div class="o_xeno_approver_card">
                            <div class="o_xeno_approver_emp_row">
                                <div class="o_xeno_approver_emp_identity">
                                    <span class="o_xeno_approver_avatar" t-esc="this.initial(emp.name)"/>
                                    <div>
                                        <p class="o_xeno_approver_emp_name" t-esc="emp.name"/>
                                        <p class="o_xeno_approver_emp_meta">
                                            <t t-esc="emp.code"/><t t-if="emp.code and emp.departmentName"> · </t><t t-esc="emp.departmentName"/>
                                        </p>
                                    </div>
                                </div>
                                <button class="btn btn-link btn-sm o_xeno_approver_preview_btn" t-on-click="() => this.openPreview(emp)">
                                    <i class="fa fa-eye"/> Preview</button>
                                <button class="btn btn-link btn-sm o_xeno_approver_toggle_btn" t-on-click="() => this.toggleEmp(emp.id)">
                                    <t t-if="state.expandedEmp === emp.id"><i class="fa fa-chevron-up"/> Close</t>
                                    <t t-else=""><i class="fa fa-chevron-down"/> Override</t>
                                </button>
                            </div>

                            <div class="o_xeno_approver_card_body" t-if="state.expandedEmp === emp.id">
                                <div t-if="!state.empSteps[emp.id]" class="text-center p-3">
                                    <i class="fa fa-spin fa-circle-o-notch text-muted"/>
                                </div>
                                <t t-else="">
                                    <p class="o_xeno_approver_hint">
                                        Steps defined here <strong>replace</strong> the department chain for this employee.
                                        Leave empty to use the department default.
                                    </p>
                                    <div class="o_xeno_step_editor">
                                        <t t-foreach="state.empSteps[emp.id]" t-as="step" t-key="step_index">
                                            <div class="o_xeno_step_row">
                                                <i class="fa fa-bars o_xeno_step_grip"/>
                                                <span class="o_xeno_step_num" t-esc="step_index + 1"/>
                                                <input type="text" class="form-control form-control-sm"
                                                       placeholder="Step label (e.g. Department Head)"
                                                       t-att-value="step.label"
                                                       t-on-change="(ev) => this.onEmpStepChange(emp.id, step_index, 'label', ev.target.value)"/>
                                                <select class="form-select form-select-sm"
                                                        t-on-change="(ev) => this.onEmpUserSelectChange(emp.id, step_index, ev)">
                                                    <option value="">Any HR/Admin</option>
                                                    <t t-foreach="state.userOptions" t-as="opt" t-key="opt.value">
                                                        <option t-att-value="opt.value" t-att-selected="opt.value === step.user_id" t-esc="opt.label"/>
                                                    </t>
                                                </select>
                                                <a href="#" class="o_xeno_step_remove" t-on-click.prevent="() => this.removeEmpStep(emp.id, step_index)">
                                                    <i class="fa fa-trash-o"/></a>
                                            </div>
                                        </t>
                                        <a href="#" class="o_xeno_step_add" t-on-click.prevent="() => this.addEmpStep(emp.id)">
                                            <i class="fa fa-plus"/> Add approval step</a>
                                        <div class="o_xeno_approver_save_row">
                                            <button class="btn btn-primary btn-sm" t-att-disabled="state.empSaving"
                                                    t-on-click="() => this.saveEmpChain(emp.id)">Save Override</button>
                                        </div>
                                    </div>
                                </t>
                            </div>
                        </div>
                    </t>
                </div>
            </t>

            <!-- Preview modal -->
            <div class="o_xeno_approver_modal_overlay" t-if="state.previewEmployee" t-on-click="closePreview">
                <div class="o_xeno_approver_modal" t-on-click.stop="">
                    <div class="o_xeno_approver_modal_head">
                        <h4>Approval Chain — <t t-esc="state.previewEmployee.name"/></h4>
                        <button class="btn-close" t-on-click="closePreview"/>
                    </div>
                    <div class="o_xeno_approver_modal_body">
                        <div t-if="state.previewLoading" class="text-center p-3">
                            <i class="fa fa-spin fa-circle-o-notch text-muted"/>
                        </div>
                        <t t-else="">
                            <t t-foreach="state.previewSteps" t-as="step" t-key="step_index">
                                <div class="o_xeno_preview_step">
                                    <div class="o_xeno_preview_step_marker">
                                        <span t-esc="step.step_order"/>
                                        <div class="o_xeno_preview_step_connector" t-if="!step_last"/>
                                    </div>
                                    <div class="o_xeno_preview_step_body">
                                        <p class="o_xeno_preview_step_label" t-esc="step.label"/>
                                        <p class="o_xeno_preview_step_approver">
                                            <i class="fa fa-user"/> <t t-esc="step.approverLabel"/>
                                        </p>
                                    </div>
                                </div>
                            </t>
                        </t>
                    </div>
                </div>
            </div>
        </div>
    </t>
</templates>
