<header>
  <div class="day-title">{{ T.G.OVERDUE | translate }}</div>
  <div class="day-counts">
    <span>{{ totalEstimate() | roundDuration | msToString }}</span>

    @if ((overdueTasks() || []).length > 5) {
      <mat-icon inline="true">task_alt</mat-icon>
      <span>{{ (overdueTasks() || []).length }}</span>
    }
  </div>
</header>

<div class="normal-tasks">
  <div
    class="normal-tasks-items"
    cdkDropList
    [cdkDropListSortingDisabled]="true"
    [cdkDropListEnterPredicate]="enterPredicate"
    [cdkDropListData]="OVERDUE_LIST_ID"
    [cdkDropListAutoScrollStep]="8"
  >
    @for (task of overdueTasks(); track task.id) {
      <planner-task
        cdkDrag
        [cdkDragData]="task"
        [cdkDragStartDelay]="dragDelayForTouch()"
        [cdkDragLockAxis]="isXs() ? 'y' : ''"
        [task]="task"
        [day]=""
        [focusable]="true"
      ></planner-task>
    }
  </div>
</div>

@if (overdueDeadlineTasks()?.length) {
  <div class="deadlines">
    <div class="section-title">
      <mat-icon>flag</mat-icon>
    </div>

    <div class="deadline-items">
      @for (task of overdueDeadlineTasks(); track task.id) {
        <planner-deadline-task [task]="task"></planner-deadline-task>
      }
    </div>
  </div>
}
