<mat-toolbar class="shell-header">
  @if (myTeams().length > 1) {
    <button mat-button [matMenuTriggerFor]="teamMenu" class="shell-team-switcher">
      <span>{{ currentTeam()?.name ?? 'TeamWallet' }}</span>
      <mat-icon>arrow_drop_down</mat-icon>
    </button>
    <mat-menu #teamMenu="matMenu">
      @for (team of myTeams(); track team.id) {
        <button mat-menu-item (click)="switchTeam(team.id)">{{ team.name }}</button>
      }
    </mat-menu>
  } @else {
    <span>{{ currentTeam()?.name ?? 'TeamWallet' }}</span>
  }

  <span class="shell-header-spacer"></span>

  <button
    mat-icon-button
    class="shell-notification-bell"
    [matMenuTriggerFor]="notificationMenu"
    (menuOpened)="onNotificationsMenuOpened()"
    [matBadge]="unreadCount()"
    [matBadgeHidden]="unreadCount() === 0"
    matBadgeSize="small"
    matBadgeColor="warn"
    aria-label="Benachrichtigungen"
  >
    <mat-icon>notifications</mat-icon>
  </button>
  <mat-menu #notificationMenu="matMenu" class="shell-notification-menu">
    <div class="shell-notification-menu__header">
      <span>Benachrichtigungen</span>
      <button mat-button (click)="onMarkAllRead()">Alle als gelesen markieren</button>
    </div>
    @if (notifications().length === 0) {
      <div class="shell-notification-menu__empty">Keine Benachrichtigungen</div>
    } @else {
      @for (item of notifications(); track item.id) {
        <button
          mat-menu-item
          class="shell-notification-menu__item"
          [class.shell-notification-menu__item--unread]="!item.read"
          (click)="onNotificationClick(item)"
        >
          <mat-icon>{{ notificationIcon(item) }}</mat-icon>
          <span>{{ notificationLabel(item) }}</span>
        </button>
      }
      @if (currentTeamId(); as teamId) {
        <a mat-menu-item [routerLink]="['/team', teamId, 'notifications']">Alle anzeigen</a>
      }
    }
  </mat-menu>
</mat-toolbar>

<main class="shell-content">
  <router-outlet />
</main>

<nav class="shell-bottom-nav">
  <a routerLink="overview" routerLinkActive="active" class="shell-bottom-nav__item">
    <mat-icon>account_balance_wallet</mat-icon>
    <span>Übersicht</span>
  </a>
  <a routerLink="members" routerLinkActive="active" class="shell-bottom-nav__item">
    <mat-icon>groups</mat-icon>
    <span>Mitglieder</span>
  </a>
  <a routerLink="cashbox" routerLinkActive="active" class="shell-bottom-nav__item">
    <mat-icon>payments</mat-icon>
    <span>Kasse</span>
  </a>
  <a routerLink="more" routerLinkActive="active" class="shell-bottom-nav__item">
    <mat-icon>more_horiz</mat-icon>
    <span>Mehr</span>
  </a>
</nav>
