<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top mat-elevation-z4" role="navigation">

    <!-- <div class="container-fluid"> -->
        <!-- Brand and toggle get grouped for better mobile display -->
            <!-- <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span> <span
                    class="icon-bar"></span> <span class="icon-bar"></span> <span
                    class="icon-bar"></span>
            </button> -->
        <a *ngIf="loggedIn" class="navbar-brand" routerLink="/">
            <img src="{{themeConfig.DEPLOYMENT_LOGO_PATH}}" height="25px">
        </a>
        <a *ngIf="!loggedIn" class="navbar-brand" routerLink="/">
            <img src="{{themeConfig.DEPLOYMENT_LOGO_PATH}}" height="25px">
        </a>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <button class="navbar-toggler" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed"
            aria-controls="navbarsDefault"
            [attr.aria-expanded]="!isNavbarCollapsed"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div [ngbCollapse]="isNavbarCollapsed" class="collapse navbar-collapse" id="navbarsDefault">

            <!-- Landing Portal Menu -->
            <!-- ----- -->
            <ul class="navbar-nav mr-auto" *ngIf="appService.portalDomain === ''" [@fadeIn]>
                <li class="nav-item">
                    <a class="nav-link" routerLink="services/">Services</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" routerLink="resources/">Resources</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="nfvportal/">NFV</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="testing/">Testing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="products/">Products</a>
                </li>
            </ul>
            <!-- ----- -->
            <!-- ENDOF Landing Portal Menu -->

            <!-- Services Portal Menu -->
            <!-- ----- -->
            <ul class="navbar-nav mr-auto" *ngIf="appService.portalDomain === 'services'">
                <li class="nav-item" routerLinkActive="active">
                    <a class="nav-link" routerLink="/{{appService.portalDomain}}/services_marketplace">Services Marketplace</a>
                </li>
                <!-- <li class="nav-item" routerLinkActive="active">
                    <a class="nav-link" routerLink="/experiments_marketplace">Experiments</a>
                </li>
                <li class="nav-item" routerLinkActive="active">
                    <a class="nav-link" routerLink="/vxf_marketplace">VxFs</a>
                </li> -->

                <li class="nav-item" routerLinkActive="active" *ngIf="(authService.isAuthenticated$ | async) && !authService.portalUserJWT?.realm_access.roles.includes('ADMIN')" [@fadeIn]>
                    <a class="nav-link" routerLink="/{{appService.portalDomain}}/my_service_orders">My Service Orders</a>
                </li>

                <li class="nav-item" routerLinkActive="active" *ngIf="(authService.isAuthenticated$ | async) && !authService.portalUserJWT?.realm_access.roles.includes('ADMIN')" [@fadeIn]>
                    <a class="nav-link" routerLink="/{{appService.portalDomain}}/service_inventory">My Service Inventory</a>
                </li>


                <li class="nav-item dropdown" ngbDropdown *ngIf="(authService.isAuthenticated$ | async) && authService.portalUserJWT?.realm_access.roles.includes('ADMIN')" [@fadeIn]>
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" aria-haspopup="true" ngbDropdownToggle tabindex="0">Manage Services
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown" ngbDropdownMenu>
                            <!-- <div class="optgroup-label">Catalog Management</div> -->
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/service_catalogs">Service Catalogs</a></li>
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/service_categories">Service Categories</a></li>
                            <li class="dropdown dropdown-submenu" ngbDropdown>
                                <a class="dropdown-toggle" id="navbarDropdown1" aria-haspopup="true" ngbDropdownToggle tabindex="0">Service Specifications</a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown1" ngbDropdownMenu>
                                        <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/service_specs">List Service Specifications</a></li>
                                        <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/service_spec_update">New Service Specification</a></li>
                                        <div class="dropdown-divider"></div>
                                        <!-- <div class="optgroup-label">Choose from Templates</div> -->
                                        <li><a class="dropdown-item clone-item" tabindex="0" (click)="onGSTtemplateClick()">New GST External</a></li>
                                        <li><a class="dropdown-item clone-item" tabindex="0" (click)="onVINNItemplateClick()">New VINNI-SB</a></li>
                                </ul>
                            </li>
                            <div class="dropdown-divider"></div>
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/list_nsds">Import from NSD list</a></li>
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/list_tests">Import from Tests list</a></li>
                            <div class="dropdown-divider"></div>
                            <!-- <div class="optgroup-label">Order Management</div> -->
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/service_orders">Service Orders</a></li>
                            <!-- <a class="dropdown-item">More</a> -->
                            <div class="dropdown-divider"></div>
                            <!-- <div class="optgroup-label">Order Management</div> -->
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/service_inventory">Service Inventory</a></li>

                        </ul>
                    </a>
                </li>

                <li class="nav-item dropdown" ngbDropdown *ngIf="(authService.isAuthenticated$ | async) && authService.portalUserJWT?.realm_access.roles.includes('ADMIN')" [@fadeIn]>
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" aria-haspopup="true" ngbDropdownToggle tabindex="0">Manage Entities
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown" ngbDropdownMenu>
                            <!-- <div class="optgroup-label">Catalog Management</div> -->
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/organizations">Organizations</a></li>
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/individuals">Individuals</a></li>
                        </ul>
                    </a>
                </li>

                <li class="nav-item dropdown" ngbDropdown *ngIf="(authService.isAuthenticated$ | async) && authService.portalUserJWT?.realm_access.roles.includes('ADMIN')" [@fadeIn]>
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" aria-haspopup="true" ngbDropdownToggle tabindex="0">Monitoring
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown" ngbDropdownMenu>
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/alarms">Alarms</a></li>
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/action_specs">Action Specifications</a></li>
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/action_rules">Action Rules</a></li>
                        </ul>
                    </a>
                </li>



            </ul>
            <!-- ENDOF Services Portal Menu -->
            <!-- ----- -->

            <!-- Resources Portal Menu -->
            <!-- ----- -->
            <ul class="navbar-nav mr-auto" *ngIf="appService.portalDomain === 'resources'">
              <!-- <li class="nav-item" routerLinkActive="active">
                  <a class="nav-link" routerLink="/{{appService.portalDomain}}/resources_marketplace">Resources Marketplace</a>
              </li> -->

              <!-- <li class="nav-item" routerLinkActive="active" *ngIf="(authService.isAuthenticated$ | async) && !authService.portalUserJWT?.realm_access.roles.includes('ADMIN')" [@fadeIn]>
                  <a class="nav-link" routerLink="/{{appService.portalDomain}}/my_resource_orders">My Resource Orders</a>
              </li> -->

              <li class="nav-item" routerLinkActive="active" *ngIf="(authService.isAuthenticated$ | async) && !authService.portalUserJWT?.realm_access.roles.includes('ADMIN')" [@fadeIn]>
                  <a class="nav-link" routerLink="/{{appService.portalDomain}}/resource_inventory">My Resource Inventory</a>
              </li>


              <li class="nav-item dropdown" ngbDropdown *ngIf="(authService.isAuthenticated$ | async) && authService.portalUserJWT?.realm_access.roles.includes('ADMIN')" [@fadeIn]>
                  <a class="nav-link dropdown-toggle" id="navbarDropdown" aria-haspopup="true" ngbDropdownToggle tabindex="0">Manage Resources
                      <ul class="dropdown-menu" aria-labelledby="navbarDropdown" ngbDropdownMenu>
                          <!-- <div class="optgroup-label">Catalog Management</div> -->
                          <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/resource_catalogs">Resource Catalogs</a></li>
                          <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/resource_categories">Resource Categories</a></li>
                          <li class="dropdown dropdown-submenu" ngbDropdown>
                              <a class="dropdown-toggle" id="navbarDropdown1" aria-haspopup="true" ngbDropdownToggle tabindex="0">Resource Specifications</a>
                              <ul class="dropdown-menu" aria-labelledby="navbarDropdown1" ngbDropdownMenu>
                                    <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/resource_specs">List Resource Specifications</a></li>
                                    <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/resource_spec_update">New Resource Specification</a></li>
                              </ul>
                          </li>
                          <!-- <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/resource_osm_add">Add OSM Resource</a></li> -->
                          <!-- <div class="optgroup-label">Order Management</div> -->
                          <!-- <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/resource_orders">Resource Orders</a></li> -->
                          <!-- <a class="dropdown-item">More</a> -->
                          <div class="dropdown-divider"></div>
                          <!-- <div class="optgroup-label">Order Management</div> -->
                          <!-- <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/new_resource">New Resource</a></li> -->
                          <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/resource_inventory">Resource Inventory</a></li>

                          <div class="dropdown-divider"></div>
                          <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/resource_pools">Resource Pools</a></li>
                          <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/resource_reservations">Resource Reservations</a></li>
  

                      </ul>
                  </a>
              </li>


              
                
              <!-- <li class="nav-item dropdown" ngbDropdown *ngIf="(authService.isAuthenticated$ | async) && authService.portalUserJWT?.realm_access.roles.includes('ADMIN')" [@fadeIn]>
                <a class="nav-link dropdown-toggle" id="navbarDropdown" aria-haspopup="true" ngbDropdownToggle tabindex="0">ManageReservation
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown" ngbDropdownMenu>
                        <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/list-resource-pools">Resource Pools management</a></li>
                        <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/resource-reservation-management">Reservation management</a></li>
                    </ul>
                </a>
             </li> -->

          </ul>
          <!-- ENDOF Resources Portal Menu -->
          <!-- ----- -->


            <!-- Product Portal Menu -->
            <!-- ----- -->
            <ul class="navbar-nav mr-auto" *ngIf="appService.portalDomain === 'products'">

                <li class="nav-item" routerLinkActive="active">
                    <a class="nav-link" routerLink="/{{appService.portalDomain}}/marketplace">Marketplace</a>
                </li>

                <li class="nav-item dropdown" ngbDropdown *ngIf="(authService.isAuthenticated$ | async) && authService.portalUserJWT?.realm_access.roles.includes('ADMIN')" [@fadeIn]>
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" aria-haspopup="true" ngbDropdownToggle tabindex="0">Manage Products
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown" ngbDropdownMenu>
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/product_catalogs">Product Catalogs</a></li>
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/product_categories">Product Categories</a></li>
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/product_offerings">Product Offerings</a></li>
                            <li><a class="dropdown-item" tabindex="0" routerLink="{{appService.portalDomain}}/product_specs">Product Specifications</a></li>
                            <!-- <li class="dropdown dropdown-submenu" ngbDropdown>
                                <a class="dropdown-toggle" id="navbarDropdown1" aria-haspopup="true" ngbDropdownToggle tabindex="0">Product Specifications</a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown1" ngbDropdownMenu>
                                        <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/product_specs">List Product Specifications</a></li>
                                        <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/product_spec_update">New Product Specification</a></li>
                                </ul>
                            </li> -->
                        </ul>
                    </a>
                </li>

                <li class="nav-item dropdown" ngbDropdown *ngIf="(authService.isAuthenticated$ | async) && authService.portalUserJWT?.realm_access.roles.includes('ADMIN')" [@fadeIn]>
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" aria-haspopup="true" ngbDropdownToggle tabindex="0">Manage Entities
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown" ngbDropdownMenu>
                            <!-- <div class="optgroup-label">Catalog Management</div> -->
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/organizations">Organizations</a></li>
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/individuals">Individuals</a></li>
                        </ul>
                    </a>
                </li>


            </ul>
            <!-- ----- -->
            <!-- ENDOF Landing Portal Menu -->


            <!-- Testing Portal Menu -->
            <!-- ----- -->
            <ul class="navbar-nav mr-auto" *ngIf="appService.portalDomain === 'testing'">
                <li class="nav-item dropdown" ngbDropdown *ngIf="(authService.isAuthenticated$ | async) && authService.portalUserJWT?.realm_access.roles.includes('ADMIN')" [@fadeIn]>
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" aria-haspopup="true" ngbDropdownToggle tabindex="0">Manage Tests
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown" ngbDropdownMenu>
                            <!-- <div class="optgroup-label">Catalog Management</div> -->
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/service_test_specs">Test Specifications</a></li>
                            <div class="dropdown-divider"></div>
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/service_tests">Test Instances</a></li>
                        </ul>
                    </a>
                </li>

                <li class="nav-item dropdown" ngbDropdown *ngIf="(authService.isAuthenticated$ | async) && authService.portalUserJWT?.realm_access.roles.includes('ADMIN')" [@fadeIn]>
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" aria-haspopup="true" ngbDropdownToggle tabindex="0">Manage Entities
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown" ngbDropdownMenu>
                            <!-- <div class="optgroup-label">Catalog Management</div> -->
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/organizations">Organizations</a></li>
                            <li><a class="dropdown-item" tabindex="0" routerLink="/{{appService.portalDomain}}/individuals">Individuals</a></li>
                        </ul>
                    </a>
                </li>
            </ul>
            <!-- ----- -->
            <!-- ENDOF Testing Portal Menu -->


            <ng-container *ngIf="appService.portalDomain !== ''">
                <ng-container *ngIf="authService.isAuthenticated$ | async; else elseTemplate">
                    <ul class="navbar-nav">
                            <li class="nav-item" [@fadeIn] *ngIf="appService.portalDomain === 'services'">
                                <a class="nav-link d-flex align-items-center" routerLink="/{{appService.portalDomain}}/service_order_checkout">
                                    <span class="badge badge-danger mr-1"> {{requesterService.orderedSpecsList.length}} </span>
                                    <i class="fas fa-shopping-cart mr-1"></i>
                                    <span> Order List </span>
                                </a>
                            </li>

                            <li class="nav-item dropdown" ngbDropdown *ngIf="authService.portalUser" [@fadeIn]>
                                <a class="nav-link dropdown-toggle" id="navbarDropdown2" aria-haspopup="true" ngbDropdownToggle tabindex="-1">{{authService.portalUserJWT.preferred_username}}</a>
                                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown2" ngbDropdownMenu>
                                    <li class="user-info">Name: {{authService.portalUser.familyName}} {{authService.portalUser.givenName}}</li>
                                    <li class="user-info">Organization:
                                        <span *ngFor="let characteristic of authService.portalUser.partyCharacteristic">
                                            <span *ngIf="characteristic.name === 'organization'"> {{characteristic.value.value}}
                                            </span>
                                        </span>
                                    </li>
                                    <li class="user-info">Email: {{authService.portalUser.contactMedium[0].characteristic.emailAddress}}</li>
                                    <li class="user-info">Roles: <span *ngFor="let role of authService.portalUserJWT.realm_access.roles; let last = last">{{role | titlecase}}<span *ngIf="!last">, </span></span></li>

                                    <div class="dropdown-divider"></div>
                                    <li class="dropdown-item" routerLink='/{{appService.portalDomain}}/individual_update/myuser' >
                                        <a class="dropdown-link" ><i class="far fa-edit mr-2"></i>Edit my profile</a>
                                    </li>

                                    <div class="dropdown-divider"></div>
                                    <li class="dropdown-item" (click)="logout()" >
                                        <a class="dropdown-link" ><i class="fas fa-sign-out-alt mr-2"></i>Sign out</a>
                                    </li>
                                </ul>
                            </li>
                    </ul>
                </ng-container>

                <ng-template #elseTemplate>
                    <ul class="navbar-nav">
                        <li class="nav-item" [@fadeIn]>
                            <a class="nav-link" (click)="login()">Sign in</a>
                        </li>
                    </ul>
                </ng-template>
            </ng-container>
        </div>

    <!-- </div> -->
</nav>
