<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      <checkerboard cols="9" rows="5" *ngIf="session.finished | async"></checkerboard>
      <span [ngSwitch]="options.mode">
        <ng-template ngSwitchCase="practice">
          <span translate>Free Practice</span>
        </ng-template>
        <ng-template ngSwitchCase="qualifying">
          <span translate>Qualifying</span>
        </ng-template>
        <ng-template ngSwitchCase="race">
          <span *ngIf="lapcount | async as laps; else race">
            <span *ngIf="laps.count; else race">
              <span *ngIf="laps.total; then race1; else race2"></span>
              <ng-template #race1>
                {{ 'Lap {' + '{count}' + '}/{' + '{total}' + '}' | translate:laps}}
              </ng-template>
              <ng-template #race2>
                {{ 'Lap {' + '{count}' + '}' | translate:laps}}
              </ng-template>
            </span>
          </span>
          <ng-template #race>
            <span translate>Race</span>
          </ng-template>
        </ng-template>
      </span>
      <checkerboard cols="9" rows="5" *ngIf="session.finished | async"></checkerboard>
      <span *ngIf="options.time && !(session.finished | async)" style="float: right">
        {{session.timer | async | time:'h:mm:ss'}}
      </span>
    </ion-title>
    <ion-buttons end>
      <!-- Android 4.4: no whitespace between ion-buttons buttons... -->
      <button ion-button icon-only (click)="toggleSpeech()">
        <ion-icon [name]="(speechEnabled | async) ? 'volume-up' : 'volume-off'"></ion-icon>
      </button><button ion-button icon-only (click)="showMenu($event)">
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-slides pager="true">
    <ion-slide *ngFor="let fields of (slides | async)">
      <leaderboard [fields]="fields" [items]="ranking | async" [order]="sortorder | async">
      </leaderboard>
    </ion-slide>
  </ion-slides>
</ion-content>

<ion-footer>
  <ion-toolbar class="race-control" text-center>
    <button class="startlight" [disabled]="!(keySupported | async)" (click)="triggerStart()">
      <startlight [active]="(lights | async) >= 1" [blink]="blink | async"></startlight>
      <startlight [active]="(lights | async) >= 2" [blink]="blink | async"></startlight>
      <startlight [active]="(lights | async) >= 3" [blink]="blink | async"></startlight>
      <startlight [active]="(lights | async) >= 4" [blink]="blink | async"></startlight>
      <startlight [active]="(lights | async) >= 5" [blink]="blink | async"></startlight>
    </button>
    <ion-buttons left>
      <button ion-button [disabled]="!(keySupported | async)" (click)="triggerPaceCar()">
        <svg viewBox="0 0 9 5" [ngSwitch]="lights | async">
          <text text-anchor="middle" x="50%" y="2" dy="0.3" font-size="2" textLength="8" lengthAdjust="spacingAndGlyphs">PACE CAR</text>
          <text text-anchor="middle" x="50%" y="4" dy="0.3" font-size="2" textLength="8" lengthAdjust="spacingAndGlyphs">ESC</text>
        </svg>
      </button>
    </ion-buttons>
    <ion-buttons right>
      <button ion-button (click)="session.toggleYellowFlag()">
        <dot-matrix [ngClass]="{'yellow-flag': session.yellowFlag | async}" cols="9" rows="5"></dot-matrix>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>
