@props(['events' => []])

<section class="dashboard-section upcoming-events" aria-labelledby="upcoming-events-title">
    <div class="panel-header">
        <h2 class="section-title" id="upcoming-events-title">Upcoming Events</h2>
        <a href="{{ route('events.index') }}" class="panel-link">View all</a>
    </div>
    <div class="h-scroll" role="list" tabindex="0" aria-label="Upcoming events" data-h-scroll>
        @forelse($events as $event)
            <x-event.card :event="$event" />
        @empty
            <p class="text-muted px-4 pb-4 mb-0">No upcoming events yet.</p>
        @endforelse
    </div>
</section>
