@if (tasks) {
  <ul>
    @for (task of tasks;track task) {
      <li [class]="['list-unstyled', points ? 'text-' + (task | taskColor:points[task._id]) : null]">
        <input
          #check
          type="checkbox"
          class="form-check-input"
          [disabled]="!editable"
          [checked]="evaluations?.[task._id] && points?.[task._id] !== 0"
          [indeterminate]="!evaluations?.[task._id]"
          (change)="givePoints(task, check.checked ? task.points : 0)"
          [ngbTooltip]="'Click to give ' + (check.checked ? 0 : task.points) + ' points'"
        >
        {{task.description}}
        <span class="badge bg-{{task | taskColor:points?.[task._id]}}">
          @if (points) {
            {{ points[task._id] }} /
          }
          {{task.points}}
        </span>
        @if (evaluations) {
          @if (evaluations[task._id];as evaluation) {
            <a
              class="ms-1"
              [class.link-info]="evaluation.remark"
              [class.link-secondary]="!evaluation.remark"
              [class.bi-person]="evaluation.author !== 'Code Search'"
              [class.bi-robot]="evaluation.author === 'Code Search'"
              [ngbTooltip]="evaluation.remark + ' ~ ' + evaluation.author"
              [routerLink]="[task._id]"
            ></a>
          }
          @if (editable && !evaluations[task._id]) {
            <a
              ngbTooltip="Create Evaluation"
              role="button"
              class="bi-plus-circle link-primary ms-1"
              [routerLink]="[task._id]"
            ></a>
          }
        }
        @if (task.children.length) {
          <app-task-list
            [allTasks]="allTasks"
            [tasks]="task.children"
            [evaluations]="evaluations"
            [editable]="editable"
            [points]="points"
          ></app-task-list>
        }
      </li>
    }
  </ul>
} @else {
  Loading...
}