<ion-header>
  <div *ngIf="env.startPage == '/tabs/import-image' && 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>{{ 'IMPORT_IMAGE' | translate }}</ion-title>
    </ion-toolbar>
  </ng-template>
</ion-header>

<ion-content>
  <div class="px-4 mx-md-5 ion-padding-vertical fullscreen-vertical-center">
    <div class="ion-text-center">
      <ion-icon class="pb-2" name="image" [color]="env.colorTheme === 'light'? 'dark' : 'light'"
        style="font-size: 5rem">
      </ion-icon>
    </div>
    <p class="ion-text-justify pt-2 px-2">
      <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
        {{ 'MSG.SCAN_QR_FROM_IMAGE' | translate }}
      </ion-text>
    </p>
    <ion-item class="ion-no-padding" detail="false" lines="none" style="width: 100%;">
      <ion-icon [color]="'primary'" src="assets/icon/number1.svg">
      </ion-icon>
      <ion-label class="text-wrap ion-padding-start" [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
        {{ 'MSG.SCAN_QR_FROM_IMAGE_R1' | translate }}
      </ion-label>
    </ion-item>
    <ion-item class="ion-no-padding" detail="false" lines="none" style="width: 100%;">
      <ion-icon [color]="'primary'" src="assets/icon/number2.svg">
      </ion-icon>
      <ion-label class="text-wrap ion-padding-start" [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
        {{ 'MSG.SCAN_QR_FROM_IMAGE_R2' | translate }}
      </ion-label>
    </ion-item>
    <ion-item class="ion-no-padding" detail="false" lines="none" style="width: 100%;">
      <ion-icon [color]="'primary'" src="assets/icon/number3.svg">
      </ion-icon>
      <ion-label class="text-wrap ion-padding-start" [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
        {{ 'MSG.SCAN_QR_FROM_IMAGE_R3' | translate }}
      </ion-label>
    </ion-item>
    <ion-button class="mt-3" (click)="tapHaptic(); importImage()">
      {{ 'IMPORT_IMAGE' | translate }}
    </ion-button>
  </div>
</ion-content>