@if (currentUser) {
    <div>
        <div class="flex align-items-center top-navbar">
            <div class="flex-grow-1">
                <p-menubar [model]="menuItems" breakpoint="1390px" [dt]="appMenubar" styleClass="app-menubar">
                    <ng-template #start>
                        <div class="flex align-items-center gap-2 mr-2 sm:mr-4 ml-1 sm:ml-2">
                            <a
                                routerLink="/"
                                class="logo no-underline flex flex-shrink-0 align-items-center gap-2"
                                pTooltip="Version: {{ storkVersion }} <br> Build Date: {{ storkBuildDate }}"
                                tooltipStyleClass="stork-version-tooltip"
                                [escape]="false"
                            >
                                <img
                                    src="assets/stork-logo-small.png"
                                    id="small-stork-logo-img"
                                    height="36"
                                    width="41"
                                />
                                <span class="hidden xl:block">
                                    <img src="assets/stork-title.svg" class="medium-title" width="88" height="28" />
                                </span>
                            </a>
                        </div>
                    </ng-template>
                    <ng-template #end
                        ><div class="flex align-items-center gap-2 mx-1 sm:mx-2">
                            <p-toggleButton
                                [(ngModel)]="isDark"
                                (onChange)="changeTheme($event.checked)"
                                onIcon="pi pi-moon"
                                offIcon="pi pi-sun"
                                ariaLabel="Dark/light mode"
                                size="small"
                                [onLabel]="null"
                                [offLabel]="null"
                                [dt]="darkModeToggleButton"
                            />
                            @if ((loadingInProgress | async)['state']) {
                                <p-progressSpinner
                                    [pTooltip]="(loadingInProgress | async)['text']"
                                    styleClass="w-2rem h-2rem white-spinner"
                                    strokeWidth="6"
                                    animationDuration=".5s"
                                ></p-progressSpinner>
                            }
                            <app-global-search></app-global-search>
                            <p-splitButton
                                label="Logout ({{ this.currentUser.login || this.currentUser.email }})"
                                icon="pi pi-sign-out"
                                id="logout-button"
                                (onClick)="signOut()"
                                [model]="userMenuItems"
                                title="Logout ({{ this.currentUser.login || this.currentUser.email }})"
                            ></p-splitButton></div
                    ></ng-template>
                </p-menubar>
            </div>
        </div>
        <div>
            <app-priority-errors-panel></app-priority-errors-panel>
        </div>
    </div>
}
<div class="m-3">
    <p-toast styleClass="stork-toast"></p-toast>

    <router-outlet></router-outlet>
</div>