<!--
  ~ 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="nav-bar" [hidden]="!isLoggedIn">
  <mat-progress-bar *ngIf="showProgressBar" mode="indeterminate"></mat-progress-bar>
  <div class="menu-area" *ngIf="healthStatus">

    <button class="hamburger" (click)="collapse()">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </button>

    <a [routerLink]="['/resources_list']" class="navbar-logo">
      <img src="assets/img/logo-nav.png" alt="">
    </a>
  </div>

  <div class="control-area" *ngIf="healthStatus">
    <!-- <a *ngIf="healthStatus.status" [routerLink]="['/environment_management']" class="statusbar">
      <span class="material-icons" ngClass="{{healthStatus.status || ''}}">radio_button_checked</span>
    </a> -->
    <a class="statusbar" #info (click)="actions.toggle($event, info)" *ngIf="metadata">
      <span class="material-icons meta">info</span>
    </a>
    <bubble-up #actions class="list-menu" position="bottom-right">
      <div class="app-info">
        <p>
          <strong>Version: </strong>
          <span class="ellipsis">{{ metadata?.version }}</span>
        </p>
        <p>
          <strong>Branch: </strong>
          <span class="ellipsis">{{ metadata?.branch }}</span>
        </p>
        <p>
          <strong>Revision: </strong>
          <span class="ellipsis commit" matTooltip="{{ metadata?.commit }}"
            matTooltipPosition="above">{{ metadata?.commit }}</span>
        </p>
        <p>
          <a class="helper_instruction" [attr.href]="metadata?.release_notes" target="_blank">
            <i class="material-icons">link</i>Release notes </a>
        </p>
      </div>
    </bubble-up>
    <button class="btn btn-logout ani" (click)="logout_btnClick()">Log out <span
        class="user-name">{{currentUserName}}</span></button>
  </div>

