<!-- Hidden element for protractor to disable alerts. -->
<form class="visually-hidden">
  <input
    type="checkbox"
    name="block_alerts"
    value="1"
    id="block_alerts"
    #block_alerts
  />
</form>

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a
      class="nav-link"
      [class.active]="tabIs('MatchList')"
      (click)="switchTabToGuarded('MatchList')"
    >
      Match List
    </a>
  </li>
  <li class="nav-item">
    <a
      class="nav-link"
      [class.active]="tabIs('Entry')"
      (click)="switchTabToGuarded('Entry')"
    >
      Data Entry
    </a>
  </li>
  <li class="nav-item">
    <a
      class="nav-link"
      [class.active]="tabIs('Notes')"
      (click)="switchTabToGuarded('Notes')"
    >
      Notes
    </a>
  </li>
  <li class="nav-item">
    <a
      class="nav-link"
      [class.active]="tabIs('DriverRanking')"
      (click)="switchTabToGuarded('DriverRanking')"
    >
      Driver Ranking
    </a>
  </li>
  <li class="nav-item">
    <a
      class="nav-link"
      [class.active]="tabIs('ShiftSchedule')"
      (click)="switchTabToGuarded('ShiftSchedule')"
    >
      Shift Schedule
    </a>
  </li>
  <li class="nav-item">
    <a
      class="nav-link"
      [class.active]="tabIs('View')"
      (click)="switchTabToGuarded('View')"
    >
      View
    </a>
  </li>
</ul>

<ng-container [ngSwitch]="tab">
  <app-match-list
    (selectedTeamEvent)="selectTeamInMatch($event)"
    *ngSwitchCase="'MatchList'"
  ></app-match-list>
  <app-entry
    (switchTabsEvent)="switchTabTo($event)"
    [teamNumber]="selectedTeamInMatch.teamNumber"
    [matchNumber]="selectedTeamInMatch.matchNumber"
    [setNumber]="selectedTeamInMatch.setNumber"
    [compLevel]="selectedTeamInMatch.compLevel"
    *ngSwitchCase="'Entry'"
  ></app-entry>
  <frc971-notes *ngSwitchCase="'Notes'"></frc971-notes>
  <app-driver-ranking *ngSwitchCase="'DriverRanking'"></app-driver-ranking>
  <shift-schedule *ngSwitchCase="'ShiftSchedule'"></shift-schedule>
  <app-view
    (switchTabsEvent)="switchTabTo($event)"
    *ngSwitchCase="'View'"
  ></app-view>
</ng-container>