<ion-content [color]="color" #content>

  <ion-list-header class="mt-4 ml-3" style="font-size: x-large;">{{ 'TUTORIAL' | translate }}</ion-list-header>

  <ion-item class="content-item ion-no-padding" lines="none" [color]="color">
    <ion-icon class="ion-padding-horizontal" src="assets/icon/swipe-left.svg"
      [color]="'primary'"></ion-icon>
    <ion-label>
      <p class="ion-padding">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="white-space: normal;">
          {{ 'MSG.TUTORIAL_SWIPE_LEFT' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>

  <ion-item class="content-item ion-no-padding" lines="none" [color]="color">
    <ion-icon class="ion-padding-horizontal" src="assets/icon/swipe-right.svg"
      [color]="'primary'"></ion-icon>
    <ion-label>
      <p class="ion-padding">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="white-space: normal;">
          {{ 'MSG.BOOKMARK_TUTORIAL_SWIPE_RIGHT' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>

</ion-content>

<ion-footer>

  <ion-item lines="none" [color]="color" style="--ripple-color: transparent;">
    <ion-checkbox class="ion-margin-horizontal" [(ngModel)]="env.notShowBookmarkTutorial"
      [color]="'primary'" (ionChange)="saveBookmarkTutorialShowing()"></ion-checkbox>
    <ion-label>
      <p class="ion-padding">
        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="white-space: normal;">
          {{ 'MSG.TUTORIAL_NOT_SHOW_AGAIN' | translate }}
        </ion-text>
      </p>
    </ion-label>
  </ion-item>

  <ion-toolbar [color]="color" style="border: none;">
    <ion-row class="d-flex align-items-center justify-content-end">
      <ion-button class="ion-margin-horizontal ion-margin-bottom" fill="clear" (click)="tapHaptic(); closeModal()" color="primary">
        {{ 'OK' | translate }}
      </ion-button>
    </ion-row>
  </ion-toolbar>

</ion-footer>