@if (isStandalonePage) {
  <router-outlet />
} @else {
  <div class="app-shell">
    <mat-toolbar class="app-shell__topbar">
      <a class="app-shell__brand" routerLink="/">
        <span class="app-shell__logo">S</span>
        <span class="app-shell__brand-name">Scouthub</span>
      </a>

      <span class="app-shell__spacer"></span>

      @if (!isAuthenticated) {
        <button mat-flat-button class="app-shell__login-btn" type="button" (click)="login()">Accedi</button>
      } @else {
        <button mat-stroked-button class="app-shell__user-btn" type="button" [matMenuTriggerFor]="userMenu">
          <span class="app-shell__avatar">{{ userInitials }}</span>
          {{ userName }}
          <mat-icon iconPositionEnd>expand_more</mat-icon>
        </button>
        <mat-menu #userMenu="matMenu">
          <button mat-menu-item routerLink="/profilo">Profilo</button>
          <button mat-menu-item (click)="logout()">Esci</button>
        </mat-menu>
      }
    </mat-toolbar>

    <div class="app-shell__body">
      <nav class="app-shell__sidebar">
        @for (item of navItems; track item.path) {
          <a class="app-shell__nav-link" [routerLink]="item.path" routerLinkActive="app-shell__nav-link--active" [routerLinkActiveOptions]="{ exact: item.path === '/' }">
            <mat-icon>{{ item.icon }}</mat-icon>
            <span>{{ item.label }}</span>
          </a>
        }
      </nav>

      <main class="app-shell__content">
        <router-outlet />
      </main>
    </div>

    <nav class="app-shell__bottomnav">
      @for (item of navItems; track item.path) {
        <a class="app-shell__bottomnav-link" [routerLink]="item.path" routerLinkActive="app-shell__bottomnav-link--active" [routerLinkActiveOptions]="{ exact: item.path === '/' }">
          <mat-icon>{{ item.icon }}</mat-icon>
          <span>{{ item.label }}</span>
        </a>
      }
    </nav>
  </div>
}