<ion-header>
  <ion-toolbar [color]="env.colorTheme === 'black'? 'black' : 'dark'">
    <ion-buttons slot="start">
      <ion-back-button text="" defaultHref="tabs/setting">
      </ion-back-button>
    </ion-buttons>
    <ion-title>{{ 'QR_CODE_AND_DECODED_RESULT' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <ion-list-header class="ion-margin-start ion-padding-horizontal mt-3">{{ 'QR_CODE' | translate }}</ion-list-header>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setQrStyle()">
    <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_STYLE' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setAutoQr()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" src="assets/icon/popup.svg">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'AUTO_QR_CODE_POPUP' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setAutoMaxBrightness()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" name="sunny">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'AUTO_MAX_BRIGHTNESS' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>

  <ion-list-header class="ion-margin-start ion-padding-horizontal mt-3">{{ 'TASK' | translate }}</ion-list-header>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setResultPageButtons()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" src="assets/icon/touch.svg">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'TASK_BUTTON_LAYOUT' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setSearchEngine()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" *ngIf="env.searchEngine === 'google'"
      name="logo-google">
    </ion-icon>
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" *ngIf="env.searchEngine === 'bing'"
      src="assets/icon/microsoft-bing.svg">
    </ion-icon>
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" *ngIf="env.searchEngine === 'yahoo'"
      src="assets/icon/yahoo.svg">
    </ion-icon>
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'"
      *ngIf="env.searchEngine === 'duckduckgo'" src="assets/icon/duck-duck-go.svg">
    </ion-icon>
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" *ngIf="env.searchEngine === 'yandex'"
      src="assets/icon/yandex.svg">
    </ion-icon>
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" *ngIf="env.searchEngine === 'ecosia'"
      src="assets/icon/ecosia.svg">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'SEARCH_ENGINE' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>

</ion-content>