{{--
    @intent Fragmento do widget `noticias.mais-lidas` (P5.S5.1): lista **ordenada** e compacta,
            pensada para a coluna lateral do portal.
    @description Uma query por widget (`NoticiasWidgetFeed::popular()`), ordem determinística por
                 publicação enquanto o agregado do P4 não distinguir conteúdo (ADR-047 — ver
                 `MODULE.md`). O ranking é a própria semântica de `<ol>`; o número é decorativo
                 (`aria-hidden`), então leitor de tela não ouve a posição duas vezes. Sem `id`
                 fixo no fragmento (WCAG 4.1.1) e sem `<script>`/`style=`.
--}}
@use('Core\Localization\LocalizedDate')
@use('Modules\Publicacoes\Noticias\Logic\Support\NoticiasWidgetFeed')

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

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

        <ol class="flex flex-col" role="list">
            @foreach ($items as $noticia)
                <li class="flex gap-3 border-b border-civic-border py-3 first:pt-0 last:border-b-0 last:pb-0">
                    <span aria-hidden="true" class="text-lg font-extrabold text-civic-outline">{{ $loop->iteration }}</span>

                    <div class="flex flex-col gap-1">
                        <h3 class="text-base 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>

                        <time datetime="{{ $noticia->published_at?->toDateString() }}" class="text-sm text-civic-outline">
                            {{ LocalizedDate::short($noticia->published_at) }}
                        </time>
                    </div>
                </li>
            @endforeach
        </ol>
    </section>
@endif