<div class="card" (click)="onCardClick()">
    <div class="card-header">
        <span class="card-title">Goal: {{ goal().category }}</span>
        @if (goal().closeDate !== null) {
            <span class="closed-badge" [class.achieved]="goal().achieved === true">
                {{ goal().achieved === true ? 'Closed ✓' : 'Closed ✗' }}
            </span>
        }
        @if (goal().targetCompletionDate) {
            <span class="event-count">Target: {{ goal().targetCompletionDate | date:'mediumDate' }}</span>
        } @else {
            <span class="event-count">No target date</span>
        }
    </div>

    <div class="card-body">
        @if (goalNumber() > 0) {
            <p class="description"><strong>Goal {{ goalNumber() }}:</strong> {{ goal().description }}</p>
        } @else {
            <p class="description">{{ goal().description }}</p>
        }
    </div>

    <div class="card-footer">
        <button class="footer-btn btn-green" (click)="$event.stopPropagation(); onProgressEventsClick()">Progress Events</button>
        <button class="footer-btn btn-blue" (click)="$event.stopPropagation(); onBenchmarksClick()">Benchmarks</button>
    </div>
</div>