<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      <span translate>Settings</span>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-item-group>
    <ion-item>
      <ion-label color="light" translate>Language</ion-label>
      <ion-select [(ngModel)]="options.language" (ionChange)="update()" 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="Default" value="">Default</ion-option>
        <ion-option value="de">Deutsch</ion-option>
        <ion-option value="en">English</ion-option>
        <ion-option value="es">Español</ion-option>
        <ion-option value="it">Italiano</ion-option>
        <ion-option value="nl">Nederlands</ion-option>
      </ion-select>
    </ion-item>
    <button ion-item [navPush]="connectionPage">
      <span translate>Connection</span>
    </button>
    <button ion-item [navPush]="notificationsPage">
      <span translate>Notifications</span>
    </button>
    <button ion-item (click)="reset()">
      <span translate>Reset settings</span>
    </button>
  </ion-item-group>
  <ion-item-group>
    <ion-list-header>
      <span translate>About</span>
    </ion-list-header>
    <button ion-item [navPush]="loggingPage">
      <span translate>Event log</span>
    </button>
    <button ion-item [navPush]="licensesPage">
      <span translate>Open source licenses</span>
    </button>
    <button ion-item [navPush]="aboutPage">
      <span translate>About Open Lap</span>
    </button>
  </ion-item-group>
</ion-content>
