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

<div class="edit-project">
  <div class="card">
    <h1>Edit project</h1>

    @if (errorMessage()) {
      <div class="error">{{ errorMessage() }}</div>
    }

    @if (isLoading()) {
      <p class="loading">Loading project...</p>
    } @else {
      <form (ngSubmit)="onSubmit()" #projectForm="ngForm">
        <div class="form-group">
          <label for="name">Project name</label>
          <input
            id="name"
            type="text"
            name="name"
            [(ngModel)]="name"
            placeholder="Enter a project name"
            required
          />
        </div>

        <div class="form-group">
          <label for="description">Description</label>
          <textarea
            id="description"
            name="description"
            [(ngModel)]="description"
            rows="4"
            placeholder="Enter a project description"
            required
          ></textarea>
        </div>

        <div class="actions">
          <button type="button" class="btn-secondary" (click)="onCancel()">Cancel</button>
          <button
            type="submit"
            class="btn-primary"
            [disabled]="isSaving() || !projectForm.form.valid"
          >
            @if (isSaving()) {
              <span>Saving...</span>
            } @else {
              <span>Save changes</span>
            }
          </button>
        </div>
      </form>
    }
  </div>
</div>