<ion-header>
  <ion-toolbar>
    <ion-title [ngSwitch]="mode" translate>
      <span *ngSwitchCase="'practice'" translate>Free Practice</span>
      <span *ngSwitchCase="'qualifying'" translate>Qualifying</span>
      <span *ngSwitchDefault translate>Race</span>
    </ion-title>
    <ion-buttons left>
      <button ion-button (click)="onCancel()">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons right>
      <button ion-button (click)="onSubmit(form.value)" [disabled]="!form.valid" translate type="submit">
        Start
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
    <ion-list>
      <ion-item>
        <ion-label color="light" translate>Time</ion-label>
        <ion-datetime #time formControlName="time"
                      displayFormat="H:mm:ss" pickerFormat="H mm ss"
                      cancelText="{{'Cancel' | translate}}" doneText="{{'Done' | translate}}"
                      (ionChange)="onChangeTime($event)">
        </ion-datetime>
      </ion-item>
      <ion-item *ngIf="mode == 'race'">
        <ion-label color="light" translate>Number of laps</ion-label>
        <ion-input #laps formControlName="laps" type="number"
                   (blur)="onChangeLaps(laps.value)"
                   (keyup)="onChangeLaps(laps.value)"
                   placeholder="{{'None' | translate}}">
        </ion-input>
      </ion-item>
      <ion-item>
        <ion-label color="light" translate>Number of drivers</ion-label>
        <ion-select formControlName="drivers" 
                    cancelText="{{'Cancel' | translate}}" 
                    okText="{{'OK' | translate}}">
          <!-- ion-option seems to require translate attribute value; see
               https://github.com/ionic-team/ionic/issues/8561#issuecomment-391079689 
            -->
          <ion-option translate="Automatic" value="">Automatic</ion-option>
          <ion-option value="1">1</ion-option>
          <ion-option value="2">2</ion-option>
          <ion-option value="3">3</ion-option>
          <ion-option value="4">4</ion-option>
          <ion-option value="5">5</ion-option>
          <ion-option value="6">6</ion-option>
        </ion-select>
      </ion-item>
      <ion-item>
        <ion-label color="light" translate>Autonomous Car</ion-label>
        <ion-toggle formControlName="auto"></ion-toggle>
      </ion-item>
      <ion-item>
        <ion-label color="light" translate>Pace Car</ion-label>
        <ion-toggle formControlName="pace"></ion-toggle>
      </ion-item>
      <ion-item>
        <ion-label color="light" translate>Stop time when paused</ion-label>
        <ion-toggle #pause formControlName="pause"></ion-toggle>
      </ion-item>
      <ion-item *ngIf="mode == 'race'">
        <ion-label color="light" translate>Finish all laps</ion-label>
        <ion-toggle #slotmode formControlName="slotmode"></ion-toggle>
      </ion-item>
    </ion-list>
  </form>
</ion-content>
