<!--
  ~ Licensed 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="header">
  <div class="brand">
    <a routerLink="/">
      <div class="logo"></div>
      <div class="title">Zeppelin</div>
    </a>
  </div>
  <div class="nav">
    <ul nz-menu [nzMode]="'horizontal'">
      <li nz-menu-item [class.ant-menu-item-selected]="noteListVisible">
        <a
          nz-dropdown
          class="node-list-trigger"
          [nzDropdownMenu]="list"
          [nzTrigger]="'click'"
          [(nzVisible)]="noteListVisible"
        >
          Notebook
          <i class="small-icon" nz-icon nzType="caret-down"></i>
        </a>
        <nz-dropdown-menu #list="nzDropdownMenu">
          <zeppelin-node-list
            [headerMode]="true"
            class="ant-dropdown-menu padding-sm"
            *ngIf="noteListVisible"
          ></zeppelin-node-list>
        </nz-dropdown-menu>
      </li>
      <li nz-menu-item routerLinkActive="ant-menu-item-selected">
        <a [routerLink]="['/jobmanager']">Job</a>
      </li>
    </ul>
  </div>
  <div class="user" *ngIf="ticketService.ticket.init">
    <a nz-dropdown class="status" [nzTrigger]="'click'" [nzDropdownMenu]="menu">
      <nz-badge [nzStatus]="connectStatus" [nzText]="ticketService.ticket.screenUsername"></nz-badge>
      <i class="small-icon" nz-icon nzType="caret-down"></i>
    </a>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item (click)="about()">About Zeppelin</li>
        <li nz-menu-divider></li>
        <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
          <a [routerLink]="['/interpreter']">Interpreter</a>
        </li>
        <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
          <a [routerLink]="['/notebook-repos']">Notebook Repos</a>
        </li>
        <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
          <a [routerLink]="['/credential']">Credential</a>
        </li>
        <!--        <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">-->
        <!--          <a [routerLink]="['/helium']">Helium</a>-->
        <!--        </li>-->
        <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
          <a [routerLink]="['/configuration']">Configuration</a>
        </li>
        <ng-container *ngIf="ticketService.ticket.principal !== 'anonymous'">
          <li nz-menu-divider></li>
          <li nz-menu-item (click)="logout()">Logout</li>
        </ng-container>
        <li nz-menu-divider></li>
        <li nz-menu-item><a [href]="classicUiHref">Switch to Classic UI</a></li>
      </ul>
    </nz-dropdown-menu>
  </div>
  <div class="search">
    <nz-input-group [nzPrefixIcon]="'search'">
      <input type="text" nz-input placeholder="Search" (keyup.enter)="onSearch()" [(ngModel)]="queryStr" />
    </nz-input-group>
  </div>
  <zeppelin-theme-toggle class="theme-toggle"></zeppelin-theme-toggle>
</div>