<h1>Sie haben neue Nachrichten</h1>

@for (notification of notifications$ | async | keyvalue; track notification) {
  <button type="button" class="notification-card" (click)="selectArea(notification.key)">
    <div class="notification-icon">
      <div class="notification-counter">{{ notification.value?.length }}</div>
      <ui-icon icon="notification" size="26px"></ui-icon>
    </div>
    <span>{{ notification.value?.[0]?.category }}</span>
  </button>
  <hr class="-mx-4" />
  @if (notification.key === selectedArea) {
    @switch (notification.value?.[0]?.category) {
      @case ('ISA-Update') {
        <modal-notifications-update-group
          [notifications]="notifications[selectedArea]"
        ></modal-notifications-update-group>
      }
      @case ('Reservierungsanfragen') {
        <modal-notifications-reservation-group
          [notifications]="notifications[selectedArea]"
          (navigated)="close()"
        ></modal-notifications-reservation-group>
      }
      @case ('Remission') {
        <modal-notifications-remission-group
          [notifications]="notifications[selectedArea]"
          (navigated)="close()"
        ></modal-notifications-remission-group>
      }
      @case ('Tätigkeitskalender') {
        <modal-notifications-task-calendar-group
          [notifications]="notifications[selectedArea]"
          (navigated)="close()"
        ></modal-notifications-task-calendar-group>
      }
      @case ('Wareneingang Lagerware') {
        <modal-notifications-package-inspection-group
          [notifications]="notifications[selectedArea]"
          (navigated)="close()"
        ></modal-notifications-package-inspection-group>
      }
    }
  }
}
