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

<!-- <img class="hero-image" src="/hurdlescropped.png" alt="Hurdles" /> -->


@if (studentIdentifier()) {
<h2 class="section-header">Student: {{ studentIdentifier() }}</h2>
}

@if (showAddModal()) {
<app-add-goal-modal [studentId]="studentId" [existingGoals]="goals()" [nextIepDate]="nextIepDate()" (goalCreated)="onGoalCreated($event)"
    (cancelled)="onModalCancelled()" />
}

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

@if (goals().length === 0 && !errorMessage()) {
<div class="empty-state">
    <p>No goals yet.</p>
    <p>Click <strong>+ Add a Goal</strong> in the upper right to get started.</p>
</div>
} @else {
<div class="card-grid">
    @for (goal of goals(); track goal.goalId; let i = $index) {
    <app-goal-card [goal]="goal" [goalNumber]="i + 1" />
    }
</div>
}

<footer class="goal-footer">
    <span class="spacer"></span>
    <button class="toolbar-btn"> ⭐ Generate progress report</button>
</footer>