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

<ion-content>

  <ion-item class="ion-no-padding" lines="none">
    <ion-label class="ion-padding-start">
      <p class="ion-padding-top ion-padding-horizontal">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="white-space: normal;">
          <div [innerHTML]="'MSG.START_PAGE_EXPLAIN' | translate">
          </div>
        </ion-text>
      </p>
    </ion-label>
  </ion-item>

  <ion-radio-group [(ngModel)]="env.startPage" (ionChange)="saveStartPage()">
    <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
      <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" src="assets/icon/qrscan.svg">
      </ion-icon>
      <ion-label>
        <p class="ion-padding pre-line">
          <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
            {{ 'SCAN' | translate }}
          </ion-text>
        </p>
      </ion-label>
      <ion-radio class="ion-margin-end" slot="end" [value]="'/tabs/scan'" [color]="'primary'">
      </ion-radio>
    </ion-item>
    <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
      <ng-container *ngIf="env.historyPageStartSegment == 'history'">
        <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' | translate }}
            </ion-text>
          </p>
        </ion-label>
      </ng-container>
      <ng-container *ngIf="env.historyPageStartSegment == 'bookmarks'">
        <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" name="bookmark">
        </ion-icon>
        <ion-label>
          <p class="ion-padding pre-line">
            <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
              {{ 'BOOKMARK' | translate }}
            </ion-text>
          </p>
        </ion-label>
      </ng-container>
      <ion-radio class="ion-margin-end" slot="end" [value]="'/tabs/history'" [color]="'primary'">
      </ion-radio>
    </ion-item>
    <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
      <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" name="create"></ion-icon>
      <ion-label>
        <p class="ion-padding pre-line">
          <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
            {{ 'CREATE' | translate }}
          </ion-text>
        </p>
      </ion-label>
      <ion-radio class="ion-margin-end" slot="end" [value]="'/tabs/generate'" [color]="'primary'">
      </ion-radio>
    </ion-item>
    <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
      <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" name="image"></ion-icon>
      <ion-label>
        <p class="ion-padding pre-line">
          <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
            {{ 'IMPORT' | translate }}
          </ion-text>
        </p>
      </ion-label>
      <ion-radio class="ion-margin-end" slot="end" [value]="'/tabs/import-image'" [color]="'primary'">
      </ion-radio>
    </ion-item>
    <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
      <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" name="settings"></ion-icon>
      <ion-label>
        <p class="ion-padding pre-line">
          <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
            {{ 'SETTING' | translate }}
          </ion-text>
        </p>
      </ion-label>
      <ion-radio class="ion-margin-end" slot="end" [value]="'/tabs/setting'" [color]="'primary'">
      </ion-radio>
    </ion-item>
  </ion-radio-group>

  <ion-item class="ion-no-padding pt-3" lines="none">
    <ion-label class="ion-padding-start">
      <p class="ion-padding-top ion-padding-horizontal">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="white-space: normal;">
          <div [innerHTML]="'MSG.START_PAGE_HEADER_EXPLAIN' | translate">
          </div>
        </ion-text>
      </p>
    </ion-label>
  </ion-item>

  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
    <ion-label class="ion-padding-start">
      <p class="ion-padding pre-line">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
          {{ (env.startPageHeader == 'on'? 'TURNED_ON' : 'TURNED_OFF') | translate }}
        </ion-text>
      </p>
    </ion-label>
    <ion-toggle class="ion-padding-end" slot="end" [ngModel]="env.startPageHeader == 'on'? true : false"
      (ngModelChange)="onStartPageHeaderChange($event)">
    </ion-toggle>
  </ion-item>
  
</ion-content>