<!-- <div class="task-list overdue-list" *ngIf="items | filterType: ['Task'] | filterStatus: ['Overdue']; let overdieItems"> -->
<ng-container *ngIf="isToday$ | async">
  <div class="task-list overdue-list" *ngIf="overdueItems$ | async; let overdieItems">
    <div class="head-row">
      <h4>Überfällig</h4>
      <span class="muted"> {{ overdieItems?.length }} Aufgaben </span>
    </div>
    <hr />
    <ng-container *ngFor="let item of overdieItems">
      <page-task-list-item [item]="item" (click)="select.emit(item)"></page-task-list-item>
      <hr />
    </ng-container>
  </div>
</ng-container>

<ng-container *ngIf="selectedItems$ | async; let itemsForSelectedDate">
  <div class="task-list today-list" *ngIf="itemsForSelectedDate?.length">
    <div class="head-row">
      <div class="head-row-title">
        <h4>{{ selected | date: 'EEEE' }}</h4>
        <div class="muted">{{ selected | date }}</div>
      </div>
      <div class="head-row-info">
        <button (click)="print()" type="button" class="cta-print">Drucken</button>
        <span class="muted"> {{ itemsForSelectedDate?.length }} Aufgaben und Infos </span>
      </div>
    </div>
    <hr />
    <ng-container *ngFor="let item of itemsForSelectedDate">
      <page-task-list-item [item]="item" (click)="select.emit(item)" [showDate]="false"></page-task-list-item>
      <hr />
    </ng-container>
  </div>
</ng-container>

<ng-container *ngIf="isToday$ | async">
  <div class="task-list ongoing-list" *ngIf="ongoingItems$ | async; let ongoingItems">
    <div class="head-row">
      <div class="head-row-title">
        <h4>Laufende Aufgaben</h4>
      </div>
      <div class="head-row-info">
        <span class="muted"> {{ ongoingItems?.length }} Aufgaben </span>
      </div>
    </div>
    <hr />
    <ng-container *ngFor="let item of ongoingItems">
      <page-task-list-item [item]="item" (click)="select.emit(item)"></page-task-list-item>
      <hr />
    </ng-container>
  </div>
</ng-container>
