<div class="toolbar">
    <button class="toolbar-btn back-btn" (click)="onBack()">&#8593; Goal</button>
    <span class="toolbar-title">Progress Events</span>
    <span class="spacer"></span>
    <button class="toolbar-btn" (click)="onAddProgressEvent()">+ Add Progress Event</button>
</div>

<!-- <img class="hero-image" src="/slalomcropped.png" alt="Slalom" /> -->

@if (studentIdentifier() && goalCategory()) {
<div class="header-row">
    <h2 class="section-header">
        Student: {{ studentIdentifier() }} &nbsp;&nbsp; Goal: {{ goalCategory() }}
        @if (isFiltered()) {
        <span class="filter-count">(showing {{ filteredEvents().length }} of {{ events().length }})</span>
        }
    </h2>
    <div class="search-box">
        <input type="text" class="search-input" placeholder="Search..." [value]="rawSearchText()"
            (input)="onSearchInput($any($event.target).value)" />
        @if (rawSearchText()) {
        <button class="clear-btn" (click)="onClearSearch()">&times;</button>
        }
    </div>
</div>
}

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

@if (filteredEvents().length === 0 && !errorMessage()) {
<p class="empty-state">No progress events recorded yet. Click <strong>+ Add Progress Event</strong> to get started.</p>
} @else {
<div class="event-list">
    @for (evt of filteredEvents(); track evt.progressEventId) {
    <app-progress-item [event]="evt" />
    }
</div>
}