@php $ar = app()->getLocale() === 'ar'; @endphp
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    @include('website.blocks._header')
    @if ($items->isEmpty())
        @include('website.blocks._empty')
    @else
        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($items as $event)
                @php $title = $ar ? ($event->title ?? $event->title_en) : ($event->title_en ?? $event->title); @endphp
                <article class="ec-stagger-item ec-surface rounded-2xl overflow-hidden shadow-sm flex flex-col">
                    @if ($block->get('show_image', true) && ($event->cover_path ?? null))
                        <img src="{{ $event->cover_path }}" alt="{{ $title }}" loading="lazy" class="w-full aspect-[16/9] object-cover">
                    @endif
                    <div class="p-6 flex flex-col gap-2 flex-1">
                        @if ($event->starts_at ?? null)
                            <time class="ec-accent text-sm font-semibold" datetime="{{ $event->starts_at->toDateString() }}">
                                {{ $event->starts_at->translatedFormat('j F Y') }}
                            </time>
                        @endif
                        <h3 class="ec-heading font-semibold text-lg">{{ $title }}</h3>
                        @if ($block->get('show_location', true) && ($event->location_address ?? null))
                            <p class="ec-muted text-sm flex items-start gap-2">
                                <x-website.icon name="map-pin" class="w-4 h-4 mt-0.5 shrink-0" />
                                <span>{{ $event->location_address }}</span>
                            </p>
                        @endif
                        @if ($block->get('show_countdown') && ($event->starts_at ?? null) && $event->starts_at->isFuture())
                            <p class="ec-muted text-sm" data-countdown="{{ $event->starts_at->toIso8601String() }}"></p>
                        @endif
                        @if ($block->get('show_register_button', true))
                            <a href="{{ route('website.events.show', $event->slug ?? $event) }}"
                               class="ec-btn ec-btn--primary mt-auto text-center rounded-full px-5 py-2.5 font-semibold transition">
                                {{ __('سجّل الآن') }}
                            </a>
                        @endif
                    </div>
                </article>
            @endforeach
        </div>
    @endif
    @include('website.blocks._footer_buttons')
</div>
