<div class="toolbar">
    <button class="toolbar-btn back-btn" (click)="onBack()">&#8593; Goal</button>
    <span class="spacer"></span>
    <button class="toolbar-btn" (click)="onAddBenchmark()">+ Add a Benchmark</button>
</div>

@if (goalCategory()) {
<h2 class="section-header">Benchmarks for {{ goalCategory() }}</h2>
} @else {
<h2 class="section-header">Benchmarks</h2>
}

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

@if (benchmarks().length === 0 && !errorMessage()) {
<div class="empty-state">
    <p>Benchmarks are milestones on the way to achieving a goal. They are optional in this system.</p>
    <p>No benchmarks yet.</p>
    <p>Click <strong>+ Add a Benchmark</strong> in the upper right to get started.</p>
</div>
} @else {
<div class="card-grid">
    @for (bm of benchmarks(); track bm.benchmarkId) {
    <app-benchmark-card [benchmark]="bm" />
    }
</div>
}