{{--
    @intent Fragmento do widget `noticias.ultimas` (P5.S5.1): últimas notícias publicadas em uma
            grade semântica de cartões, sem JS e sem rolagem automática.
    @description O feed é resolvido aqui, no render, para usar o locale da requisição (a fonte do
                 widget é registrada no boot). Uma query por widget (`NoticiasWidgetFeed`), mídia
                 de capa montada pelo `<x-media::picture>` do partial do módulo (AVIF/WebP,
                 `width`/`height`, `alt` obrigatório — ADR-026). Sem `id` fixo no fragmento: o
                 mesmo widget pode ocupar dois slots (WCAG 4.1.1). Caminho interno por `route()`
                 (ADR-012); sem `<script>`/`style=`.
--}}
@use('Core\Localization\LocalizedDate')
@use('Modules\Publicacoes\Noticias\Logic\Support\NoticiasWidgetFeed')

@php
    $items = app(NoticiasWidgetFeed::class)->latest();
@endphp

@if (! $items->isEmpty())
    <section class="flex flex-col gap-4" aria-label="{{ __('noticias::widget.ultimas') }}">
        <h2 class="text-xl font-bold tracking-tight text-civic-ink">{{ __('noticias::widget.ultimas') }}</h2>

        <ul class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3" role="list">
            @foreach ($items as $noticia)
                <li class="flex">
                    <article class="flex w-full flex-col overflow-hidden rounded-2xl border-2 border-civic-border bg-surface">
                        @if ($noticia->hasCover())
                            {{-- Com capa, o contêiner leva à notícia (o `alt` da imagem nomeia o link). --}}
                            <a href="{{ route('noticias.show', ['slug' => $noticia->slug]) }}" class="block aspect-video w-full overflow-hidden">
                                @include('noticias::partials.cover', [
                                    'noticia' => $noticia,
                                    'sizes' => '(min-width: 64rem) 20rem, (min-width: 40rem) 50vw, 100vw',
                                    'class' => 'h-full w-full object-cover',
                                    'loading' => 'lazy',
                                ])
                            </a>
                        @else
                            {{-- Sem capa o placeholder é decorativo: um `<a>` em volta dele ficaria
                                 **sem nome acessível** (WCAG 2.4.4/4.1.2, `link-name` no axe). O único
                                 link do cartão é o título abaixo. --}}
                            <span class="block aspect-video w-full overflow-hidden">
                                @include('noticias::partials.cover', [
                                    'noticia' => $noticia,
                                    'sizes' => '(min-width: 64rem) 20rem, (min-width: 40rem) 50vw, 100vw',
                                    'class' => 'h-full w-full object-cover',
                                    'loading' => 'lazy',
                                ])
                            </span>
                        @endif

                        <div class="flex flex-col gap-2 p-4">
                            <time datetime="{{ $noticia->published_at?->toDateString() }}" class="inline-flex items-center gap-2 text-sm text-civic-outline">
                                <x-ui::icon name="calendar" class="h-4 w-4" />
                                {{ LocalizedDate::short($noticia->published_at) }}
                            </time>

                            <h3 class="text-lg font-bold leading-snug text-civic-ink">
                                <a href="{{ route('noticias.show', ['slug' => $noticia->slug]) }}" class="inline-block min-h-6 transition-colors hover:text-civic-link pointer-coarse:min-h-11">
                                    {{ $noticia->title }}
                                </a>
                            </h3>
                        </div>
                    </article>
                </li>
            @endforeach
        </ul>
    </section>
@endif