<ion-header>
  <ion-navbar>
    <ion-title>
      <span translate>Tuning</span>
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="locked = !locked">
        <ion-icon [name]="locked ? 'lock' : 'unlock'"></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-segment [(ngModel)]="type">
    <ion-segment-button translate value="speed">Speed</ion-segment-button>
    <ion-segment-button translate value="brake">Brake</ion-segment-button>
    <ion-segment-button translate value="fuel">Fuel</ion-segment-button>
  </ion-segment>
  <ion-grid class="tuning">
    <ion-row *ngFor="let model of models">
      <ion-col class="number" [stripe]="(drivers | async)[model.id]?.color">
        {{model.id + 1}}
      </ion-col>
      <ion-col class="name" showWhen="landscape">
        {{(drivers | async)[model.id]?.name || (placeholder | translate:{number: model.id + 1})}}
      </ion-col>
      <ion-col class="code" showWhen="portrait">
        {{(drivers | async)[model.id]?.code || '#' + (model.id + 1)}}
      </ion-col>
      <ion-col self-align-center class="range" *ngIf="!(options | async).cumode" [ngSwitch]="type">
        <ion-range *ngSwitchCase="'speed'" no-padding min="0" max="15" snaps="true"
                   [disabled]="!(connected | async)"
                   [ngClass]="{'pristine': model.speed == null}"
                   [ngModel]="model.speed || 0"
                   (ionChange)="update('speed', $event.value, locked ? undefined : model.id)"
                   >
        </ion-range>
        <ion-range *ngSwitchCase="'brake'" no-padding min="0" max="15" snaps="true"
                   [disabled]="!(connected | async)"
                   [ngClass]="{'pristine': model.brake == null}"
                   [ngModel]="model.brake || 0"
                   (ionChange)="update('brake', $event.value, locked ? undefined : model.id)"
                   >
        </ion-range>
        <ion-range *ngSwitchCase="'fuel'" no-padding min="0" max="15" snaps="true"
                   [disabled]="!(connected | async)"
                   [ngClass]="{'pristine': model.fuel == null}"
                   [ngModel]="model.fuel || 0"
                   (ionChange)="update('fuel', $event.value, locked ? undefined : model.id)"
                   >
        </ion-range>
      </ion-col>
      <ion-col self-align-center class="range" *ngIf="(options | async).cumode" [ngSwitch]="type">
        <ion-range *ngSwitchCase="'speed'" no-padding min="0" max="9" snaps="true"
                   [disabled]="!(connected | async)"
                   [ngClass]="{'pristine': model.speed == null}"
                   [ngModel]="toCU.speed[model.speed] || 0"
                   (ionChange)="update('speed', fromCU.speed[$event.value], locked ? undefined : model.id)"
                   >
        </ion-range>
        <ion-range *ngSwitchCase="'brake'" no-padding min="0" max="9" snaps="true"
                   [disabled]="!(connected | async)"
                   [ngClass]="{'pristine': model.brake == null}"
                   [ngModel]="toCU.brake[model.brake] || 0"
                   (ionChange)="update('brake', fromCU.brake[$event.value], locked ? undefined : model.id)"
                   >
        </ion-range>
        <ion-range *ngSwitchCase="'fuel'" no-padding min="0" max="9" snaps="true"
                   [disabled]="!(connected | async)"
                   [ngClass]="{'pristine': model.fuel == null}"
                   [ngModel]="toCU.fuel[model.fuel] || 0"
                   (ionChange)="update('fuel', fromCU.fuel[$event.value], locked ? undefined : model.id)"
                   >
        </ion-range>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
