<! --
/**
* 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="d-flex align-items-center">
                    <ng-container *ngTemplateOutlet="actionIcons"></ng-container>
                    <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>
                            </a>
                            <div [style.min-width.px]="mobileGlobalLinkTitle.offsetWidth"
                                 aria-labelledby="navbarDropdownMenuLink"
                                 class="dropdown-menu global-links-dropdown border shadow-sm-2" ngbDropdownMenu>
                                <span
                                    class="global-user-name">{{ navbar.currentUser.firstName }} {{ navbar.currentUser.lastName }}</span>
                                <ng-template [ngIf]="navbar.globalActions">
                                    <ng-container
                                        *ngFor="let globalAction of navbar.globalActions; let first = first; let last = last;">
                                        <a class="dropdown-item global-links-sublink"
                                           href="{{ globalAction.link.url }}"
                                           ngbDropdownItem
                                           target="{{ globalAction.link.target }}">{{ globalAction.link.label }}
                                        </a>
                                        <hr *ngIf="last === true || first === true"/>
                                    </ng-container>
                                </ng-template>
                                <scrm-logout-ui></scrm-logout-ui>
                            </div>
                        </li>
                    </div>
                </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 [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>

                <ng-container *ngTemplateOutlet="actionIcons"></ng-container>

                <!-- 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>
                            </a>
                            <div aria-labelledby="navbarDropdownMenuLink"
                                 class="dropdown-menu global-links-dropdown border shadow-sm-2 dropdown-menu-right"
                                 ngbDropdownMenu>
                                <span
                                    class="global-user-name">{{ navbar.currentUser.firstName }} {{ navbar.currentUser.lastName }}</span>
                                <ng-container *ngIf="navbar.globalActions">
                                    <ng-container
                                        *ngFor="let globalAction of navbar.globalActions; let first = first; let last = last;">
                                        <a class="dropdown-item global-links-sublink"
                                           href="{{ globalAction.link.url }}"
                                           ngbDropdownItem
                                           target="{{ globalAction.link.target }}">{{ globalAction.link.label }}
                                        </a>
                                        <hr *ngIf="last === true || first === true"/>
                                    </ng-container>

                                </ng-container>
                                <scrm-logout-ui></scrm-logout-ui>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- END Global Links -->

            </nav>

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

        </ng-container>
    </ng-container>

    <ng-template #actionIcons>
        <div class="action-group navbar-action-group">

            <div class="action-new dropdown">
                <a class="action-link primary-global-link" type="button" aria-label="Quick Create">
                    <scrm-image class="action-btn-icon" image="plus"></scrm-image>
                </a>
                <ul [class.dropdown-menu-right]="!mobileNavbar" class="dropdown-menu border shadow-sm-2">

                    <ng-container *ngIf="(navbar?.current?.module ?? '') && currentQuickActions.length">
                        <li class="new-list-item-header font-weight-bold">
                            <scrm-label labelKey="LBL_MODULE_NAME" [module]="navbar.current.module"></scrm-label>
                        </li>
                        <li class="new-list-item" *ngFor="let moduleQuickAction of currentQuickActions">
                            <ng-container *ngIf="!moduleQuickAction.process">
                                <a [routerLink]="moduleQuickAction.url" [queryParams]="moduleQuickAction?.params ?? null" class="d-flex align-items-center">
                                    <scrm-label [labelKey]="moduleQuickAction.labelKey" [module]="navbar.current.module"></scrm-label>
                                </a>
                            </ng-container>
                            <ng-container *ngIf="moduleQuickAction.process">
                                <a (click)="handleProcess(moduleQuickAction)" class="d-flex align-items-center">
                                    <scrm-label [labelKey]="moduleQuickAction.labelKey" [module]="navbar.current.module"></scrm-label>
                                </a>
                            </ng-container>

                        </li>
                    </ng-container>

                    <ng-container *ngIf="(this?.navigation?.quickActions ?? []).length">
                        <li class="new-list-item-header font-weight-bold">
                            <scrm-label labelKey="LBL_QUICK_ACTIONS"></scrm-label>
                        </li>
                        <li class="new-list-item" *ngFor="let quickAction of (this?.navigation?.quickActions ?? [])">
                            <ng-container *ngIf="!quickAction.process">
                                <a [routerLink]="quickAction.url" [queryParams]="quickAction?.params ?? null" class="d-flex align-items-center">
                                    <scrm-label [labelKey]="quickAction.labelKey" [module]="quickAction.module"></scrm-label>
                                </a>
                            </ng-container>
                            <ng-container *ngIf="quickAction.process">
                                <a (click)="handleProcess(quickAction)" class="d-flex align-items-center">
                                    <scrm-label [labelKey]="quickAction.labelKey" [module]="quickAction.module"></scrm-label>
                                </a>
                            </ng-container>
                        </li>
                    </ng-container>
                </ul>
            </div>

            <div class="d-flex align-items-center mx-1">
                <scrm-search-bar></scrm-search-bar>
            </div>

            <div
                *ngIf="notificationsEnabled && checkAppStrings(vm.appStrings) && arePreferencesInitialized(vm.userPreferences)"
                class="action-alert dropdown">
                <a class="action-link primary-global-link" type="button" aria-label="Toggle Alerts"
                   (mouseenter)="markAsRead()">
                    <scrm-image class="action-btn-icon" image="alert"></scrm-image>
                </a>
                <ng-container *ngIf="(notificationCount$ | async) as notificationCount">
                            <span *ngIf="(notificationCount ?? false)"
                                  class="badge badge-position rounded-pill bg-danger text-white">
                                <ng-container *ngIf="notificationCount > 0">{{notificationCount }}</ng-container>
                            </span>
                </ng-container>
                <div class="dropdown-menu border shadow-sm-2 dropdown-menu-right">
                    <scrm-notifications></scrm-notifications>
                </div>
            </div>

        </div>
    </ng-template>

</div>

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