{{--
    Fil d'Ariane d'un élément (JOS-24), partagé entre le volet Aperçu et la
    page dédiée — auparavant dupliqué dans les deux vues, avec une divergence
    qui n'était pas cosmétique : la page dédiée n'affichait que le parent
    direct et perdait silencieusement les niveaux intermédiaires, donc on ne
    pouvait pas savoir où l'on se trouvait dans l'arborescence. Le rendu
    ci-dessous reprend le comportement complet de l'Aperçu ("⋯" survolable
    dès qu'il y a plus d'un ancêtre intermédiaire).

    `$mode` est le seul point où les deux surfaces restent irréductibles :
      - 'event' : le volet Aperçu navigue sans changer de page
                  (`wire:click="navigateTo(id)"`) ;
      - 'link'  : la page dédiée change d'URL (`href`).

    Le projet reste toujours un vrai lien : même dans l'Aperçu, il n'y a pas
    de mode "projet" atteignable par `navigateTo()`.
--}}
@props([
    'element',
    'ancestors',
    'mode' => 'link',
])

<nav {{ $attributes->class(['flex flex-wrap items-center gap-1 text-xs text-gray-500 dark:text-gray-400']) }}>
    {{-- Un élément pas encore rangé n'a pas de projet vers lequel pointer :
         `getUrl()` recevrait un `record` nul et lèverait. Le premier maillon
         devient alors un simple libellé — il dit où l'on est, pas où aller. --}}
    @if ($element->isUnfiled())
        <span class="text-gray-400 dark:text-gray-500">{{ $element::UNFILED_LABEL }}</span>
    @else
        <a
            href="{{ \App\Filament\App\Resources\Projects\ProjectResource::getUrl('view', ['record' => $element->project], panel: 'app') }}"
            class="hover:text-primary-600 hover:underline dark:hover:text-primary-400"
        >
            {{ $element->projectNameOrUnfiled() }}
        </a>
    @endif

    @if ($ancestors->isNotEmpty())
        <span class="text-gray-300 dark:text-gray-600">/</span>

        @if ($ancestors->count() > 1)
            @php($hidden = $ancestors->slice(0, -1))
            <span
                class="group relative inline-flex h-[18px] w-[22px] cursor-default items-center justify-center rounded border border-gray-200 text-[11px] tracking-widest text-gray-500 dark:border-white/10 dark:text-gray-400"
                title="{{ $hidden->pluck('title')->implode(' / ') }}"
            >
                ⋯
                <span
                    class="pointer-events-none absolute top-[calc(100%+8px)] left-1/2 z-10 -translate-x-1/2 rounded-lg bg-gray-950 px-2.5 py-2 text-left text-xs font-medium whitespace-nowrap text-white opacity-0 transition-opacity group-hover:opacity-100 dark:bg-white dark:text-gray-950"
                >
                    <ol class="list-decimal pl-4">
                        @foreach ($hidden as $ancestor)
                            <li>{{ $ancestor->title }}</li>
                        @endforeach
                    </ol>
                </span>
            </span>
            <span class="text-gray-300 dark:text-gray-600">/</span>
        @endif

        @if ($mode === 'event')
            <button
                type="button"
                wire:click="navigateTo({{ $ancestors->last()->id }})"
                class="hover:text-primary-600 hover:underline dark:hover:text-primary-400"
            >
                {{ $ancestors->last()->title }}
            </button>
        @else
            <a
                href="{{ \App\Filament\App\Resources\ProjectElements\ProjectElementResource::getUrl('view', ['record' => $ancestors->last()], panel: 'app') }}"
                class="hover:text-primary-600 hover:underline dark:hover:text-primary-400"
            >
                {{ $ancestors->last()->title }}
            </a>
        @endif
    @endif

    <span class="text-gray-300 dark:text-gray-600">/</span>
    <span class="font-semibold text-gray-950 dark:text-white">{{ $element->title }}</span>
</nav>