@props(['event'])
@php
$badge = ['workshop' => 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300', 'contest' => 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300', 'seminar' => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300', 'other' => 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'][$event->type] ?? '';
@endphp
<div class="card card-hover flex h-full flex-col overflow-hidden">
    <a href="{{ route('events.show', $event) }}" class="block" tabindex="-1" aria-hidden="true">
        <x-cover :src="$event->image" :alt="$event->title" class="aspect-[16/9] w-full" />
    </a>
    <div class="flex flex-1 flex-col p-5">
        <div class="flex flex-wrap items-center gap-2">
            <span class="badge {{ $badge }}">{{ ucfirst($event->type) }}</span>
            <span class="badge {{ $event->isFree() ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300' : 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300' }}">{{ $event->feeLabel() }}</span>
        </div>
        <h3 class="mt-3 text-lg font-bold text-slate-900 dark:text-white">
            <a href="{{ route('events.show', $event) }}" class="hover:text-blue-600 dark:hover:text-blue-400">{{ $event->title }}</a>
        </h3>
        <div class="mt-3 space-y-1 text-sm text-slate-500 dark:text-slate-400">
            <p class="flex items-center gap-2"><x-icon name="calendar" class="h-4 w-4"/> {{ $event->starts_at->format('D, d M Y · h:i A') }}</p>
            <p class="flex items-center gap-2"><x-icon name="pin" class="h-4 w-4"/> {{ $event->location }}</p>
        </div>
        <div class="mt-auto flex gap-2 pt-5">
            <a href="{{ route('events.show', $event) }}" class="btn btn-ghost btn-sm flex-1">View details</a>
            @if($event->canRegister())
                <a href="{{ route('events.register.create', $event) }}" class="btn btn-accent btn-sm flex-1">Register</a>
            @endif
        </div>
    </div>
</div>