{{-- Left-column category navigation (Ozon-style): back-links up the tree,
     current category, and its children (or siblings for a leaf), collapsed after N.
     Вид — панель «Категории» со страницы продавца из макета редизайна. --}}
@php
    $navItems = $children->isNotEmpty() ? $children : $siblings;
    $currentInList = $children->isEmpty() && $siblings->isNotEmpty(); // leaf → current highlighted inside the siblings list
    $collapseAfter = 8;
    $indent = $ancestors->isNotEmpty() ? 'ml-3' : '';
@endphp
<div class="rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-2">
    <div class="px-3 py-2 text-[11px] font-bold uppercase tracking-[1.2px] text-[var(--color-disabled)]">Категории</div>

    {{-- Back-links up the tree --}}
    @foreach ($ancestors as $ancestor)
        <a href="{{ route('catalog.category', $ancestor->path) }}"
           class="flex items-center gap-1 rounded-[var(--radius-md)] px-3 py-1.5 text-[13px] text-[var(--color-muted)] transition hover:text-[var(--color-primary)]">
            <i data-lucide="chevron-left" class="h-3.5 w-3.5 shrink-0"></i>
            <span>{{ $ancestor->name }}</span>
        </a>
    @endforeach

    {{-- Current category (own header only when it has children of its own) --}}
    @unless ($currentInList)
        <div class="rounded-[var(--radius-md)] bg-[var(--color-primary-soft)] px-3 py-2 text-[13.5px] font-bold text-[var(--color-primary)]">
            {{ $category->name }}
        </div>
    @endunless

    {{-- Children (or siblings for a leaf), collapsed after N --}}
    @if ($navItems->isNotEmpty())
        <div x-data="{ expanded: false }" class="{{ $currentInList ? '' : $indent }} mt-0.5 flex flex-col">
            @foreach ($navItems as $i => $item)
                @php($isCurrent = $currentInList && $item->id === $category->id)
                <a href="{{ route('catalog.category', $item->path) }}"
                   @if ($i >= $collapseAfter && ! $isCurrent) x-show="expanded" x-cloak @endif
                   class="rounded-[var(--radius-md)] px-3 py-[7px] text-[13.5px] leading-snug transition {{ $isCurrent ? 'bg-[var(--color-primary-soft)] font-bold text-[var(--color-primary)]' : 'text-[var(--color-slate)] hover:bg-[var(--color-canvas)]' }}">
                    {{ $item->name }}
                </a>
            @endforeach
            @if ($navItems->count() > $collapseAfter)
                <button type="button" @click="expanded = !expanded"
                        class="px-3 py-[7px] text-left text-[13px] font-semibold text-[var(--color-primary)] transition hover:text-[var(--color-primary-dark)]">
                    <span x-show="!expanded">Показать все ({{ $navItems->count() }})</span>
                    <span x-show="expanded" x-cloak>Свернуть</span>
                </button>
            @endif
        </div>
    @endif
</div>