<div class="toolbar">
    <button class="toolbar-btn back-btn" (click)="onBack()">&#8593; Progress Events</button>
    <span class="toolbar-title">{{ isNew() ? 'New Progress Event' : 'Edit Progress Event' }}</span>
    <span class="spacer"></span>
</div>

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

@if (loaded()) {
<div class="detail-card">
    <div class="field">
        <span class="field-label">Goal: {{ goalCategory }}</span>
    </div>
    <div class="field">
        <label class="field-label" for="content">Notes</label>
        <textarea id="content" class="field-input field-textarea" [(ngModel)]="content" rows="5"
            placeholder="Enter progress event notes..."></textarea>
    </div>

    @if (benchmarkItems().length > 0) {
    <div class="field">
        <span class="field-label">Associated Benchmarks</span>
        <div class="benchmark-checks">
            @for (bm of benchmarkItems(); track bm.benchmarkId) {
            <label class="check-item">
                <input type="checkbox" [checked]="bm.checked" (change)="onToggleBenchmark(bm.benchmarkId)" />
                {{ bm.label }}
            </label>
            }
        </div>
    </div>
    }

    @if (!isNew()) {
    <div class="metadata">
        @if (createdByName) {
        <span class="meta-item">Created by: {{ createdByName }}</span>
        }
        @if (createdAt) {
        <span class="meta-item">Created: {{ createdAt | date:'medium' }}</span>
        }
    </div>
    }
    <div class="actions">
        <button class="toolbar-btn" (click)="onCancel()" [disabled]="!hasChanges()">Cancel</button>
        <button class="toolbar-btn save-btn" (click)="onSave()" [disabled]="!hasChanges() || saving()">
            {{ saving() ? 'Saving...' : 'Save' }}
        </button>
    </div>
</div>
}

@if (successMessage()) {
<p class="success">{{ successMessage() }}</p>
}
