<main [class]="theme">
  <div
    class="warning bg3 flex justify-center p-1.5"
    *ngIf="showTechnicalDemoBanner">
    {{ 'technical_demo_banner' | translate }}
  </div>
  <app-header></app-header>

  <div class="app">
    <aside *ngIf="showSidebar">
      <app-sidebar></app-sidebar>
    </aside>
    <section class="component" *ngIf="loadedGuiSettings">
      <router-outlet></router-outlet>
    </section>
  </div>
  <app-footer></app-footer>

  <p-toast></p-toast>
  <p-confirmDialog #cd key="confirmConfirmationDialog" [baseZIndex]="10000" styleClass="max-w-md">
    <ng-template pTemplate="footer">
      <div class="flex gap-2.5 items-center justify-end">
        <p-button
          label="{{ 'dialog.abort' | translate }}"
          class="btn icon-btn danger-icon-btn"
          icon="pi pi-times-circle"
          (onClick)="cd.reject()"></p-button>
        <p-button
          label="{{ 'dialog.confirm' | translate }}"
          class="btn"
          icon="pi pi-check-circle"
          (onClick)="cd.accept()"></p-button>
      </div>
    </ng-template>
  </p-confirmDialog>
</main>
<app-spinner></app-spinner>
