<!--
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->

<div class="navigation" [ngClass]="{ open: isNavOpen }">
  <div class="logo">
    <a [routerLink]="['/']">
      <img src="./assets/images/logo.png" />
      <div class="text-md text-semibold">YuniKorn</div>
    </a>
  </div>
  <ul class="navigation-primary">
    <li routerLinkActive="active">
      <a [routerLink]="['/dashboard']">
        <i class="fa fa-caret-right fa-2x"></i>
        <i class="fa fa-th-large"></i>
        <span>Dashboard</span>
      </a>
    </li>
    <li routerLinkActive="active">
      <a [routerLink]="['/applications']">
        <i class="fa fa-caret-right"></i>
        <i class="fa fa-indent"></i>
        <span>Applications</span>
      </a>
    </li>
    <li routerLinkActive="active">
      <a [routerLink]="['/queues']">
        <i class="fa fa-caret-right"></i>
        <i class="fa fa-sitemap" style="width: 16px;"></i>
        <span>Queues</span>
      </a>
    </li>
    <li routerLinkActive="active">
      <a [routerLink]="['/nodes']">
        <i class="fa fa-caret-right"></i>
        <i class="fa fa-server"></i>
        <span>Nodes</span>
      </a>
    </li>
  </ul>
  <div class="expander" (click)="toggleNavigation()">
    <i class="fa fa-angle-double-left"></i>
    <i class="fa fa-angle-double-right"></i>
  </div>
</div>
<div class="wrapper">
  <div class="container-fluid">
    <div class="header">
      <div class="breadcrumb-wrapper">
        <ul class="breadcrumb">
          <li *ngFor="let crumb of breadcrumbs">
            <a href="#" [routerLink]="[crumb.url]">{{ crumb.label }}</a>
          </li>
        </ul>
        <div class="help-menu">
          <button
            class="menu-trigger"
            mat-button
            matTooltip="Help"
            matTooltipShowDelay="500"
            [matMenuTriggerFor]="helpMenu"
          >
            <i class="fa fa-question"></i>
          </button>
          <mat-menu #helpMenu="matMenu" xPosition="before">
            <button mat-menu-item (click)="openYuniKornHelp('/')">Apache YuniKorn (Incubating)</button>
            <button mat-menu-item (click)="openYuniKornHelp('/docs')">Documentation</button>
            <button mat-menu-item (click)="openYuniKornHelp('/community/sessions')">
              Sessions and Demos
            </button>
            <button mat-menu-item (click)="openYuniKornHelp('/community/get_involved')">
              Get Involved
            </button>
          </mat-menu>
        </div>
      </div>
    </div>
    <div class="content-wrapper">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

<ngx-spinner
  bdColor="rgba(51,51,51,0.7)"
  size="default"
  color="#2192bf"
  type="ball-clip-rotate"
></ngx-spinner>