<!--********************************************************************************
 * Copyright (c) 2015-2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 ********************************************************************************-->
  <div class="mainnavigation">
    <div id="leftsidenav" class="split">
      <nav class="navigator">
        <div class="navbar navbar-default container-fluid" style="padding: 0px 5px;">
          <div class="navbar-header">
            <a class="navbar-brand" (click)="activate('Navigation')" style="cursor:pointer;">{{ 'navigator-view.mdm-navigator-view.navigator' | translate }}</a>
          </div>
          <div>
            <ul class="nav navbar-nav navbar-right">
              <li [ngClass]="isDropActive('Dropdown')" title="{{ 'navigator-view.mdm-navigator-view.select-node-provider' | translate }}" dropdown>
                <a (click)="activate('Dropdown')" class="dropdown-toggle" dropdownToggle aria-haspopup="true" aria-expanded="false" style="cursor:pointer;">
                  {{activeNodeprovider.name}}
                  <em class="caret"></em>
                </a>
                <ul class="dropdown-menu" *dropdownMenu>
                  <li *ngFor="let np of getNodeproviders()">
                    <a class="dropdown-item" (click)="activateNodeProvider(np)" style="cursor:pointer;">
                      {{np.name}}
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <mdm-navigator></mdm-navigator>
      </nav>
    </div>
    <div id="rightsidenav" class="split">
      <div class="navigator-content" (scroll)=onScroll($event)>
        <router-outlet></router-outlet>
        <mdm-basket (onSelect)="updateSelectedNode($event)" [activeNode]=activeNode (onActive)="updateActiveNode($event)"></mdm-basket>
        <div *ngIf="scrollBtnVisible" style="position: fixed; bottom: 30px; right: 35px;">
          <button class="btn btn-default" (click)="onScrollTop()" style="z-index: 10000;"><span class="fa fa-arrow-up" style="z-index: 10000;" title="{{ 'navigator-view.mdm-navigator-view.tooltip-scroll-up' | translate }}"></span></button>
        </div>
      </div>
    </div>
  </div>