@props(['announcement', 'headingLevel' => 'h2'])
{{--
    Fila del tablón de comunicados: se consulta como un registro, no como una
    galería. La fecha va en una columna fija y el filete izquierdo anaranjado
    marca los importantes vigentes.
--}}
@php
    $important = $announcement->isImportantActive();
    $closed = $announcement->isClosed();
    $fileCount = count($announcement->files());
@endphp
<article class="group relative flex gap-4 py-5 ps-4 pe-2 sm:gap-6 sm:ps-5 {{ $important ? 'border-s-4 border-accent bg-accent/5' : 'border-s-4 border-transparent' }}">
    <time datetime="{{ $announcement->issued_on->toDateString() }}" class="w-14 shrink-0 text-center leading-none">
        <span class="sr-only">{{ $announcement->issued_on->translatedFormat('j \d\e F \d\e Y') }}</span>
        <span aria-hidden="true" class="block text-2xl font-extrabold tabular-nums">{{ $announcement->issued_on->format('d') }}</span>
        <span aria-hidden="true" class="mt-1 block text-xs font-bold tracking-wider text-muted uppercase">{{ rtrim($announcement->issued_on->translatedFormat('M'), '.') }}</span>
        <span aria-hidden="true" class="mt-0.5 block text-xs text-muted tabular-nums">{{ $announcement->issued_on->format('Y') }}</span>
    </time>

    <div class="min-w-0 flex-1">
        <p class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm">
            @if ($important)
                <span class="rounded-md bg-accent px-2 py-0.5 font-bold text-accent-ink">Importante</span>
            @endif
            <span class="rounded-md bg-green/15 px-2 py-0.5 font-semibold text-green-text">{{ $announcement->type->name }}</span>
            @if ($announcement->number)
                <span class="font-semibold text-muted tabular-nums wrap-anywhere">{{ $announcement->number }}</span>
            @endif
        </p>

        <{{ $headingLevel }} class="mt-1.5 text-lg leading-snug font-bold wrap-anywhere">
            {{-- el enlace cubre toda la fila --}}
            <a href="{{ route('announcements.show', $announcement) }}" class="after:absolute after:inset-0 group-hover:text-link">{{ $announcement->title }}</a>
        </{{ $headingLevel }}>

        @if ($announcement->campus || $announcement->validityLabel() || $fileCount > 0)
            <p class="mt-1.5 flex flex-wrap gap-x-3 gap-y-0.5 text-sm text-muted">
                @if ($announcement->validityLabel())
                    <span class="{{ $closed ? '' : 'font-semibold text-ink' }}">{{ $announcement->validityLabel() }}</span>
                @endif
                @if ($announcement->campus)
                    <span>{{ $announcement->campus->getLabel() }}</span>
                @endif
                @if ($fileCount > 0)
                    <span class="inline-flex items-center gap-1">
                        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12.5 12.5 21a5.5 5.5 0 0 1-7.8-7.8l9-9a3.7 3.7 0 0 1 5.2 5.2l-9 9a1.8 1.8 0 0 1-2.6-2.6L15.5 7.6"/></svg>
                        {{ trans_choice('{1} 1 archivo|[2,*] :count archivos', $fileCount) }}
                    </span>
                @endif
            </p>
        @endif
    </div>

    <span aria-hidden="true" class="hidden self-center text-xl text-muted transition group-hover:translate-x-1 group-hover:text-link motion-reduce:transition-none sm:block">→</span>
</article>