<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-inherit="web.NavBar" t-inherit-mode="extension">
        <xpath expr="//header[hasclass('o_navbar')]" position="replace">
            <header class="o_navbar xeno_sidebar_header" t-ref="root">
                <nav class="o_main_navbar xeno_sidebar_rail d-print-none" data-command-category="disabled">
                    <div class="xeno_sidebar_toggle_row">
                        <button class="xeno_sidebar_toggle"
                                t-att-title="state.xenoCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
                                t-on-click="() => this.xenoToggleCollapsed()">
                            <i class="fa fa-bars"/>
                        </button>
                    </div>
                    <div class="xeno_sidebar_top xeno_static_apps">
                        <t t-foreach="xenoVisibleApps" t-as="app" t-key="app.id">
                            <div class="xeno_sidebar_app_group">
                                <a class="xeno_sidebar_app_icon"
                                   t-att-class="{ 'active': menuService.getCurrentApp() === app }"
                                   t-att-href="getMenuItemHref(app)"
                                   t-att-title="app.name"
                                   t-on-click.prevent="() => this.onNavBarDropdownItemSelection(app)">
                                    <span class="xeno_app_badge"
                                          t-att-class="{ 'active': menuService.getCurrentApp() === app }">
                                        <i t-attf-class="fa {{getXenoAppIconClass(app)}}"/>
                                    </span>
                                    <span class="xeno_sidebar_app_label"
                                          t-att-class="{ 'active': menuService.getCurrentApp() === app }"
                                          t-esc="app.name"/>
                                    <i t-if="app.children.length"
                                       t-attf-class="fa xeno_sidebar_caret {{ xenoIsAppExpanded(app) ? 'fa-chevron-up' : 'fa-chevron-down' }} {{ menuService.getCurrentApp() === app ? 'active' : '' }}"
                                       t-on-click="(ev) => this.xenoToggleApp(app, ev)"/>
                                </a>
                                <div t-if="app.children.length and xenoIsAppExpanded(app)" class="xeno_sidebar_submenu">
                                    <t t-call="xeno_theme_slate.SidebarSubMenuItems">
                                        <t t-set="items" t-value="xenoGetAppSubmenus(app)"/>
                                        <t t-set="depth" t-value="0"/>
                                    </t>
                                </div>
                            </div>
                        </t>
                    </div>
                    <div class="xeno_sidebar_bottom">
                        <div class="o_menu_systray bg-inherit" role="menu">
                            <!-- Row 1: icon systray items (messaging, activities,
                                 call, etc): everything that isn't the user menu
                                 or the company switcher. -->
                            <div class="xeno_systray_row xeno_systray_icons">
                                <t t-foreach="systrayItems" t-as="item" t-key="item.key">
                                    <t t-if="item.key !== 'web.user_menu' and item.key !== 'SwitchCompanyMenu'">
                                        <ErrorHandler onError="error => this.handleItemError(error, item)">
                                            <t t-component="item.Component" t-props="item.props"/>
                                        </ErrorHandler>
                                    </t>
                                </t>
                            </div>
                            <!-- Row 2: identity. User avatar first, then the
                                 company name, rendered in that explicit order
                                 (the systray registry's own order would put the
                                 company before the user). -->
                            <div class="xeno_systray_row xeno_systray_identity">
                                <t t-foreach="systrayItems" t-as="item" t-key="item.key">
                                    <t t-if="item.key === 'web.user_menu'">
                                        <ErrorHandler onError="error => this.handleItemError(error, item)">
                                            <t t-component="item.Component" t-props="item.props"/>
                                        </ErrorHandler>
                                    </t>
                                </t>
                                <t t-foreach="systrayItems" t-as="item" t-key="'c_' + item.key">
                                    <t t-if="item.key === 'SwitchCompanyMenu'">
                                        <ErrorHandler onError="error => this.handleItemError(error, item)">
                                            <t t-component="item.Component" t-props="item.props"/>
                                        </ErrorHandler>
                                    </t>
                                </t>
                            </div>
                        </div>
                    </div>
                </nav>
                <div class="xeno_topbar d-print-none">
                    <DropdownItem
                        t-if="!this.ui.isSmall and currentApp"
                        t-esc="currentApp.name"
                        class="'o_menu_brand d-flex'"
                        onSelected="() => this.onNavBarDropdownItemSelection(currentApp)"
                        attrs="{ href: getMenuItemHref(currentApp), 'data-menu-xmlid': currentApp.xmlid, 'data-section': currentApp.id }"
                    />
                    <div class="o_navbar_breadcrumbs d-contents"/>
                    <t t-if="!this.ui.isSmall">
                        <t t-if="currentAppSections.length" t-call="web.NavBar.SectionsMenu">
                            <t t-set="sections" t-value="currentAppSections" />
                        </t>
                    </t>
                </div>
            </header>

            <!-- Mandatory first-login policy acknowledgment. A fully
                 custom fixed overlay (not core's Dialog component), so
                 there is no built-in Escape-key/backdrop-click dismissal
                 to guard against; it only ever disappears when
                 xenoConfirmPolicyAck() succeeds. -->
            <div t-if="state.xenoNeedsPolicyAck" class="xeno_policy_ack_overlay">
                <div class="xeno_policy_ack_modal">
                    <h2>Company Policies</h2>
                    <p class="text-muted">
                        Please review our company policies before continuing.
                        You must acknowledge them to use the system.
                    </p>
                    <div class="xeno_policy_ack_policies">
                        <div t-if="!state.xenoPolicies.length" class="text-muted">
                            No company policies are published yet.
                        </div>
                        <t t-foreach="state.xenoPolicies" t-as="policy" t-key="policy.id">
                            <div class="xeno_policy_ack_policy">
                                <div class="xeno_policy_ack_policy_title" t-esc="policy.name"/>
                                <div t-out="policy.body"/>
                            </div>
                        </t>
                    </div>
                    <label class="xeno_policy_ack_checkbox">
                        <input type="checkbox" t-att-checked="state.xenoAckChecked"
                               t-on-change="(ev) => this.xenoOnAckCheckboxChange(ev)"/>
                        I have read and acknowledge the company policies above.
                    </label>
                    <button class="btn btn-primary xeno_policy_ack_confirm"
                            t-att-disabled="!state.xenoAckChecked"
                            t-on-click="() => this.xenoConfirmPolicyAck()">
                        Confirm
                    </button>
                </div>
            </div>
        </xpath>
    </t>

    <!-- Recursive submenu tree for the expanded app in the left icon rail,
         mirroring core's own web.NavBar.SectionsMenu.Dropdown.MenuSlot:
         a leaf item (no children) is clickable; a group (has children)
         renders as a label and recurses into its own children. -->
    <t t-name="xeno_theme_slate.SidebarSubMenuItems">
        <t t-foreach="items" t-as="item" t-key="item.id">
            <t t-if="!item.childrenTree.length">
                <a href="#" t-attf-class="xeno_sidebar_submenu_item xeno_sidebar_submenu_depth_{{depth}}"
                   t-att-data-menu-xmlid="item.xmlid"
                   t-on-click.prevent="() => this.onNavBarDropdownItemSelection(item)">
                    <i t-if="item.xenoIcon" t-attf-class="fa {{item.xenoIcon}} xeno_sidebar_submenu_icon"/>
                    <t t-esc="item.name"/>
                </a>
            </t>
            <t t-else="">
                <div t-attf-class="xeno_sidebar_submenu_group_label xeno_sidebar_submenu_depth_{{depth}}">
                    <i t-if="item.xenoIcon" t-attf-class="fa {{item.xenoIcon}} xeno_sidebar_submenu_icon"/>
                    <t t-esc="item.name"/>
                </div>
                <t t-call="xeno_theme_slate.SidebarSubMenuItems">
                    <t t-set="items" t-value="item.childrenTree"/>
                    <t t-set="depth" t-value="depth + 1"/>
                </t>
            </t>
        </t>
    </t>
</templates>
