<!-- topmost focusable element (hidden for user) -->
<div id="top" tabindex="-1" class="visually-hidden">
  {{ 'PageTop' | translate }}
</div>
<app-tour-picker></app-tour-picker>

<!-- progress bar (entire app) - visible during data request -->
<ng-progress [style.--ng-progress-color]="'blue'" ngProgressHttp ngProgressRouter spinner></ng-progress>

<!-- application header for the entire app (except embedded view) -->
<app-header></app-header>

<!-- main content - different styling for the homepage -->
<main id="main-content" tabindex="-1" class="page" [class.content-page]="!isHomepage">
  <router-outlet></router-outlet>
</main>

<!-- application footer for the entire app (except embedded view) -->
<app-footer></app-footer>
<app-tour-button></app-tour-button>
