<ui-scroll-container [loading]="fetching$ | async" [useLoadAnimation]="false">
  @if (showOverdueItems$ | async) {
    @if (overdueItems$ | async; as overdieItems) {
      <div class="task-list overdue-list">
        <page-task-list-group header="Überfällig" [showPrint]="false" [items]="overdieItems"></page-task-list-group>
      </div>
    }
  }

  @if (selectedItems$ | async; as itemsForSelectedDate) {
    @if (itemsForSelectedDate?.length) {
      <div class="task-list today-list">
        <page-task-list-group
          header="{{ (isToday$ | async) ? 'Heute, ' : '' }}{{ selected | date: 'EEEE' }}, {{ selected | date }}"
          [items]="itemsForSelectedDate"
          [showDate]="false"
        ></page-task-list-group>
      </div>
    }
  }

  @if (showOngoingItems$ | async) {
    @if (ongoingItems$ | async; as ongoingItems) {
      <div class="task-list ongoing-list">
        <page-task-list-group header="Laufende Aufgaben" [items]="ongoingItems"></page-task-list-group>
      </div>
    }
  }
</ui-scroll-container>
