@props(['article', 'version'])

{{-- Chip de référence justifiée : le pop-up n'affiche QUE des données du corpus. --}}<a href="{{ route('livre6.show', $article) }}" class="ref-chip" tabindex="0"
    aria-label="Article {{ $article->number }} du {{ $article->division?->code?->name ?? 'Code de commerce' }} : détails au survol">Art. {{ $article->number }}<span class="ref-pop" role="tooltip">
        <span class="flex items-center justify-between gap-2">
            <span class="font-sans text-sm font-bold text-title">Article {{ $article->number }}</span>
            <span class="pastille text-[10px] uppercase {{ $version->isInForce() ? 'pastille--vigueur' : '' }}"
                  @unless($version->isInForce()) style="color: var(--color-muted); border-color: var(--color-line); background: var(--color-paper)" @endunless>
                {{ $version->statusLabel() }}
            </span>
        </span>
        @if ($article->division)
            <span class="mt-0.5 block text-[11px] text-muted">{{ $article->division->code?->name ?? 'Code de commerce' }} · {{ $article->division->label }}</span>
        @endif
        <span class="mt-2 block border-l-2 pl-2.5 text-[13px] leading-relaxed text-ink" style="border-color: var(--color-rep-blue)">
            {{ Str::limit($version->content, 220) }}
        </span>
        <span class="mt-2 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-muted">
            <span>En vigueur depuis le {{ $version->effective_from?->format('d/m/Y') }}</span>
            @if ($version->source)<span>· Source : {{ $version->source->name }}</span>@endif
        </span>
        @unless ($version->isValidated())
            <span class="encart-attente mt-1.5 block px-2 py-1 text-[11px] font-medium">Texte en attente de validation juridique.</span>
        @endunless
        <span class="mt-1.5 block text-[11px] font-semibold text-rep-blue">Cliquer pour consulter l'article complet →</span>
    </span></a>