<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
    <!-- Extend web.NavBar -->
    <t t-inherit="web.NavBar" t-inherit-mode="extension" owl="1">
        <xpath expr="//DropdownItem[@t-if='!env.isSmall and currentApp']" position="before">
            <div class="sidebar-toggler d-flex align-items-center p-2 ms-2">
                <a href="javascript:;" class="sidebar-toggle-bits" t-on-click="toggleSidebar">
                    <i class="toggle fa fa-bars fa-2x"/>
                    <i class="back-arrow oi oi-chevron-left fa-2x chevron-toggle"/>
                </a>
                <t t-if="currentApp">
                    <h4 class="ms-2 mb-0"><t t-out="currentApp.name"/></h4>
                </t>
            </div>
        </xpath>
        <xpath expr="//DropdownItem[@t-if='!env.isSmall and currentApp']" position="replace"/>
        <xpath expr="//t[t[@t-call='web.NavBar.SectionsMenu']]" position="replace"/>
        <xpath expr="//t[@t-call='web.NavBar.AppsMenu']" position="replace"/>
    </t>
    <t t-name="CustomAppsMenu" owl="1">
        <nav role="navigation" class="primary-nav menu o_main_navbar" data-command-category="disabled">
            <div class="overflow-container">
                <t t-set="curr_app" t-value="currentMenuId ? menuService.getMenuAsTree(currentMenuId) : null"/>
                <ul id="menu-dropdown">
                    <t t-foreach="menuService.getApps()" t-as="main_menu" t-key="main_menu.name">
                        <t t-if="!main_menu.children.length">
                            <li>
                                <a
                                    t-att-href="main_menu ? '/odoo/' + (main_menu.actionPath || 'action-' + (main_menu.actionID || '')) : '#'"
                                    t-att-data-menu-xmlid="main_menu.xmlid"
                                    t-att-data-section="main_menu.id"
                                    class="main_link"
                                    t-on-click="() => props.onNavBarDropdownItemSelection ? props.onNavBarDropdownItemSelection(main_menu) : null"
                                >
                                    <span class="app_icon me-2"></span>
                                    <span><t t-out="main_menu.name" /></span>
                                </a>
                            </li>
                        </t>
                        <t t-else="">
                            <li class="menu-hasdropdown d-flex align-items-center">
                                <a t-att-href="main_menu ? '/odoo/' + (main_menu.actionPath || 'action-' + (main_menu.actionID || '')) : '#'"
                                   t-att-data-menu="main_menu.id"
                                   t-att-data-action-model="main_menu.actionModel || ''"
                                   t-att-data-action-id="main_menu.actionID || ''"
                                   t-att-data-menu-xmlid="main_menu.xmlid"
                                   t-att-class="'main_link flex-grow-1'"
                                   t-on-click="() => props.onNavBarDropdownItemSelection ? props.onNavBarDropdownItemSelection(main_menu) : null">
                                    <span class="app_icon me-2"></span>
                                    <span><t t-out="main_menu.name" /></span>
                                </a>
                                <!-- Chevron for toggling dropdown -->
                                <span class="oi oi-chevron-right p-1 button_bg_hover rounded "
                                      data-bs-toggle="collapse"
                                      t-att-data-bs-target="'#child_menu_' + main_menu.id"/>
                                <!-- Submenu -->
                                <ul t-att-class="'main header-sub-menus sub-menu-dropdown collapse' + (curr_app &amp;&amp; curr_app.appID == main_menu.appID ? ' show' : '')"
                                    t-att-id="'child_menu_' + main_menu.id">
                                    <a class="back_main_menu collapse_back d-flex align-items-center" t-on-click="BackMenuToggle">
                                        <span class="oi oi-chevron-left p-2" />
                                        <h3 class="m-0 p-o"><b><t t-out="main_menu.name" /></b></h3>
                                    </a>
                                    <t t-set="parent_menu_id" t-value="main_menu.id" />
                                    <t t-foreach="main_menu.children" t-as="menuid" t-key="menuid">
                                        <t t-set="menu" t-value="menuService.getMenuAsTree(menuid)"/>
                                        <t t-call="AllmenuRecursive">
                                            <t t-set="props" t-value="props"/>
                                        </t>
                                    </t>
                                    <t t-if="main_menu.xmlid == 'base.menu_administration'">
                                        <li>
                                            <a class="d-flex align-items-center w-100 sub-main-menu" data-bs-toggle="collapse" t-att-data-bs-target="'#child_menu_theme'">
                                                <span>Backend Theme</span>
                                                <span class="oi oi-chevron-right ms-auto p-2" />
                                            </a>
                                            <div t-att-id="'child_menu_theme'" class="collapse">
                                                <ul class="header-sub-menus">
                                                    <li class="nav-item">
                                                        <a class="child_menus" href="https://www.terabits.xyz/survey/start/0261438c-36bd-4f73-a63d-9120a4d4764d" target="_blank">
                                                            <span>Leave a review</span>
                                                        </a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="child_menus" href="https://www.terabits.xyz/survey/start/9e8fe56d-b8b4-4c34-b3b6-513b08ab513e">
                                                            <span>Get regular updates</span>
                                                        </a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="child_menus" href="https://www.terabits.xyz/services/debranding">
                                                            <span>Debrand your ERP</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                    </t>
                                </ul>
                            </li>
                        </t>
                    </t>
                </ul>
            </div>
        </nav>
    </t>
    <!-- Recursive Menu Template -->
    <t t-name="AllmenuRecursive" owl="1">
        <li class="nav-item">
            <t t-if="menu.childrenTree.length">
                <a class="d-flex align-items-center w-100 sub-main-menu"
                   data-bs-toggle="collapse"
                   t-attf-data-bs-target="#child_menu_{{menu.id}}"
                   t-att-data-menu-xmlid="menu.xmlid"
                   t-att-href="menu ? '/odoo/' + (menu.actionPath || 'action-' + (menu.actionID || '')) : '#'"
                   t-on-click="() => props.onNavBarDropdownItemSelection ? props.onNavBarDropdownItemSelection(menu) : null">
                    <span><t t-out="menu.name"/></span>
                    <span class="oi oi-chevron-right ms-auto p-1 button_bg_hover rounded chevron-toggle"/>
                </a>
                <div t-attf-id="child_menu_{{menu.id}}" class="collapse">
                    <ul class="header-sub-menus">
                        <t t-foreach="menu.children" t-as="menuid" t-key="menuid">
                            <t t-set="menu" t-value="menuService.getMenuAsTree(menuid)"/>
                            <t t-call="AllmenuRecursive">
                                <t t-set="props" t-value="props"/>
                            </t>
                        </t>
                    </ul>
                </div>
            </t>
            <t t-else="">
                <a t-att-data-menu="menu.id"
                   t-attf-class="child_menus"
                   t-att-href="menu ? '/odoo/' + (menu.actionPath || 'action-' + (menu.actionID || '')) : '#'"
                   t-att-data-menu-xmlid="menu.xmlid"
                   t-attf-data-action-id="{{menu.actionID ? menu.actionID : ''}}"
                   t-on-click="() => props.onNavBarDropdownItemSelection ? props.onNavBarDropdownItemSelection(menu) : null">
                    <span class="app_name"><t t-out="menu.name" /></span>
                </a>
            </t>
        </li>
    </t>
</templates>