@php
    $alertesNonLues = app(\App\Services\CentreAlertes::class)->compteNonLues(auth()->user());
@endphp

{{-- Le compte est rendu par le serveur, puis rafraîchi par « alertes.js ».
     Sans JavaScript, la cloche reste juste, seulement moins vive. --}}
<a href="{{ route('alertes.index') }}"
   data-cloche
   data-compteur-url="{{ route('alertes.compteur') }}"
   data-alertes="{{ $alertesNonLues }}"
   class="relative rounded-lg px-2 py-1 font-medium hover:bg-white/15 focus:ring-2 focus:ring-white focus:outline-none"
   aria-label="{{ $alertesNonLues === 0
       ? 'Alertes : aucune non lue'
       : 'Alertes : '.$alertesNonLues.' non lue(s)' }}">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
         class="size-5" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round"
              d="M15 17h5l-1.4-1.4A2 2 0 0 1 18 14.2V11a6 6 0 1 0-12 0v3.2a2 2 0 0 1-.6 1.4L4 17h5m6 0a3 3 0 1 1-6 0m6 0H9"></path>
    </svg>

    <span data-cloche-pastille
          @class([
              'absolute -top-0.5 -right-0.5 min-w-4 rounded-full bg-red-600 px-1 text-center text-[11px] leading-4 font-semibold text-white',
              'hidden' => $alertesNonLues === 0,
          ])>{{ $alertesNonLues > 99 ? '99+' : $alertesNonLues }}</span>
</a>