@php
    $cols = ['1' => '', '2' => 'sm:grid-cols-2', '3' => 'sm:grid-cols-2 lg:grid-cols-3', '4' => 'sm:grid-cols-2 lg:grid-cols-4'][$block->get('columns', '3')] ?? 'sm:grid-cols-2 lg:grid-cols-3';
    $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 grid-cols-1 {{ $cols }} gap-6">
            @foreach ($items as $program)
                @php $name = $ar ? ($program->name_ar ?? $program->name) : ($program->name ?? $program->name_ar); @endphp
                <article class="ec-stagger-item ec-surface rounded-2xl overflow-hidden shadow-sm flex flex-col transition hover:-translate-y-1">
                    @if ($block->get('show_image', true) && ($program->image_path ?? null))
                        <img src="{{ $program->image_path }}" alt="{{ $name }}" loading="lazy" class="w-full aspect-[3/2] object-cover">
                    @endif
                    <div class="p-6 flex flex-col gap-2 flex-1">
                        <h3 class="ec-heading text-xl font-semibold">{{ $name }}</h3>
                        @if ($ar ? ($program->description_ar ?? null) : ($program->description ?? null))
                            <p class="ec-muted text-sm line-clamp-3">{{ $ar ? $program->description_ar : $program->description }}</p>
                        @endif
                        <dl class="flex flex-wrap gap-x-5 gap-y-1 mt-2 text-sm ec-muted">
                            @if ($block->get('show_age_range', true) && (($program->min_age ?? null) || ($program->max_age ?? null)))
                                <div class="flex items-center gap-1.5">
                                    <x-website.icon name="users" class="w-4 h-4" />
                                    <span dir="ltr">{{ $program->min_age ?? '?' }}–{{ $program->max_age ?? '?' }}</span>
                                    <span>{{ __('سنة') }}</span>
                                </div>
                            @endif
                            @if ($block->get('show_duration') && ($program->duration_weeks ?? null))
                                <div class="flex items-center gap-1.5">
                                    <x-website.icon name="calendar" class="w-4 h-4" />
                                    <span>{{ $program->duration_weeks }} {{ __('أسبوع') }}</span>
                                </div>
                            @endif
                        </dl>
                        @if ($block->get('show_price') && ($program->base_price ?? null))
                            <p class="ec-accent font-bold mt-auto pt-3" dir="ltr">{{ format_money($program->base_price) }}</p>
                        @endif
                    </div>
                </article>
            @endforeach
        </div>
    @endif
    @include('website.blocks._footer_buttons')
</div>
