@if (isAddingTask) {
  <app-new-task (cancel)="onCancelAddTask()" />
}

<section id="tasks">
  <header>
    <h2>{{ user.name }}'s Tasks</h2>
    <menu>
      <button (click)="onStartAddTask()">Add Task</button>
    </menu>
  </header>

  @if (selectedUserTasks) {
    <ul>
      @for (task of selectedUserTasks; track task.id) {
        <li>
          <app-task
            [task]="task"
            (complete)="onCompleteTask($event)"
          />
        </li>
      }
    </ul>
  } @else {
    <p>Create a new task for his user.</p>
  }
</section>