<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>{{ 'ABOUT' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="pt-5 pb-1 d-flex justify-content-center align-content-center flex-column text-center">
    <img class="align-self-center pb-3" src="assets/img/round_icon.png" style="max-width: 150px;">
    <p>by</p>
    <p>Tom Fong</p>
  </div>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="showBarcodeType()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" name="barcode-sharp">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'SUPPORTED_BARCODE_TYPE' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="showUpdateNotes()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" src="assets/icon/patch-update.svg">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'PATCH_NOTES' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item *ngIf="isAndroid" class="ion-no-padding ripple-parent" detail="false" lines="none"
    (click)="openGooglePlay()">
    <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;">
          {{ 'VIEW_STORE_AND_SOURCE_CODE' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item *ngIf="isIos" class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="openAppStore()">
    <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;">
          {{ 'VIEW_STORE_AND_SOURCE_CODE' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="reportBug()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" name="bug">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'REPORT_ISSUE' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>
  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="viewPrivacyPolicy()">
    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" name="document-text-sharp">
    </ion-icon>
    <ion-label>
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ 'PRIVACY_POLICY' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>

</ion-content>

<ion-footer>
  <ion-toolbar mode="ios" class="ion-text-center" color="primary">
    <div (click)="tapAppVersion()">
      <span>{{ ('APP_VERSION' | translate) + ' ' + env.appVersionNumber }}</span>
    </div>
  </ion-toolbar>
</ion-footer>