@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 $n)
                @php $title = $ar ? ($n->title ?? $n->title_en) : ($n->title_en ?? $n->title); @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) && ($n->image_path ?? null))
                        <img src="{{ $n->image_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 ($block->get('show_date', true) && ($n->published_at ?? null))
                            <time class="ec-muted text-xs" datetime="{{ $n->published_at->toDateString() }}">{{ $n->published_at->translatedFormat('j F Y') }}</time>
                        @endif
                        <h3 class="ec-heading font-semibold text-lg leading-snug">{{ $title }}</h3>
                        @if ($block->get('show_excerpt', true))
                            <p class="ec-muted text-sm line-clamp-3">{{ $ar ? ($n->excerpt ?? '') : ($n->excerpt_en ?? $n->excerpt ?? '') }}</p>
                        @endif
                        @if ($block->get('link_items', true))
                            <a href="{{ route('website.news.show', $n) }}" class="ec-accent text-sm font-semibold mt-auto pt-3">{{ __('اقرأ المزيد') }} →</a>
                        @endif
                    </div>
                </article>
            @endforeach
        </div>
    @endif
    @include('website.blocks._footer_buttons')
</div>
