{{-- v4.20.1 §C — UN BOUTON DU TRIAGE, QUI BASCULE AVANT LE SERVEUR.

     L'étoile et le « vu » partaient au serveur, écrivaient, puis re-rendaient la liste entière
     avant que l'icône change. Ici, le clic inverse l'état LOCAL d'abord — l'icône, sa couleur, son
     infobulle et, pour le « vu », le fond du bloc — et la persistance suit derrière, sans rendu
     ({@see \App\Filament\Support\Ao\BasculeDeTriage}).

     L'optimiste n'invente rien : il anticipe ce que la base confirmera. `x-data` est amorcé sur
     l'état RÉEL de l'enregistrement, et un rechargement de page repart de la base.

     ⚠️ `.stop` n'est pas décoratif : le bloc entier est enveloppé dans le lien de la fiche
     (`recordUrl`). Sans lui, un clic sur l'étoile ouvrirait l'AO.

     ⚠️ `wire:key` PORTE L'ÉTAT, et c'est ce qui évite l'écran qui ment. Livewire re-rend la liste
     à chaque filtre, chaque tri, chaque page, chaque action de lot — et son morphage NE RÉÉVALUE
     PAS un `x-data` déjà monté : l'icône serait restée sur la valeur du premier rendu. Avec l'état
     dans la clé, une valeur changée en base change la clé, Livewire remplace l'élément, et Alpine
     repart de la base. Le serveur garde donc le dernier mot — l'optimiste ne fait que le devancer.

     `data-icone` nomme l'icône que le navigateur ne dit plus (un `@svg` rend le dessin, pas son
     nom) : c'est ce qui rend l'état vérifiable, à l'œil comme au test.

     ⚠️ `x-cloak` sur l'icône que l'état courant ne montre pas : sans lui, les deux se voient le
     temps qu'Alpine démarre, et la liste clignote au chargement. --}}
@php
    $record = $getRecord();
    $actif = (bool) $getState();
    $modifiable = auth()->user()?->can('update', $record) ?? false;
@endphp

<div
    wire:key="ao-triage-{{ $geste }}-{{ $record->getKey() }}-{{ $actif ? 1 : 0 }}"
    @class(['ao-triage', $classeDuGeste, 'ao-triage--fige' => ! $modifiable, 'ao-triage--actif' => $actif])
    x-data="{
        actif: @js($actif),
        basculer() {
            this.actif = ! this.actif;
            @if ($geste === 'vu')
                $dispatch('ao-triage-vu', { vu: this.actif });
            @endif
            $wire.basculerLeTriage(@js($record->getKey()), @js($geste), this.actif);
        },
    }"
    x-bind:class="{ 'ao-triage--actif': actif }"
>
    @if ($modifiable)
        <button
            type="button"
            class="ao-triage-bouton"
            x-on:click.prevent.stop="basculer()"
            x-bind:title="actif ? @js($infobulleActive) : @js($infobulleInactive)"
            x-bind:aria-pressed="actif ? 'true' : 'false'"
            title="{{ $actif ? $infobulleActive : $infobulleInactive }}"
            aria-pressed="{{ $actif ? 'true' : 'false' }}"
        >
            <span data-icone="{{ $iconePleine }}" x-show="actif" @unless ($actif) x-cloak @endunless>@svg($iconePleine, 'ao-triage-icone')</span>
            <span data-icone="{{ $iconeVide }}" x-show="! actif" @if ($actif) x-cloak @endif>@svg($iconeVide, 'ao-triage-icone')</span>
        </button>
    @else
        {{-- Sans le droit de modifier la fiche, l'état se LIT et ne se pose pas : un bouton qui ne
             ferait rien serait pire qu'une icône honnête. --}}
        <span class="ao-triage-bouton" title="{{ $actif ? $infobulleActive : $infobulleInactive }}">
            <span data-icone="{{ $actif ? $iconePleine : $iconeVide }}">@svg($actif ? $iconePleine : $iconeVide, 'ao-triage-icone')</span>
        </span>
    @endif
</div>