KanbanCloneAngular/src/app/pages/project-details/project-details.component.html

<div class="details-container">
  <main class="content">
    @if (isLoading()) {
      <div class="loading">
        <p>Loading project...</p>
      </div>
    } @else if (errorMessage()) {
      <div class="error-state">
        <p>{{ errorMessage() }}</p>
      </div>
    } @else {
      <section class="project-card">
        <h2>{{ project()?.name }}</h2>
        <h4>Project description:</h4>
        <p class="description">
          {{ project()?.description || 'No description available.' }}
        </p>
      </section>

      <div class="cards-row">
        <section class="tasks-card">
          <div class="tasks-header">
            <h4>Tasks</h4>
            <span class="tasks-count">
              {{ project()?.tasks?.length ?? 0 }} total • {{ taskCompletionPercentage }}% completed
            </span>
          </div>

          @if ((project()?.tasks?.length ?? 0) > 0) {
            <div class="tasks-list">
              @for (task of project()?.tasks ?? []; track task.id) {
                <app-task-item
                  [task]="task"
                  [projectId]="project()?.id"
                  (statusChange)="onTaskStatusChange($event)"
                />
              }
            </div>
          } @else {
            <div class="empty-state">
              <p>No tasks yet.</p>
            </div>
          }

          <button class="btn-add-task" type="button" (click)="onAddTask()">Add task</button>
        </section>

        <section class="collaborators-card">
          <div class="collaborators-header">
            <h4>Collaborators</h4>
            <span class="collaborators-count"> {{ project()?.users?.length ?? 0 }} total </span>
          </div>

          @if ((project()?.users?.length ?? 0) > 0) {
            <div
              class="collaborators-grid"
              [class.collaborators-grid--single]="(project()?.users?.length ?? 0) === 1"
            >
              @for (user of project()?.users ?? []; track user.id) {
                <app-collaborator-item [user]="user" (remove)="onRemoveCollaborator($event)" />
              }
            </div>
          } @else {
            <div class="empty-state">
              <p>No collaborators yet.</p>
            </div>
          }

          <button class="btn-add-collaborator" type="button" (click)="onAddCollaborator()">
            Add collaborator
          </button>
        </section>
      </div>

      <section class="danger-zone">
        <div class="danger-header">
          <h3>Danger zone</h3>
          <p>Actions that affect this project permanently.</p>
        </div>
        <div class="danger-actions">
          <div class="danger-item">
            <div>
              <h4>Edit project details</h4>
              <p>Update the project name or description.</p>
            </div>
            <button class="btn-danger-outline" type="button" (click)="onEditProject()">
              Edit project
            </button>
          </div>
          <div class="danger-item">
            <div>
              <h4>Delete project</h4>
              <p>This will remove the project and all associated data.</p>
            </div>
            <button class="btn-danger" type="button" (click)="onDeleteProject()">
              Delete project
            </button>
          </div>
        </div>
      </section>
    }
  </main>
</div>