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

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

    <!-- 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 class="position-static" ngbDropdown #myDrop="ngbDropdown" [autoClose]="false">
                    <button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"
                            ngbDropdownToggle
                            class="navbar-toggler" type="button">
                        <scrm-image class="responsive-menu-toggler" image="hamburger"></scrm-image>
                    </button>
                    <div class="mobile-nav-dropdown w-100" ngbDropdownMenu [@mobileNavFade]>
                        <ng-template [ngIf]="backLink">
                            <li ngbDropdownItem><a class="mobile-back-link" (click)="navBackLink()">< BACK</a>
                            </li>
                        </ng-template>
                        <ng-template [ngIf]="mainNavLink">
                            <li class="" *ngFor="let item of navbar.menu" ngbDropdownItem>
                                <a class="mobile-nav-link">{{ item.link.label }}</a>
                                <scrm-image class="sicon-xs mobile-nav-arrow" image="arrow_right_filled"
                                            (click)="changeSubNav($event, item)"></scrm-image>
                            </li>
                        </ng-template>
                        <ng-template [ngIf]="mobileSubNav">
                            <li class="" *ngFor="let sub of submenu" ngbDropdownItem>
                                <a class="mobile-nav-link action-link">
                                    {{ sub.link.label }}
                                </a>
                                <ul *ngIf="sub.submenu.length" class="">
                                    <li *ngFor="let subitem of sub.submenu" class="nav-item">
                                        <a class="mobile-nav-link action-link" href="/#{{ subitem.link.route }}">
                                            {{ subitem.link.label }}
                                        </a>
                                    </li>
                                    <ng-template [ngIf]="sub.recentRecords && sub.recentRecords.length">
                                        <h4 class="recently-viewed-header">RECENTLY VIEWED</h4>
                                        <li class="nav-item" *ngFor="let rec of sub.recentRecords">
                                            <a class="mobile-nav-link action-link"
                                               href="#/{{ rec.moduleName }}/{{ rec.itemId }}">{{ rec.itemSummary }}</a>
                                        </li>
                                    </ng-template>
                                </ul>
                            </li>
                        </ng-template>

                        <li>
                            <a class="mobile-nav-close" href="#" (click)="myDrop.close()">
                                <scrm-image class="sicon mobile-nav-close" image="cross_bold"></scrm-image>
                                <span class="nav-close-text">close menu</span>
                            </a>
                        </li>
                    </div>
                </div>
                <div class="global-links" ngbDropdown>
                    <li class="global-link-item">
                        <a 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 aria-labelledby="navbarDropdownMenuLink"
                             class="dropdown-menu global-links-dropdown" ngbDropdownMenu>
                            <ng-template [ngIf]="navbar.globalActions">
                                <a class="dropdown-item global-links-sublink" ngbDropdownItem
                                   *ngFor="let globalAction of navbar.globalActions"
                                   target="{{ globalAction.link.target }}"
                                   href="{{ globalAction.link.url }}">{{ globalAction.link.label }}
                                </a>
                            </ng-template>
                            <scrm-logout-ui></scrm-logout-ui>
                        </div>
                    </li>
                </div>
            </ul>


        </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 class="navbar-collapse collapse collapsenav" [ngbCollapse]="mainNavCollapse">
                    <scrm-home-menu-item
                            [route]="getHomePage()"
                            [active]="vm.appState.module && vm.appState.module === 'home'"
                    ></scrm-home-menu-item>

                    <!-- Navbar with grouped tabs -->

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

                        <ul class="navbar-nav grouped">

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

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

                            </li>
                        </ul>

                        <scrm-menu-items-list [items]="navbar.all.modules"
                                              [label]="vm.languages.appStrings['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 class="top-nav nav-item dropdown non-grouped active" *ngIf="navbar.current">
                                <scrm-menu-item [languages]="vm.languages" [item]="navbar.current"></scrm-menu-item>
                            </li>
                            <li class="top-nav nav-item dropdown non-grouped" *ngFor="let item of navbar.menu">
                                <scrm-menu-item [languages]="vm.languages" [item]="item"></scrm-menu-item>
                            </li>
                        </ul>

                        <scrm-menu-items-list [items]="navbar.all.modules"
                                              [label]="vm.languages.appStrings['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 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 aria-labelledby="navbarDropdownMenuLink"
                                 class="dropdown-menu global-links-dropdown dropdown-menu-right" ngbDropdownMenu>
                                <ng-container *ngIf="navbar.globalActions">
                                    <a class="dropdown-item global-links-sublink" ngbDropdownItem
                                       *ngFor="let globalAction of navbar.globalActions"
                                       target="{{ globalAction.link.target }}"
                                       href="{{ globalAction.link.url }}">{{ 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 -->
