<ion-header no-shadow class="ion-no-border positionAbsolute">
  <ion-toolbar>
    <ion-buttons slot="end">
      <ion-button color="primary" (click)="cityConectionModal()" [hidden]="!showSkip" class="colorWhite">{{
        'TUTORIAL_SKIP_BUTTON' | translate}}</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-slides pager="true" [options]="slideOpts">
    <ion-slide *ngFor="let slide of slides; let i = index">
      <div *ngIf="(slides.length - i) <= 1">
        <img [src]="slide.image" class="slide-image" />
        <div class="descriptionImages">
          <h2 class="slide-title">
            <ion-label color="primary">{{ slide.title }}</ion-label>
          </h2>
          <p>
            <ion-label color="dark">{{ slide.description }}</ion-label>
          </p>
          <ion-button fill="clear" (click)="cityConectionModal()" *ngIf="!statusPageSettings">
            {{ 'TUTORIAL_CONTINUE_BUTTON' | translate }}
            <ion-icon slot="end" name="arrow-forward"></ion-icon>
          </ion-button>
        </div>
      </div>
      <div *ngIf="(slides.length - i) > 1">
        <img [src]="slide.image" class="slide-image" />
        <div class="descriptionImages">
          <h2 class="slide-title">
            <ion-label color="primary">{{ slide.title }}</ion-label>
          </h2>
          <p>
            <ion-label color="dark">{{ slide.description }}</ion-label>
          </p>
        </div>
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>