<! --
/**
* SuiteCRM is a customer relationship management program developed by SalesAgility Ltd.
* Copyright (C) 2021 SalesAgility Ltd.
*
* This program is free software; you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License version 3 as published by the
* Free Software Foundation with the addition of the following permission added
* to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
* IN WHICH THE COPYRIGHT IS OWNED BY SALESAGILITY, SALESAGILITY DISCLAIMS THE
* WARRANTY OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program.  If not, see http://www.gnu.org/licenses.
*
* In accordance with Section 7(b) of the GNU Affero General Public License
* version 3, these Appropriate Legal Notices must retain the display of the
* "Supercharged by SuiteCRM" logo. If the display of the logos is not reasonably
* feasible for technical reasons, the Appropriate Legal Notices must display
* the words "Supercharged by SuiteCRM".
*/
-->
<!-- Start of main navbar section -->

<div *ngIf="(vm$ | async) as vm" class="top-panel fixed-top">

    <!-- Start of empty navbar section until data is loaded -->

    <ng-template [ngIf]="!loaded">
        <nav class="navbar navbar-expand-lg">
            <div class="navbar-collapse collapse order-4 order-md-0 collapsenav">
                <ul class="navbar-nav">
                    <li class="top-nav nav-item">&nbsp;
                    </li>
                </ul>
            </div>
        </nav>
    </ng-template>

    <!-- End of empty  section until data is loaded -->

    <!-- Start of empty navbar with logo -->

    <ng-container *ngIf="loaded">
        <ng-container *ngIf="!this.isUserLoggedIn">
            <nav class="navbar ml-0 pl-0">
                <div class="navbar-collapse">
                    <ul class="navbar-nav">
                        <li class="pl-0">
                            <scrm-logo-ui></scrm-logo-ui>
                        </li>
                    </ul>
                </div>
            </nav>
        </ng-container>

        <!-- End of empty navbar section with logo -->

        <!-- Start of mobile navigation section -->

        <ng-container *ngIf="this.isUserLoggedIn && mobileNavbar">
            <ul class="navbar mobile-nav-block mobilenavbar">
                <div #myDrop="ngbDropdown" [autoClose]="false" class="position-static" ngbDropdown>
                    <button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"
                            class="navbar-toggler"
                            ngbDropdownToggle type="button">
                        <scrm-image class=" responsive-menu-toggler" image="hamburger"></scrm-image>
                    </button>
                    <div [@mobileNavFade] class="mobile-nav-dropdown w-100" ngbDropdownMenu>
                        <ng-container *ngIf="navbar && navbar.menu && navbar.menu.length">
                            <scrm-mobile-menu [all]="navbar.all.modules"
                                              [current]="navbar.current"
                                              [items]="navbar.menu"
                                              [navigationType]="vm.userPreferences['navigation_paradigm'] || ''"
                                              [onClose]="getCloseCallBack(myDrop)"
                            >
                            </scrm-mobile-menu>
                        </ng-container>

                    </div>
                </div>
                <div class="global-links" ngbDropdown>
                    <li (click)="myDrop.close()" class="global-link-item">
                        <a #mobileGlobalLinkTitle class="nav-link primary-global-link dropdown-toggle"
                           ngbDropdownToggle>
                            <scrm-image class="global-action-icon sicon-2x" image="user"></scrm-image>
                            {{ navbar.currentUser.firstName }} {{navbar.currentUser.lastName}}
                        </a>
                        <div [style.min-width.px]="mobileGlobalLinkTitle.offsetWidth"
                             aria-labelledby="navbarDropdownMenuLink"
                             class="dropdown-menu global-links-dropdown" ngbDropdownMenu>
                            <ng-template [ngIf]="navbar.globalActions">
                                <a *ngFor="let globalAction of navbar.globalActions"
                                   class="dropdown-item global-links-sublink"
                                   href="{{ globalAction.link.url }}"
                                   ngbDropdownItem
                                   target="{{ globalAction.link.target }}">{{ globalAction.link.label }}
                                </a>
                            </ng-template>
                            <scrm-logout-ui></scrm-logout-ui>
                        </div>
                    </li>
                </div>
            </ul>
            <scrm-action-bar-ui></scrm-action-bar-ui>

        </ng-container>

        <!-- End of mobile navigation section-->

        <!-- Start of navbar section with data once authenticated -->

        <ng-container *ngIf="this.isUserLoggedIn && !mobileNavbar">
            <nav class="navbar navbar-expand-md navbar-1">
                <div [ngbCollapse]="mainNavCollapse" class="navbar-collapse collapse collapsenav">
                    <scrm-home-menu-item
                        [active]="vm.appState.module && vm.appState.module === 'home'"
                        [route]="getHomePage()"
                    ></scrm-home-menu-item>

                    <!-- Navbar with grouped tabs -->

                    <ng-container *ngIf="vm.userPreferences['navigation_paradigm'] == 'gm'">

                        <ul class="navbar-nav grouped">

                            <li *ngIf="navbar.current" class="top-nav nav-item dropdown non-grouped active">
                                <scrm-menu-item [item]="navbar.current"></scrm-menu-item>
                            </li>

                            <li *ngFor="let item of navbar.menu" class="top-nav nav-item dropdown main-grouped">
                                <scrm-grouped-menu-item
                                    [item]="item"
                                    [subNavCollapse]="subNavCollapse"
                                >
                                </scrm-grouped-menu-item>

                            </li>
                        </ul>

                        <scrm-menu-items-list [items]="navbar.all.modules"
                                              labelKey="LBL_TABGROUP_ALL">
                        </scrm-menu-items-list>

                    </ng-container>


                    <!-- END Navbar with grouped tabs -->

                    <!-- Navbar with non-grouped tabs -->

                    <ng-container *ngIf="vm.userPreferences['navigation_paradigm'] != 'gm'">

                        <ul class="navbar-nav">
                            <li *ngIf="navbar.current && !navbar.current.isGroupedMenu"
                                class="top-nav nav-item dropdown non-grouped active">
                                <scrm-menu-item [item]="navbar.current"></scrm-menu-item>
                            </li>

                            <ng-container *ngIf="navbar.current?.submenu  && navbar.current.isGroupedMenu">
                                <li class="top-nav nav-item dropdown main-grouped">
                                    <scrm-grouped-menu-item
                                        [item]="navbar.current"
                                        [subNavCollapse]="subNavCollapse">
                                    </scrm-grouped-menu-item>
                                </li>
                            </ng-container>

                            <li *ngFor="let item of navbar.menu" class="top-nav nav-item dropdown non-grouped">
                                <scrm-menu-item [item]="item"></scrm-menu-item>
                            </li>
                        </ul>

                        <scrm-menu-items-list [items]="navbar.all.modules" labelKey="LBL_MORE"></scrm-menu-items-list>

                    </ng-container>

                    <!-- END Navbar with non-grouped tabs -->

                </div>


                <!-- Global Links -->

                <div class="global-links" ngbDropdown>
                    <ul class="navbar-nav">
                        <li class="global-link-item">
                            <a #globalLinkTitle class="nav-link primary-global-link dropdown-toggle" ngbDropdownToggle>
                                <scrm-image class="global-action-icon sicon-2x" image="user"></scrm-image>
                                <span
                                    class="global-user-name"> {{ navbar.currentUser.firstName }} {{navbar.currentUser.lastName}} </span>
                            </a>
                            <div [style.min-width.px]="globalLinkTitle.offsetWidth"
                                 aria-labelledby="navbarDropdownMenuLink"
                                 class="dropdown-menu global-links-dropdown dropdown-menu-right" ngbDropdownMenu>
                                <ng-container *ngIf="navbar.globalActions">
                                    <a *ngFor="let globalAction of navbar.globalActions"
                                       class="dropdown-item global-links-sublink"
                                       href="{{ globalAction.link.url }}"
                                       ngbDropdownItem
                                       target="{{ globalAction.link.target }}">{{ globalAction.link.label }}
                                    </a>
                                </ng-container>
                                <scrm-logout-ui></scrm-logout-ui>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- END Global Links -->

            </nav>

            <!-- End of navbar section with data once authenticated -->

            <scrm-action-bar-ui></scrm-action-bar-ui>
        </ng-container>
    </ng-container>
</div>

<!-- End of main navbar section -->
