<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item routerLink="">Home</a>
      <a mat-list-item routerLink="/schedule">Schedule</a>
      <a mat-list-item routerLink='../reservation'>Make Reservation</a>
      <a *ngIf="role == roles.Manager" mat-list-item routerLink="/manager-home">Manager Dashboard</a>
      <a *ngIf="role == roles.Dev" mat-list-item routerLink="/dev-work-request">Request System</a>

    </mat-nav-list>
    <!--Here is where JIRA goes-->
    <div [ngSwitch]="role">  <!--change to switch based on a role service-->
      <mat-toolbar class="IssueHeader" *ngSwitchCase="roles.FW">FW Issues</mat-toolbar>
      <mat-toolbar class="IssueHeader" *ngSwitchCase="roles.Dev">
        <div ngbDropdown class="dropdown" id="issuedropdown">
          <button ngbDropdownToggle class="btn" type="button" id="dropdownMenuButton2" aria-expanded="false">
            {{ vmString }}
          </button>
          <ul ngbDropdownMenu aria-labelledby="dropdownMenuButton2">
            <li><a ngbDropdownItem (click)="swapVMs(0)">Your Reservations</a></li>
            <li><a ngbDropdownItem (click)="swapVMs(1)">Reserved</a></li>
            <li><a ngbDropdownItem (click)="swapVMs(2)">Unreserved</a></li>
          </ul>
        </div>
      </mat-toolbar>
      <mat-toolbar class="IssueHeader" *ngSwitchCase="roles.Exec">Work Requests</mat-toolbar>
      <mat-toolbar *ngSwitchCase="roles.Manager">
        <div ngbDropdown class="dropdown" id="issuedropdown">
          <button ngbDropdownToggle class="btn" type="button" id="dropdownMenuButton2" aria-expanded="false">
          {{ issueString }}
          </button>
          <ul ngbDropdownMenu aria-labelledby="dropdownMenuButton2">
            <li><a ngbDropdownItem (click)="swapIssue(roles.Manager, 'None')">None</a></li>
            <li><a ngbDropdownItem (click)="swapIssue(roles.FW,'FW Issues')">FW Issues</a></li>
            <li><a ngbDropdownItem (click)="swapIssue(roles.Dev, 'VMs')">VMs</a></li>
            <li><a ngbDropdownItem (click)="swapIssue(roles.Exec, 'Work Requests')">Work Requests</a></li>
          </ul>
        </div>
    </mat-toolbar>
    </div>

    <div [ngSwitch]="issueType">
      <mat-nav-list *ngSwitchCase="roles.FW">
        <span *ngFor="let issue of issues">
          <a *ngIf="issue.status !== 'Done' && issue.partitionKey === 'FWIssues'" mat-list-item (click)=sendID(issue.id) routerLink="/issue">
            {{ issue.id }}
          </a>
        </span>
      </mat-nav-list>
      <mat-nav-list *ngSwitchCase="roles.Dev">
        <span *ngFor="let vm of vms">
          <a mat-list-item class="vm-item" *ngIf="vmFilter == 0 && vm.ownerID == userID && vm.type == 'test'">
            {{ vm.vm }}
            <div id="button-container">
              <button *ngIf="vm.vmversion == 'Windows'" type="button" (click)="gotoVM(vm, vm.vmlinkWin)" class="buttons btn btn-primary" name="windows">RDP</button>
              <button *ngIf="vm.vmversion == 'Linux'" type="button" (click)="gotoVM(vm, vm.vmlinkLin)" class="buttons btn btn-primary" name="linux">SSH</button>
            </div>
          </a>
          <a mat-list-item class="vm-item" *ngIf="vmFilter == 1 && vm.ownerID != 'NA' && vm.type == 'test'">
            {{ vm.vm }}
            <div id="button-container">
              <button *ngIf="vm.vmversion == 'Windows' && vm.ownerID == userID" type="button" (click)="gotoVM(vm, vm.vmlinkWin)" class="buttons btn btn-primary" name="windows">RDP</button>
              <button *ngIf="vm.vmversion == 'Linux' && vm.ownerID == userID" type="button" (click)="gotoVM(vm, vm.vmlinkLin)" class="buttons btn btn-primary" name="linux">SSH</button>
            </div>
          </a>
          <a mat-list-item class="vm-item" *ngIf="vmFilter == 2 && vm.ownerID == 'NA' && vm.type == 'test'">
            {{ vm.vm }}
          </a>
        </span>
      </mat-nav-list>
      <mat-nav-list *ngSwitchCase="roles.Exec">
        <span *ngFor="let work of works; index as i;">
          <a mat-list-item (click)=sendWork(i) routerLink="/workrq">
            {{ work.system }} : {{ work.id }}
          </a>
        </span>
      </mat-nav-list>
      <mat-nav-list *ngSwitchCase="roles.Manager">
      </mat-nav-list>
    </div>
  </mat-sidenav>
  <mat-sidenav-content>
  <mat-toolbar color="primary">
    <button
    type="button"
    aria-label="Toggle sidenav"
    mat-icon-button
    (click)="drawer.toggle()"
    *ngIf="isHandset$ | async">
    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
  </button>
    <span>VICE</span>
    <span class="example-spacer"></span>
    <div ngbDropdown *ngIf="auth == auths.Manage || auth == auths.Admin" class="dropdown">
      <button ngbDropdownToggle class="btn btn-warning" type="button" id="dropdownMenuButton1" aria-expanded="false">
    Users
    </button>
      <ul ngbDropdownMenu aria-labelledby="dropdownMenuButton1">
        <li><a ngbDropdownItem (click)=swapRole(roles.Manager) routerLink="./manager-home">Manager</a></li>
        <li><a ngbDropdownItem (click)=swapRole(roles.FW) routerLink="">Firmware Engineer</a></li>
        <li><a ngbDropdownItem (click)=swapRole(roles.Dev) routerLink="">Developer</a></li>
        <li><a ngbDropdownItem (click)=swapRole(roles.Exec) routerLink="">Executor</a></li>
        <li><a ngbDropdownItem class="badge" style="background-color: #ff3838;" (click)=logout() routerLink="">Logout</a></li>
      </ul>
    </div>
    <div *ngIf="auth == auths.Base">
      <button class="btn" type="button" style="background-color: #ff3838; color: 'white';" (click)=logout()>
        Logout
      </button>
    </div>
  </mat-toolbar>


    <!-- Add Content Here -->

    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>