<ion-header>
  <div *ngIf="env.startPage == '/tabs/setting' && env.startPageHeader == 'on'; then mainHeader else selfHeader">
  </div>
  <ng-template #mainHeader>
    <ion-toolbar color="primary">
      <ion-title>{{ 'SIMPLE_QR' | translate}}</ion-title>
    </ion-toolbar>
  </ng-template>
  <ng-template #selfHeader>
    <ion-toolbar [color]="env.colorTheme === 'black'? 'black' : 'dark'">
      <ion-title>{{ 'SETTINGS' | translate }}</ion-title>
    </ion-toolbar>
  </ng-template>
</ion-header>

<ion-content>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="navigateAbout()">
    <div class="d-flex align-items-baseline my-3">
      <div class="ion-margin-start ion-padding-horizontal">
        <img src="assets/img/round_icon.png" width="24">
      </div>
      <ion-label>
        <p class="ion-padding pre-line">
          <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
            {{ 'ABOUT_SIMPLE_QR' | translate }}
          </ion-text>
        </p>
      </ion-label>
    </div>
  </ion-item>

  <ion-list-header class="ion-margin-start ion-padding-horizontal mt-3">{{ 'FUNCTIONS' | translate }}</ion-list-header>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setResult()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" name="qr-code-outline">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'QR_CODE_AND_DECODED_RESULT' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setScanRecordLogging()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" src="assets/icon/history.svg">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'LOG_BACKUP_AND_RESTORE' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>

  <ion-list-header class="ion-margin-start ion-padding-horizontal mt-3">{{ 'APPEARANCE_AND_EFFECTS' | translate }}
  </ion-list-header>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setLanguage()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" name="language">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'LANGUAGE' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setColorTheme()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" name="color-palette"></ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'COLOR_THEME' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setOrientation()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" src="assets/icon/screen-rotation.svg">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'SCREEN_ORIENTATION' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setVibration()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" src="assets/icon/vibration.svg">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'VIBRATION' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>

  <ion-list-header class="ion-margin-start ion-padding-horizontal mt-3">{{ 'OTHERS' | translate }}</ion-list-header>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setStartPage()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" name="log-in">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'APP_INITIAL_PAGE' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item *ngIf="isAndroid" class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setAutoCloseApp()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" name="stop-circle">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'AUTO_KILL_BACKGROUND' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="resetApp()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" src="assets/icon/reset.svg">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'RESET_APP' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item *ngIf="isAndroid" class="ion-no-padding ripple-parent" detail="false" lines="none"
    (click)="rateAndroidApp()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" color="primary" name="logo-google-playstore"></ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'RATE_THE_APP' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item *ngIf="isIos" class="ion-no-padding ripple-parent" detail="false" lines="none"
    (click)="rateIosApp()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" color="primary" name="logo-apple-appstore"></ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'RATE_THE_APP' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item *ngIf="isAndroid" class="ion-no-padding ripple-parent" detail="false" lines="none"
    (click)="exitApp()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" color="danger" name="exit"></ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'EXIT_APP' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item *ngIf="env.isDebugging" class="ion-no-padding ripple-parent" detail="false" lines="none"
    (click)="setDebugMode()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'warning'" name="code-slash">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'DEBUG_MODE' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
</ion-content>