{{-- resources/views/kegiatan/search-kegiatan.blade.php --}}

@php
    use Illuminate\Support\Str;
@endphp

@if($latest->count() > 0)
    @foreach($latest as $item)
        <article class="group rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm hover:bg-slate-50 transition dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10">
            <div class="flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
                {{-- Kategori --}}
                <span class="inline-flex items-center rounded-full bg-indigo-600/10 text-indigo-700 px-2 py-1 font-medium dark:text-indigo-200">
                    <a href="{{ route('welcome', ['category' => $item->category]) }}">
                        {{ $item->category ?? '-' }}
                    </a>
                </span>

                {{-- Offline/Online label --}}
                <span class="inline-flex items-center rounded-full bg-slate-900/5 px-2 py-1 font-medium text-slate-700 dark:bg-white/10 dark:text-slate-200">
                    Offline
                </span>

                <span>•</span>
                <span>{{ $item->created_at->format('d M Y, H:i') }}</span>
            </div>

            {{-- Judul kegiatan --}}
            <h3 class="mt-3 text-base lg:text-lg font-semibold tracking-tight group-hover:text-slate-900 dark:group-hover:text-white">
                {{ $item->title }}
            </h3>

            {{-- Deskripsi --}}
            <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">
                {{ Str::limit($item->description, 80, '...') }}
            </p>

            <div class="mt-4 flex items-center justify-between">
                <a href="{{ route('public.kegiatan.show', $item->slug) }}" 
                   class="text-sm font-medium text-rose-600 hover:text-rose-700 dark:text-rose-300 dark:hover:text-rose-200">
                    Lihat detail →
                </a>

                <span class="text-xs text-slate-500 dark:text-slate-400">
                    Gratis
                </span>
            </div>
        </article>
    @endforeach
@else
    <p class="text-center col-span-3 text-gray-500">Tidak ada kegiatan yang sesuai.</p>
@endif