<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_org_chart.OrgChart">
        <div class="o_xeno_org_page">
            <div class="o_xeno_org_header">
                <div class="o_xeno_org_company" t-esc="state.companyName"/>
                <img t-if="state.companyId" class="o_xeno_org_logo"
                     t-attf-src="/web/image/res.company/{{ state.companyId }}/logo"
                     alt="" onerror="this.style.display='none'"/>
            </div>

            <div class="o_xeno_org_controls">
                <select class="form-select o_xeno_org_filter" t-on-change="onDepartmentChange">
                    <option value="">All Departments</option>
                    <t t-foreach="state.departments" t-as="dept" t-key="dept.id">
                        <option t-att-value="dept.id" t-esc="dept.name"/>
                    </t>
                </select>
                <div class="o_xeno_org_legend">
                    <span class="o_xeno_org_legend_item">
                        <span class="o_xeno_org_legend_dot role_management"/>Management Team
                    </span>
                    <span class="o_xeno_org_legend_item">
                        <span class="o_xeno_org_legend_dot role_manager"/>Manager / Team Lead
                    </span>
                    <span class="o_xeno_org_legend_item">
                        <span class="o_xeno_org_legend_dot role_senior"/>Senior
                    </span>
                    <span class="o_xeno_org_legend_item">
                        <span class="o_xeno_org_legend_dot role_supervisor"/>Supervisor
                    </span>
                </div>
                <div class="o_xeno_org_zoom">
                    <button type="button" class="o_xeno_org_zoom_btn" t-on-click="zoomOut"
                            t-att-disabled="!canZoomOut" title="Zoom out">
                        <i class="fa fa-search-minus"/>
                    </button>
                    <span class="o_xeno_org_zoom_label" t-esc="zoomLabel"/>
                    <button type="button" class="o_xeno_org_zoom_btn" t-on-click="zoomIn"
                            t-att-disabled="!canZoomIn" title="Zoom in">
                        <i class="fa fa-search-plus"/>
                    </button>
                </div>
            </div>

            <div t-if="state.loading" class="o_xeno_org_loading">Loading...</div>
            <div t-else="" class="o_xeno_org_tree">
                <div t-if="!state.tree.length" class="text-muted p-3 text-center">
                    No employees to show.
                </div>
                <div t-else="" class="o_xeno_org_zoom_wrap" t-attf-style="zoom: {{ state.zoom }}">
                    <ul class="o_xeno_org_level o_xeno_org_root">
                        <t t-foreach="state.tree" t-as="node" t-key="node.id">
                            <t t-call="xeno_org_chart.OrgNode"/>
                        </t>
                    </ul>
                </div>
            </div>

            <p class="o_xeno_org_hint">
                Drag an employee card onto a peer to reorder them under the same manager
            </p>
        </div>
    </t>

    <t t-name="xeno_org_chart.OrgNode">
        <li class="o_xeno_org_node">
            <div t-attf-class="o_xeno_org_card o_xeno_org_depth_{{ node.depth }}"
                 draggable="true"
                 t-on-dragstart="(ev) => this.onDragStart(node.id, ev)"
                 t-on-dragover="onDragOver"
                 t-on-drop="(ev) => this.onDrop(node.id, ev)">
                <div t-if="node.hasPhoto"
                     t-attf-class="o_xeno_org_avatar {{ node.roleClass ? 'role_' + node.roleClass : '' }}"
                     t-attf-style="background-image:url({{ node.photoUrl }})"/>
                <div t-else=""
                     t-attf-class="o_xeno_org_avatar o_xeno_org_avatar_initial {{ node.roleClass ? 'role_' + node.roleClass : '' }}"
                     t-attf-style="background:{{ node.avatarColor }}">
                    <t t-esc="node.avatarInitial"/>
                </div>
                <div class="o_xeno_org_name" t-esc="node.name"/>
                <div t-if="node.jobTitle" class="o_xeno_org_title" t-esc="node.jobTitle"/>
                <button t-if="node.children.length" type="button"
                        class="o_xeno_org_toggle"
                        t-on-click.stop="() => this.toggleCollapse(node.id)"
                        t-att-title="state.collapsed[node.id] ? 'Expand' : 'Collapse'">
                    <i t-attf-class="fa {{ state.collapsed[node.id] ? 'fa-plus' : 'fa-minus' }}"/>
                    <span t-if="state.collapsed[node.id]" class="o_xeno_org_toggle_count"
                          t-esc="node.children.length"/>
                </button>
            </div>
            <t t-if="node.children.length and !state.collapsed[node.id]">
                <div class="o_xeno_org_vline"/>
                <t t-if="node.teamLabel">
                    <div class="o_xeno_org_team_label" t-esc="node.teamLabel"/>
                    <div class="o_xeno_org_vline"/>
                </t>
                <ul class="o_xeno_org_level">
                    <t t-foreach="node.children" t-as="node" t-key="node.id">
                        <t t-call="xeno_org_chart.OrgNode"/>
                    </t>
                </ul>
            </t>
            <div t-if="node.children.length and state.collapsed[node.id]"
                 class="o_xeno_org_collapsed_hint">
                <t t-esc="node.children.length"/> hidden
            </div>
        </li>
    </t>
</templates>
