<!--********************************************************************************
 * Copyright (c) 2015-2018 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
 *
 ********************************************************************************-->


<vertical-split-pane primary-component-minsize="{{minWidthLeft()}}" secondary-component-minsize="{{minWidthRight()}}" primary-component-initialratio="{{initRatio()}}">
  <div class="split-pane-content-primary">
    <nav class="navigator">
      <div class="navbar navbar-default container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" (click)="activate('Navigation')" style="cursor:pointer;">{{LblNavigator}}</a>
        </div>
        <div>
          <ul class="nav navbar-nav navbar-right">
            <li [ngClass]="isDropActive('Dropdown')" title="{{TtlSelectNodeprovider}}" 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 class="split-pane-content-secondary">
    <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="glyphicon glyphicon-arrow-up" style="z-index: 10000;" title="{{TtlScrollUp}}"></span></button>
      </div>
    </div>
  </div>
</vertical-split-pane>