@if (anomalies$ | async; as anomalies) {
  @if (anomalies.length) {
    <mat-tree
      [dataSource]="dataSource"
      [treeControl]="treeControl"
      >
      <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
        <dks-anomaly-list-item
          [anomaly]="node.anomaly"
          (anomalySetToSleep)="setAnomalyToSleep($event)"
          (anomalyAccepted)="acceptAnomaly($event)"
        ></dks-anomaly-list-item>
      </mat-tree-node>
      <mat-tree-node
        class="flex"
        *matTreeNodeDef="let node; when: hasChild"
        matTreeNodePadding
        >
        <button
          mat-icon-button
          matTreeNodeToggle
          [attr.aria-label]="'Toggle ' + node.name"
          >
          <mat-icon class="mat-icon-rtl-mirror">
            {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
          </mat-icon>
        </button>
        {{ node.name }}
        <div class="ml-auto rounded-full w-5 h-5 flex justify-center items-center font-bold" style="background-color: var(--mat-sys-primary-container); color: var(--mat-sys-on-primary-container)">{{ node?.childCount }}</div>
      </mat-tree-node>
    </mat-tree>
  } @else {
    <mat-list-item
      >Herzlichen Glückwunsch, es liegen keine Anomalien vor!</mat-list-item
      >
    }
  }
  <mat-paginator
    #paginator
    class="mt-auto"
    [length]="totalCount$ | async"
    [pageSize]="pageSize"
    [pageSizeOptions]="[]"
    (page)="changePage($event)"
    aria-label="Select page"
    >
  </mat-paginator>