<h1>Sie haben neue Nachrichten</h1>

<ng-container *ngFor="let notification of groupedNotifications$ | async">
  <button
    *ngIf="notification.group !== (activeCard$ | async)"
    type="button"
    class="notification-card"
    (click)="activeCard = notification.group"
  >
    {{ notification.group }}
  </button>
</ng-container>

<ng-container [ngSwitch]="activeCard$ | async">
  <modal-notifications-update-group
    *ngSwitchCase="'ISA-Update'"
    [notifications]="activeNotifications$ | async"
  ></modal-notifications-update-group>
  <modal-notifications-reservation-group
    *ngSwitchCase="'Reservierungsanfragen'"
    [notifications]="activeNotifications$ | async"
    (navigated)="close()"
  ></modal-notifications-reservation-group>
  <modal-notifications-remission-group
    *ngSwitchCase="'Remission'"
    [notifications]="activeNotifications$ | async"
    (navigated)="close()"
  ></modal-notifications-remission-group>
  <modal-notifications-task-calendar-group
    *ngSwitchCase="'Tätigkeitskalender'"
    [notifications]="activeNotifications$ | async"
    (navigated)="close()"
  ></modal-notifications-task-calendar-group>
</ng-container>
