{{--
    v4.16.1 §F1 — LA CLOCHE, en haut à droite de l'en-tête.

    Une pastille avec le nombre de non-lus (masquée à zéro) ; au tap, le menu : sur téléphone,
    une feuille qui monte du bas ; sur ordinateur, un menu déroulant ancré à la cloche. La même
    liste dans les deux cas, du plus récent au plus ancien, les non-lus mis en évidence.

    ⚠️ JavaScript nu, comme le reste de la façade (ni Alpine ni Tailwind ici) : la feuille se ferme
    sur Échap et sur un clic hors d'elle, et rien d'autre. L'état « ouvert », lui, est celui du
    composant : c'est lui qui décide de charger la liste — fermée, la cloche ne coûte qu'un compte.
--}}
<div class="cloche {{ $ouverte ? 'ouverte' : '' }}" data-cloche @if (! $ouverte) wire:poll.60s @endif>
    <button type="button" class="iconbtn cloche-btn" wire:click="basculer" title="Notifications"
            aria-label="Notifications{{ $nonLues > 0 ? ' : '.$nonLues.' non lue'.($nonLues > 1 ? 's' : '') : '' }}"
            aria-haspopup="dialog" aria-expanded="{{ $ouverte ? 'true' : 'false' }}" data-cloche-bouton>
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
        @if ($nonLues > 0)
            <span class="cloche-pastille" data-cloche-pastille>{{ $nonLues > 99 ? '99+' : $nonLues }}</span>
        @endif
    </button>

    @if ($ouverte)
        <div class="cloche-fond" wire:click="fermer" aria-hidden="true"></div>

        <div class="cloche-menu" role="dialog" aria-modal="true" aria-label="Vos notifications" data-cloche-menu>
            <div class="cloche-tete">
                <span class="cloche-titre">Notifications</span>
                <span class="cloche-actions">
                    @if ($nonLues > 0)
                        <button type="button" class="cloche-lien" wire:click="toutMarquerLu">Tout marquer comme lu</button>
                    @endif
                    <button type="button" class="iconbtn cloche-fermer" wire:click="fermer" aria-label="Fermer">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
                    </button>
                </span>
            </div>

            <div class="cloche-liste">
                @forelse ($lignes as $ligne)
                    <button type="button" class="cloche-ligne {{ $ligne['lue'] ? '' : 'nonlue' }}"
                            wire:click="ouvrir('{{ $ligne['id'] }}')" wire:key="cloche-{{ $ligne['id'] }}">
                        <span class="cloche-point" aria-hidden="true"></span>
                        <span class="cloche-corps">
                            <span class="cloche-nm">{{ $ligne['titre'] }}</span>
                            @if ($ligne['corps'] !== '')
                                <span class="cloche-mt">{{ $ligne['corps'] }}</span>
                            @endif
                            <span class="cloche-quand">{{ $ligne['quand'] }}</span>
                        </span>
                    </button>
                @empty
                    <p class="cloche-vide">Rien pour le moment. Vous serez prévenu ici à chaque nouveauté de votre espace.</p>
                @endforelse
            </div>
        </div>
    @endif
</div>