WinStudentGoalTracker/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.html

<app-modal-shell title="Edit Goal" (closed)="closed.emit()">
    <div class="field">
        <label class="field-label">Category</label>
        <input class="field-input" type="text" [(ngModel)]="category" placeholder="e.g. Reading, Math, Behavior…" />
    </div>
    <div class="field">
        <label class="field-label">Description</label>
        <textarea class="field-input field-textarea" [(ngModel)]="description"></textarea>
    </div>
    <div class="field">
        <label class="field-label">Baseline</label>
        <textarea class="field-input field-textarea" [(ngModel)]="baseline" placeholder="Enter baseline..."></textarea>
    </div>
    <div class="field">
        <label class="field-label">Due Date</label>
        <input class="field-input" type="date" [(ngModel)]="targetCompletionDate" />
    </div>

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

    <div class="modal-actions">
        <button class="btn-secondary" (click)="closed.emit()">Cancel</button>
        <button class="btn-primary" (click)="onSave()" [disabled]="saving()">
            {{ saving() ? 'Saving...' : 'Save' }}
        </button>
    </div>
</app-modal-shell>