{{-- Mobile navigation node: children collapse into a disclosure instead of a flyout. --}}
@php($hasChildren = $item->relationLoaded('children') && $item->children->isNotEmpty())

<div class="border-b border-border last:border-0" @if ($hasChildren) x-data="{ open: false }" @endif>
    <div class="flex items-center justify-between gap-2">
        <a href="{{ $item->resolvedUrl() }}" target="{{ $item->target }}"
           @class([
               'flex-1 px-2 py-3.5 text-sm font-medium',
               'text-primary' => $item->isActive(),
               'text-text' => ! $item->isActive(),
           ])>{{ $item->label }}</a>

        @if ($hasChildren)
            <button type="button" @click="open = !open" class="rounded-lg p-2.5 text-text-muted transition hover:bg-surface-muted"
                    :aria-expanded="open" aria-label="{{ __('Toggle :label submenu', ['label' => $item->label]) }}">
                <x-icon name="chevron-down" class="size-4 transition-transform" ::class="open && 'rotate-180'" />
            </button>
        @endif
    </div>

    @if ($hasChildren)
        <div x-show="open" x-collapse x-cloak class="pb-3 pl-3">
            @foreach ($item->children as $child)
                <a href="{{ $child->resolvedUrl() }}" target="{{ $child->target }}"
                   class="block px-2 py-2.5 text-sm text-text-secondary">{{ $child->label }}</a>

                @if ($child->relationLoaded('children') && $child->children->isNotEmpty())
                    <div class="ml-2 border-l border-border pl-3">
                        @foreach ($child->children as $grandchild)
                            <a href="{{ $grandchild->resolvedUrl() }}" target="{{ $grandchild->target }}"
                               class="block px-2 py-2 text-sm text-text-muted">{{ $grandchild->label }}</a>
                        @endforeach
                    </div>
                @endif
            @endforeach
        </div>
    @endif
</div>