<div class="notifications-page">
  <h1>Benachrichtigungen</h1>

  @if (items().length === 0 && !loading()) {
    <p class="notifications-page__empty">Keine Benachrichtigungen vorhanden.</p>
  }

  <mat-nav-list>
    @for (item of items(); track item.id) {
      <a
        mat-list-item
        class="notifications-page__item"
        [class.notifications-page__item--unread]="!item.read"
        (click)="onItemClick(item)"
      >
        <mat-icon matListItemIcon>{{ notificationIcon(item) }}</mat-icon>
        <span matListItemTitle>{{ notificationLabel(item) }}</span>
      </a>
    }
  </mat-nav-list>

  @if (loading()) {
    <mat-spinner diameter="32" class="notifications-page__spinner" />
  }

  @if (hasNextPage() && !loading()) {
    <button mat-button (click)="loadMore()">Weitere laden</button>
  }
</div>
