<main class="container-fluid pb-4" [ngClass]="{'dark': darkMode}" (scroll)="onWindowScroll($event);">
  <app-alert></app-alert>
  <header class="row" id="header">
    <div class="col">
      <h3 class="p-2 my-1 text-white"><span class="py-2 px-5 mr-2"></span> VLA Sky Survey Manager</h3>
    </div>
    <div class="col-auto">
      <nav class="row">
        <a class="col-auto" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
          <fa-icon [icon]="faHome"></fa-icon>
          Home
        </a>
        <a routerLink="/tiles" routerLinkActive="active">
          <fa-icon [icon]="faClone"></fa-icon>
          Tiles
        </a>
        <a routerLink="/calibrators" routerLinkActive="active">
          <fa-icon [icon]="faStream"></fa-icon>
          Calibrators
        </a>
        <a class="col-auto" routerLink="/settings" routerLinkActive="active">
          <fa-icon [icon]="faSlidersH"></fa-icon>
          Settings
        </a>
        <!--<a class="col-auto" (click)="signIn()" href="javascript: void(0);" *ngIf="!isLoggedIn()">
          <fa-icon [icon]="faSignInAlt"></fa-icon>
          Sign In
        </a>-->
        <a class="col-auto" (click)="signOut()" href="javascript: void(0);" *ngIf="isLoggedIn()">
          <fa-icon [icon]="faSignOutAlt"></fa-icon>
          Sign Out
        </a>
      </nav>
    </div>
  </header>

  <nav id="main_nav" class="row align-items-center">
    <a routerLink="/products" class="col-auto" routerLinkActive="active">
      <fa-icon [icon]="faCube"></fa-icon>
      Products
    </a>
    <a routerLink="/jobs" class="col-auto" routerLinkActive="active">
      <fa-icon [icon]="faList"></fa-icon>
      Jobs
    </a>
    <a routerLink="/executions" class="col-auto" routerLinkActive="active">
      <fa-icon [icon]="faCheckSquare"></fa-icon>
      Executions
    </a>
    <div class="col"></div>
    <div class="col-auto">
      <button type="button" class="btn btn-link text-light" (click)="setDarkMode(!darkMode)">
        <fa-icon [icon]="faSun"></fa-icon>
        <fa-icon [icon]="faToggleOn" [rotate]="darkMode ? 0 : 180" class="px-2"></fa-icon>
        <fa-icon [icon]="faMoon"></fa-icon>
      </button>
    </div>
  </nav>

  <nav class="row" id="sticky_nav">
    <div class="col-auto">
      <img src="assets/images/vlass-icon.png" class="mt-2" width="50px" alt="VLASS Manager"/>
    </div>
    <a routerLink="/products" class="col-auto" routerLinkActive="active">
      <fa-icon [icon]="faCube"></fa-icon>
      Products
    </a>
    <a routerLink="/jobs" class="col-auto" routerLinkActive="active">
      <fa-icon [icon]="faList"></fa-icon>
      Jobs
    </a>
    <a routerLink="/qa" class="col-auto" routerLinkActive="active">
      <fa-icon [icon]="faCheckSquare"></fa-icon>
      Executions
    </a>
    <a routerLink="/tiles" routerLinkActive="active">
      <fa-icon [icon]="faClone"></fa-icon>
      Tiles
    </a>
    <a routerLink="/calibrators" routerLinkActive="active">
      <fa-icon [icon]="faStream"></fa-icon>
      Calibrators
    </a>
    <a routerLink="/settings" class="col-auto" routerLinkActive="active">
      <fa-icon [icon]="faSlidersH"></fa-icon>
      Settings
    </a>
  </nav>

  <router-outlet></router-outlet>


</main>
<footer class="p-3">
  <p class="m-0">NRAO --- VLA Sky Survey Manager</p>
</footer>