<ion-header>
  <ion-navbar>
    <ion-title>
      <span translate>Drivers</span>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list reorder="true" (ionItemReorder)="reorderItems($event)">
    <ion-item *ngFor="let driver of drivers; let id = index">
      <ion-label>#{{id + 1}}</ion-label>
      <ion-input clearInput
        [ngModel]="driver.name"
        (ngModelChange)="driver.code = getCode(driver.name = $event, id)"
        [placeholder]="placeholder | translate:{number: id + 1}"
      >
      </ion-input>
      <ion-note item-right>{{driver.code || '#' + (id + 1)}}</ion-note>
      <button ion-button clear icon-only item-right (click)="speak(id)">
        <ion-icon name="volume-up"></ion-icon>
      </button>
    </ion-item>
  </ion-list>
</ion-content>
