<ion-menu [content]="nav" (ionClose)="onMenuClose()">
  <ion-content>
    <ion-item [color]="cu ? 'primary' : 'danger'" (click)="onMenuToggle()">
      <h1>{{cu ? cu.peripheral.name : ('No connection' | translate)}}</h1>
      <h2>{{cu?.peripheral.address}}</h2>
      <h3 *ngIf="cu">
        <span translate>Firmware version</span>
        {{version | async | cuversion}}
      </h3>
      <ion-icon item-right [name]="mode ? 'arrow-dropdown' : 'arrow-dropup'"></ion-icon>
    </ion-item>
    <div *ngIf="mode">
      <ion-item-group>
        <button ion-item menuClose [disabled]="!cu" (click)="startPractice()">
          <ion-icon name="speedometer" item-left></ion-icon>
          <span translate>Free Practice</span>
        </button>
        <button ion-item menuClose [disabled]="!cu" (click)="startQualifying()">
          <ion-icon name="stopwatch" item-left></ion-icon>
          <span translate>Qualifying</span>
        </button>
        <button ion-item menuClose [disabled]="!cu" (click)="startRace()">
          <ion-icon name="trophy" item-left></ion-icon>
          <span translate>Race</span>
        </button>
      </ion-item-group>
      <ion-item-group>
        <button ion-item menuClose (click)="nav.push(driversPage)">
          <ion-icon name="people" item-left></ion-icon>
          <span translate>Drivers</span>
        </button>
        <button ion-item menuClose (click)="nav.push(colorsPage)">
          <ion-icon name="color-palette" item-left></ion-icon>
          <span translate>Colors</span>
        </button>
        <button ion-item menuClose [disabled]="!cu" (click)="nav.push(tuningPage)">
          <ion-icon name="build" item-left></ion-icon>
          <span translate>Tuning</span>
        </button>
      </ion-item-group>
      <ion-item-group>
        <button ion-item menuClose (click)="nav.push(settingsPage)">
          <ion-icon name="settings" item-left></ion-icon>
          <span translate>Settings</span>
        </button>
        <button ion-item menuClose (click)="exitApp()">
          <ion-icon name="exit" item-left></ion-icon>
          <span translate>Exit</span>
        </button>
      </ion-item-group>
    </div>
    <div *ngIf="!mode">
      <ion-item-group>
        <app-connections [selected]="cu?.peripheral"></app-connections>
      </ion-item-group>
      <ion-item-group *ngIf="cu">
        <button ion-item (click)="reconnect()">
          <ion-icon name="refresh" item-left></ion-icon>
          <span translate>Reconnect</span>
        </button>
      </ion-item-group>
    </div>
  </ion-content>
</ion-menu>
