<ion-header style="height: 12vh">
  <ion-toolbar>
    <ion-label class="toolbar-label text-ellipses">
      <h1 class="toolbar-title">{{ params.toolbar.title }}</h1>
      <h3 style="font-size: large; font-style: italic">{{ params.toolbar.action }} <ion-text style="font-size: medium;">{{ params.toolbar.version | displayEmver }}</ion-text></h3>
    </ion-label>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-slides *ngIf="!error" id="slide-show" style="--bullet-background: white" pager="false">
    <ion-slide *ngFor="let def of params.slideDefinitions">
      <!-- We can pass [transitions]="transitions" into the component if logic within the component needs to trigger a transition (not just bottom bar) -->
      <alert        #components *ngIf="def.slide.selector === 'alert'"        [params]="def.slide.params" style="width: 100%;"></alert>
      <notes        #components *ngIf="def.slide.selector === 'notes'"        [params]="def.slide.params" style="width: 100%;"></notes>
      <dependents   #components *ngIf="def.slide.selector === 'dependents'"   [params]="def.slide.params" [transitions]="transitions"></dependents>
      <complete     #components *ngIf="def.slide.selector === 'complete'"     [params]="def.slide.params" [transitions]="transitions"></complete>
    </ion-slide>
  </ion-slides>

  <div *ngIf="error" class="slide-content">
    <div style="margin-top: 25px;">
      <div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
        <ion-label color="danger" style="font-size: xx-large; font-weight: bold;">
          Error
        </ion-label>
      </div>
      <div class="long-message">
        {{ error }}
      </div>
    </div>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar style="padding: 8px;">
    <ng-container *ngIf="!initializing && !error">

      <!-- cancel button if loading/not loading -->
      <ion-button slot="start" *ngIf="(currentSlide.loading$ | async) && currentBottomBar.cancel.whileLoading as cancel" (click)="transitions.cancel()" class="toolbar-button" fill="outline">
        <ion-text *ngIf="cancel.text" [class.smaller-text]="cancel.text.length > 16">{{ cancel.text }}</ion-text>
        <ion-icon *ngIf="!cancel.text" name="close"></ion-icon>
      </ion-button>
      <ion-button slot="start" *ngIf="!(currentSlide.loading$ | async) && currentBottomBar.cancel.afterLoading as cancel" (click)="transitions.cancel()" class="toolbar-button" fill="outline">
        <ion-text *ngIf="cancel.text" [class.smaller-text]="cancel.text.length > 16">{{ cancel.text }}</ion-text>
        <ion-icon *ngIf="!cancel.text" name="close"></ion-icon>
      </ion-button>

      <!-- next/finish buttons -->
      <ng-container *ngIf="!(currentSlide.loading$ | async)">
        <!-- next -->
        <ion-button slot="end" *ngIf="currentBottomBar.next as next" (click)="callTransition(transitions.next)" fill="outline" class="toolbar-button enter-click" [class.no-click]="transitioning">
          <ion-text [class.smaller-text]="next.length > 16">{{ next }}</ion-text>
        </ion-button>

        <!-- finish -->
        <ion-button slot="end" *ngIf="currentBottomBar.finish as finish" (click)="callTransition(transitions.final)" fill="outline" class="toolbar-button enter-click" [class.no-click]="transitioning">
          <ion-text [class.smaller-text]="finish.length > 16">{{ finish }}</ion-text>
        </ion-button>
      </ng-container>

    </ng-container>
    <ng-container *ngIf="error">
      <ion-button slot="start" (click)="transitions.final()" style="text-transform: capitalize; font-weight: bolder;" color="danger">Dismiss</ion-button>
    </ng-container>
  </ion-toolbar>
</ion-footer>
