@if (isHideDone() || isHideAll()) {
  <div
    @expandFadeFast
    class="done-task-box"
  >
    <button
      (click)="expandDoneTasks()"
      class="expand-tasks-btn"
      mat-button
    >
      <em>
        @if (isHideDone()) {
          {{
            T.F.TASK.CMP.SHOW_HIDDEN_DONE_SUB_TASKS | translate: { nr: doneTasksLength() }
          }}
        } @else {
          {{ T.F.TASK.CMP.SHOW_HIDDEN_SUB_TASKS | translate: { nr: allTasksLength() } }}
        }
      </em>
      <mat-icon>expand_more</mat-icon>
    </button>
  </div>
}

<div
  cdkDropList
  [cdkDropListConnectedTo]="dropListService.dropLists | async"
  [cdkDropListSortingDisabled]="isSortingDisabled()"
  [cdkDropListEnterPredicate]="enterPredicate"
  [cdkDropListData]="dropModelDataForList()"
  (cdkDropListDropped)="drop(filteredTasks(), $event)"
  [@taskList]="
    (dropListService.isBlockAniAfterDrop$ | async) ? 'BLOCK' : filteredTasks()?.length
  "
  [attr.data-id]="listModelId()"
  class="task-list-inner"
>
  @for (task of filteredTasks(); track trackByFn($index, task); let i = $index) {
    <task
      [isInSubTaskList]="isSubTaskList()"
      [isBacklog]="isBacklog()"
      [task]="task"
      cdkDrag
      [cdkDragStartDelay]="dragDelayForTouch()"
      [cdkDragLockAxis]="isXs() ? 'y' : ''"
      [cdkDragDisabled]="listModelId() === 'LATER_TODAY'"
      [cdkDragData]="task"
      (cdkDragStarted)="onDragStarted(task, $event)"
      (cdkDragEnded)="onDragEnded()"
    >
    </task>
  }
</div>

@if (noTasksMsg() && !allTasksLength()) {
  <div class="no-tasks">{{ noTasksMsg() }}</div>
}