<div class="event-page">
    <!-- Header -->
    <div class="page-header">
        <button class="back-btn" (click)="onBack()">← Back</button>
        <span class="student-name">{{ studentIdentifier() }}</span>
    </div>
    <h2 class="goal-title">{{ goalCategory() }}</h2>

    <!-- Error message -->
    @if (error()) {
    <p class="error">{{ error() }}</p>
    }

    <!-- Progress event form -->
    <div class="form-card">
        <label class="field-label">Progress event notes</label>
        <textarea class="notes-input" placeholder="Type your message here." rows="5" [(ngModel)]="notes"></textarea>
    </div>

    @if (benchmarkItems().length > 0) {
    <label class="field-label">Associated Benchmarks</label>
    <div class="benchmark-scroll">
        @for (bm of benchmarkItems(); track bm.benchmarkId) {
        <app-toggle-benchmark
            [label]="bm.label"
            [checked]="bm.checked"
            (toggled)="onToggleBenchmark(bm.benchmarkId)" />
        }
    </div>
    }

    <!-- Save button -->
    <button class="save-btn" [disabled]="!canSave()" (click)="onSave()">
        {{ saving() ? 'Saving...' : 'Save' }}
    </button>
</div>