<pngx-toasts></pngx-toasts>

<pngx-file-drop>
  <ng-container content>
    <router-outlet></router-outlet>
  </ng-container>
</pngx-file-drop>

<tour-step-template>
  <ng-template #tourStep let-step="step">
    <p class="tour-step-content" [innerHTML]="step?.content"></p>
    <hr/>
    <div class="d-flex justify-content-between align-items-center">
      <span class="badge bg-light text-dark">{{ tourService.steps?.indexOf(step) + 1 }} / {{ tourService.steps?.length }}</span>
      <div class="tour-step-navigation btn-toolbar" role="toolbar" aria-label="Controls">
        <div class="btn-group btn-group-sm me-2" role="group" aria-label="Dismiss">
          <button class="btn btn-outline-danger" (click)="tourService.end()">
            {{ step?.endBtnTitle }}
          </button>
        </div>
        <div class="btn-group btn-group-sm align-self-end" role="group" aria-label="Previous / Next">
          @if (tourService.hasPrev(step)) {
            <button class="btn btn-outline-primary" (click)="tourService.prev()">
              « {{ step?.prevBtnTitle }}
            </button>
          }
          @if (tourService.hasNext(step)) {
            <button class="btn btn-outline-primary" (click)="tourService.next()">
              {{ step?.nextBtnTitle }} »
            </button>
          }
        </div>
      </div>
    </div>
  </ng-template>
</tour-step-template>
