@if (isAddingTask) {
  <app-new-task [userId]="userId" (close)="onCloseAddTask()" />
}

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

  <ul>
    @for (task of selectedUserTasks; track task.id) {
      <li>
        <app-task [task]="task" />
      </li>
    }
  </ul>
</section>