</div>
<mat-sidenav-container class="example-container" autosize>
  <mat-sidenav #drawer mode="side" opened role="navigation" [style.width]="isExpanded ? '220px' : '60px'" disableClose>
    <mat-nav-list>
      <nav>
        <div>
          <a class="nav-item" [routerLink]="['/resources_list']" [routerLinkActive]="['active']"
            [routerLinkActiveOptions]="{exact:true}">
            <span *ngIf="isExpanded; else resources">List of Resources</span>
            <ng-template #resources><i class="material-icons">dashboard</i></ng-template>
          </a>
          <a class="nav-item has-children" *ngIf="healthStatus?.admin || healthStatus?.projectAdmin">
            <span *ngIf="isExpanded">Administration</span>

            <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/roles']"
              [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
              <span *ngIf="isExpanded; else roles">Roles</span>
              <ng-template #roles><i class="material-icons">account_box</i></ng-template>
            </a>
            <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/projects']"
              [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
              <span *ngIf="isExpanded; else projects">Projects</span>
              <ng-template #projects><i class="material-icons">dns</i></ng-template>
            </a>
            <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'"
              [routerLink]="['/environment_management']" [routerLinkActive]="['active']"
              [routerLinkActiveOptions]="{exact:true}">
              <span *ngIf="isExpanded; else env">Environment Management</span>
              <ng-template #env><i class="material-icons">settings</i></ng-template>
            </a>
          </a>
          <a *ngIf="healthStatus?.billingEnabled" class="nav-item" [routerLink]="['/billing_report']"
            [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
            <span *ngIf="isExpanded; else billing">Billing Report</span>
            <ng-template #billing><i class="material-icons">account_balance_wallet</i></ng-template>
          </a>
        </div>
<!--        <div>-->
<!--          <a class="nav-item" [routerLink]="['/swagger']" [routerLinkActive]="['active']"-->
<!--            [routerLinkActiveOptions]="{exact:true}">-->
<!--            <span *ngIf="isExpanded; else endpoint">Cloud Endpoint API</span>-->
<!--            <ng-template #endpoint>-->
<!--              <span>-->
<!--                <svg width="30px" height="27px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">-->
<!--                  <g>-->
<!--                    <path d="M127.059657,255.996921 C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628 57.9516598,-0.468967577 129.11002,0.00284555012 C198.267128,0.462386081 256.613109,57.8667711 255.995136,128.194199 C256.568091,197.883453 197.934268,256.489189 127.059657,255.996921 Z M127.059657,255.996921 C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628 57.9516598,-0.468967577 129.11002,0.00284555012 C198.267128,0.462386081 256.613109,57.8667711 255.995136,128.194199 C256.568091,197.883453 197.934268,256.489189 127.059657,255.996921 Z" fill="#FFFFFF"></path>-->
<!--                    <path id="swager-bgr" d="M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17.0024872 C188.934544,17.4010221 239.531905,67.1825241 238.995778,128.169251 C239.492444,188.602381 188.64743,239.424426 127.184644,238.997327 Z M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17.0024872 C188.934544,17.4010221 239.531905,67.1825241 238.995778,128.169251 C239.492444,188.602381 188.64743,239.424426 127.184644,238.997327 Z" fill="#577289"></path>-->
<!--                    <path d="M169.327319,127.956161 C169.042723,133.246373 164.421106,137.639224 159.866213,136.872586 C159.844426,136.872586 159.821277,136.872586 159.798128,136.872586 C154.753021,136.879395 150.658383,132.794288 150.652936,127.749182 C150.824511,122.690458 155.019915,118.703395 160.08,118.789182 C165.125106,118.813692 169.59966,123.077182 169.327319,127.956161 Z M88.2011915,179.220161 C90.1034894,179.27599 92.0071489,179.235139 94.2008511,179.235139 L94.2008511,193.021012 C80.5661277,195.326373 69.3348085,191.455054 66.5787234,179.929607 C65.6350638,175.69199 65.0549787,171.380841 64.8425532,167.04382 C64.5497872,162.452161 65.0563404,157.808756 64.706383,153.225267 C63.7368511,140.613182 62.1028085,136.30748 50,135.711054 L50,120.014714 C50.8674043,119.81182 51.7470638,119.662033 52.6321702,119.562629 C59.2677447,119.23582 62.0646809,117.201437 63.5489362,110.665267 C64.2243404,106.992756 64.6246809,103.275309 64.7431489,99.5428839 C65.268766,92.3258627 65.0822128,84.991735 66.2845957,77.8918201 C68.0221277,67.6245861 74.3962553,62.6366712 84.9249362,62.0783733 C87.9206809,61.9176925 90.9259574,62.0538627 94.3206809,62.0538627 L94.3206809,76.1447563 C92.9235745,76.2441605 91.6435745,76.4470542 90.3717447,76.4089265 C81.7916596,76.146118 81.3477447,79.0683308 80.7213617,86.1709691 C80.3305532,90.6250967 80.8697872,95.1554797 80.5661277,99.6245861 C80.2488511,104.071905 79.6537872,108.496075 78.7850213,112.869863 C77.547234,119.208586 73.6500426,123.922799 68.2495319,127.92348 C78.7332766,134.745607 79.9261277,145.346458 80.6069787,156.110714 C80.9732766,161.895224 80.8057872,167.720586 81.3926809,173.476501 C81.8502128,177.944246 83.5877447,179.08399 88.2011915,179.220161 Z M97.0372766,118.789182 C97.0917447,118.789182 97.1448511,118.789182 97.1993191,118.789182 C102.211745,118.872246 106.209702,123.002288 106.126638,128.016075 C106.126638,128.180841 106.121191,128.344246 106.11166,128.50765 C105.829787,133.407054 101.630298,137.149012 96.7308936,136.867139 C96.5334468,136.871224 96.3373617,136.867139 96.1399149,136.857607 C91.1506383,136.609778 87.3065532,132.36399 87.554383,127.374714 C87.8022128,122.385437 92.048,118.541352 97.0372766,118.789182 Z M128.273362,118.789182 C133.755574,118.746969 137.396766,122.29965 137.425362,127.719224 C137.455319,133.284501 134.003404,136.845352 128.556596,136.868501 C123.017191,136.893012 119.370553,133.389352 119.340596,128.002458 C119.324255,127.727395 119.32017,127.452331 119.32834,127.177267 C119.482213,122.390884 123.486979,118.635309 128.273362,118.789182 Z M193.673191,111.92348 C195.131574,117.370288 197.970723,119.284841 203.704851,119.546288 C204.644426,119.589863 205.579915,119.749182 206.868085,119.892161 L206.868085,135.584416 C206.170894,135.813182 205.456,135.984756 204.730213,136.096416 C197.046128,136.574373 193.54383,139.726714 192.76766,147.431224 C192.272,152.349692 192.312851,157.322629 191.972426,162.258799 C191.829447,167.678373 191.336511,173.082969 190.49634,178.438544 C188.535489,188.142033 182.477277,192.982884 172.467404,193.573863 C169.245617,193.764501 166.000681,193.60382 162.526979,193.60382 L162.526979,179.578288 C164.396596,179.462544 166.046979,179.303224 167.701447,179.263735 C173.682043,179.120756 175.796766,177.192586 176.089532,171.252841 C176.413617,164.727565 176.555234,158.194118 176.846638,151.66748 C177.270128,142.233607 179.853277,133.806033 188.641702,127.922118 C183.612936,124.336756 179.575489,119.994288 178.529702,114.138969 C177.264681,107.041778 176.85617,99.7879903 176.175319,92.5913946 C175.838979,88.9937776 175.855319,85.3648414 175.504,81.7699478 C175.125447,77.8890967 172.459234,76.5464584 168.926979,76.4593095 C166.903489,76.4102882 164.87183,76.4497776 162.284596,76.4497776 L162.284596,62.7537776 C178.793872,60.0126712 190.198128,65.5057776 191.257532,81.3015222 C191.701447,87.9343733 191.636085,94.5985435 192.060936,101.231395 C192.247489,104.839905 192.786723,108.421182 193.673191,111.92348 Z" fill="#ffffff"></path>-->
<!--                  </g>-->
<!--                </svg>-->
<!--              </span>-->
<!--            </ng-template>-->
<!--          </a>-->
<!--        </div>-->
      </nav>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content id="scrolling" [style.margin-left]="isExpanded ? '220px' : '60px'">
    <div [@fadeAnimation]="getRouterOutletState(routerOutlet)" class="fade-animation">

      <router-outlet #routerOutlet="outlet"></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>