<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="/"><img src="logo.png" height="30px" alt="Tap It!"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li *ngFor="let navlink of navlinks" data-toggle="collapse" data-target="#navbarNav" class="nav-item">
        <a class="nav-link" *ngIf="navlink.loginOnly === authService.loggedin" [ngClass]="{'active': router.url === navlink.link}" routerLink="/{{ navlink.link }}">
          {{ navlink.name }}
          <span *ngIf="this.router.url === navlink.link" class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item dropdown" *ngIf="authService.loggedin === true">
          <a class="nav-link dropdown-toggle" routerLink="{{ router.url }}" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Settings
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" routerLink="/profile">Profile</a>
            <a class="dropdown-item" routerLink="/provider">Providers</a>
            <a class="dropdown-item" routerLink="/global-settings">Global Settings</a>
          </div>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li *ngIf="authService.loggedin" data-toggle="collapse" data-target="#navbarNav" class="nav-item">
        <a class="nav-link" routerLink="/" (click)="authService.logout()">Log Out</a>
      </li>
      <li *ngIf="!authService.loggedin" data-toggle="collapse" data-target="#navbarNav" class="nav-item">
        <a class="nav-link" routerLink="/login">Login</a>
      </li>
    </ul>
  </div>
</nav>

<main class="container-fluid pt-2">
  <router-outlet></router-outlet>
</main>


<div class="fixed-bottom"><app-notification></app-notification></div>
