@php
    $currentSlug = request()->route('slug') ?? ($landingSlug ?? null);
@endphp

{{-- Expand/Collapse all --}}
@if(isset($categories) && $categories->isNotEmpty())
<div class="flex items-center gap-2 mt-6 mb-2" x-data>
    <button @click="$dispatch('sidebar-toggle', { open: true })"
            class="w-7 h-7 flex items-center justify-center rounded border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-secondary hover:text-white hover:border-secondary text-sm font-bold transition-colors">+</button>
    <span class="text-xl font-bold text-primary dark:text-primary-dark">|</span>
    <button @click="$dispatch('sidebar-toggle', { open: false })"
            class="w-7 h-7 flex items-center justify-center rounded border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-secondary hover:text-white hover:border-secondary text-sm font-bold transition-colors">-</button>
    <button @click="sidebarOpen = false"
            class="lg:hidden ms-auto p-1.5 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700"
            aria-label="Close menu">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
    </button>
</div>

{{-- Categories --}}
@php $defaultOpenCat = null;
    if (request()->routeIs('category.show')) {
        $catSlug = request()->route('slug');
        foreach ($categories as $cat) {
            if ($cat->translation($locale)?->slug === $catSlug) {
                $defaultOpenCat = $cat->id;
                break;
            }
        }
        if (!$defaultOpenCat && isset($excludedCategories)) {
            foreach ($excludedCategories as $cat) {
                if ($cat->translation($locale)?->slug === $catSlug) {
                    $defaultOpenCat = $cat->id;
                    break;
                }
            }
        }
    }
    if (!$defaultOpenCat) {
        foreach ($categories as $cat) {
            if ($cat->posts->contains(fn($p) => $p->translation($locale)?->slug === $currentSlug)) {
                $defaultOpenCat = $cat->id;
                break;
            }
        }
    }
    if (!$defaultOpenCat && isset($excludedCategories)) {
        foreach ($excludedCategories as $cat) {
            if ($cat->posts->contains(fn($p) => $p->translation($locale)?->slug === $currentSlug)) {
                $defaultOpenCat = $cat->id;
                break;
            }
        }
    }
@endphp
<ul x-data="{ openCats: { {{ $defaultOpenCat ? "$defaultOpenCat: true" : '' }} } }"
    @sidebar-toggle.window="if ($event.detail.open) { openCats = { @foreach($categories as $c){{ $c->id }}: true,@endforeach @if(isset($excludedCategories)) @foreach($excludedCategories as $c){{ $c->id }}: true,@endforeach @endif } } else { openCats = {} }"
    class="overflow-hidden bg-gray-100 border border-gray-300 rounded-lg shadow-md dark:border-gray-500 dark:bg-gray-700">
    @foreach($categories as $category)
        @php $catTrans = $category->translation($locale); @endphp
        @if($catTrans && $catTrans->slug)
        @php $isActiveCat = request()->routeIs('category.show') && request()->route('slug') === $catTrans->slug; @endphp
        <li class="border-b border-gray-300 dark:border-gray-500 last:border-b-0" :class="openCats[{{ $category->id }}] ? 'border-s-4 border-s-secondary dark:border-s-secondary' : ''">
            <button @click="if (openCats[{{ $category->id }}]) { openCats[{{ $category->id }}] = false } else { openCats = { {{ $category->id }}: true } }"
                    class="flex items-center justify-between w-full px-3 py-2 text-sm transition-colors cursor-pointer {{ $isActiveCat ? 'bg-secondary/15 text-primary font-semibold dark:text-primary-dark' : 'text-gray-700 dark:text-gray-200 hover:bg-secondary hover:text-white dark:hover:text-white' }}">
                <span class="flex-1 text-start font-medium">{{ $catTrans->name }}</span>
                <a href="{{ route('category.show', [$locale, $catTrans->slug]) }}"
                   class="p-1 rounded hover:bg-white/20 transition-colors"
                   title="{{ $catTrans->name }}"
                   @click.stop.prevent="sidebarOpen = false; sidebarNavigating = true; setTimeout(() => { window.location.href = $el.href }, 250)">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                    </svg>
                </a>
                <svg :class="openCats[{{ $category->id }}] ? 'rotate-90 rtl:rotate-90' : 'rtl:rotate-180'" class="w-4 h-4 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </button>
            <ul x-show="openCats[{{ $category->id }}]" x-collapse @if($category->id !== $defaultOpenCat) x-cloak @endif class="bg-white dark:bg-gray-800">
                @foreach($category->posts as $post)
                    @php $postTrans = $post->translation($locale); @endphp
                    @if($postTrans && $postTrans->slug)
                    @php $isActive = ($postTrans->slug === $currentSlug); @endphp
                    @php $hasSubPages = $isActive && count($sidebarSubPages ?? []) > 1; @endphp
                    <li class="border-t border-gray-200 dark:border-gray-600" @if($hasSubPages) x-data="{ subOpen: true }" @endif>
                        <div class="flex items-center {{ $hasSubPages ? 'border-s-4 border-lime-600 dark:border-lime-400' : '' }}">
                            <a href="{{ route('content.show', [$locale, $postTrans->slug]) }}"
                               class="flex-1 flex items-center gap-1.5 px-3 py-1.5 text-sm transition-colors {{ $isActive ? 'bg-secondary/15 text-primary font-semibold dark:text-primary-dark' : 'text-gray-500 dark:text-gray-400 hover:bg-secondary hover:text-white dark:hover:text-white' }}">
                                @if($post->is_cornerstone)
                                <span class="relative flex items-center justify-center w-3 h-3 shrink-0">
                                    <span class="absolute inline-flex w-full h-full rounded-full opacity-75 animate-ping bg-tertiary"></span>
                                    <span class="relative inline-flex w-2 h-2 rounded-full bg-tertiary"></span>
                                </span>
                                @else
                                <span class="w-3 text-center shrink-0">-</span>
                                @endif
                                {{ $postTrans->title }}
                            </a>
                            @if($hasSubPages)
                            <button @click="subOpen = !subOpen" class="px-2 self-stretch bg-secondary/15 text-lime-600 dark:text-lime-400 hover:text-lime-800 dark:hover:text-lime-200 transition-colors cursor-pointer" aria-label="Toggle sub-pages">
                                <svg :class="subOpen ? 'rotate-90 rtl:rotate-90' : 'rtl:rotate-180'" class="w-3 h-3 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                </svg>
                            </button>
                            @endif
                        </div>
                        @if($hasSubPages)
                        <ul x-show="subOpen" x-collapse class="bg-lime-50/50 dark:bg-lime-950/20 border-s-4 border-lime-600 dark:border-lime-400">
                            @foreach($sidebarSubPages as $subPage)
                            @php $isCurrentSubPage = ($subPage['page'] === ($sidebarCurrentPage ?? 1)); @endphp
                            <li class="border-t border-lime-200/60 dark:border-lime-800/40">
                                <a href="{{ route('content.show', [$locale, $postTrans->slug, 'page' => $subPage['page'] === 1 ? null : $subPage['page']]) }}"
                                   class="block ps-8 pe-3 py-1 text-xs transition-colors {{ $isCurrentSubPage ? 'bg-lime-100 dark:bg-lime-900/30 text-lime-700 dark:text-lime-300 font-semibold' : 'text-gray-500 dark:text-gray-400 hover:text-lime-700 dark:hover:text-lime-300 hover:bg-lime-100/50 dark:hover:bg-lime-900/20' }}">
                                    {{ $subPage['page'] }}. {{ $subPage['title'] }}
                                </a>
                            </li>
                            @endforeach
                        </ul>
                        @endif
                    </li>
                    @endif
                @endforeach
            </ul>
        </li>
        @endif
    @endforeach

    {{-- Excluded categories (admin only) --}}
    @if(isset($excludedCategories) && $excludedCategories->isNotEmpty())
        @foreach($excludedCategories as $category)
            @php $catTrans = $category->translation($locale); @endphp
            @if($catTrans && $catTrans->slug)
            @php $isActiveCat = request()->routeIs('category.show') && request()->route('slug') === $catTrans->slug; @endphp
            <li class="border-b border-orange-300 dark:border-orange-700 last:border-b-0" :class="openCats[{{ $category->id }}] ? 'border-s-4 border-s-orange-500 dark:border-s-orange-400' : ''">
                <button @click="if (openCats[{{ $category->id }}]) { openCats[{{ $category->id }}] = false } else { openCats = { {{ $category->id }}: true } }"
                        class="flex items-center justify-between w-full px-3 py-2 text-sm transition-colors cursor-pointer {{ $isActiveCat ? 'bg-orange-100 dark:bg-orange-900/40 text-orange-800 font-semibold dark:text-orange-200' : 'bg-orange-50 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300 hover:bg-orange-200 dark:hover:bg-orange-800/40' }}">
                    <span class="flex-1 text-start font-medium">{{ $catTrans->name }}</span>
                    <a href="{{ route('category.show', [$locale, $catTrans->slug]) }}"
                       class="p-1 rounded hover:bg-white/20 transition-colors"
                       title="{{ $catTrans->name }}"
                       @click.stop.prevent="sidebarOpen = false; sidebarNavigating = true; setTimeout(() => { window.location.href = $el.href }, 250)">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                    </a>
                    <svg :class="openCats[{{ $category->id }}] ? 'rotate-90 rtl:rotate-90' : 'rtl:rotate-180'" class="w-4 h-4 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </button>
                <ul x-show="openCats[{{ $category->id }}]" x-collapse x-cloak class="bg-orange-50/50 dark:bg-orange-950/20">
                    @foreach($category->posts as $post)
                        @php $postTrans = $post->translation($locale); @endphp
                        @if($postTrans && $postTrans->slug)
                        @php $isActive = ($postTrans->slug === $currentSlug); @endphp
                        <li class="border-t border-orange-200 dark:border-orange-800">
                            <a href="{{ route('content.show', [$locale, $postTrans->slug]) }}"
                               class="flex items-center gap-1.5 px-3 py-1.5 text-sm transition-colors {{ $isActive ? 'bg-orange-100 dark:bg-orange-900/40 text-orange-800 font-semibold dark:text-orange-200' : 'text-orange-600 dark:text-orange-400 hover:bg-orange-100 dark:hover:bg-orange-900/30 hover:text-orange-800 dark:hover:text-orange-200' }}">
                                @if($post->is_cornerstone)
                                <span class="relative flex items-center justify-center w-3 h-3 shrink-0">
                                    <span class="absolute inline-flex w-full h-full rounded-full opacity-75 animate-ping bg-orange-400"></span>
                                    <span class="relative inline-flex w-2 h-2 rounded-full bg-orange-400"></span>
                                </span>
                                @else
                                <span class="w-3 text-center shrink-0">-</span>
                                @endif
                                {{ $postTrans->title }}
                            </a>
                        </li>
                        @endif
                    @endforeach
                </ul>
            </li>
            @endif
        @endforeach
    @endif
</ul>
@endif

{{-- Pages --}}
@if(isset($pages) && $pages->isNotEmpty())
<ul class="mt-10 overflow-hidden bg-gray-100 border border-gray-300 rounded-lg shadow-md dark:border-gray-500 dark:bg-gray-700">
    @foreach($pages as $pg)
        @php $pgTrans = $pg->translation($locale); @endphp
        @if($pgTrans && $pgTrans->slug)
        @php $isPageActive = ($pgTrans->slug === $currentSlug); @endphp
        <li class="border-b border-gray-300 dark:border-gray-500 last:border-none">
            <a href="{{ route('content.show', [$locale, $pgTrans->slug]) }}"
               class="block w-full px-3 py-2 text-sm transition-colors {{ $isPageActive ? 'bg-secondary/15 text-primary font-semibold dark:text-primary-dark' : 'text-gray-600 dark:text-gray-200 hover:bg-secondary hover:text-white dark:hover:text-white' }}">
                {{ $pgTrans->title }}
            </a>
        </li>
        @endif
    @endforeach
</ul>
@endif

{{-- Search --}}
<div class="mt-6 mb-6">
    <form action="{{ route('search', $locale) }}" method="GET">
        <div class="relative">
            <input type="text" name="q" placeholder="{{ __('Search...') }}"
                   class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 text-sm ps-10 focus:border-primary focus:ring-primary">
            <svg class="absolute start-3 top-2.5 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
        </div>
    </form>
</div>

{{-- Contact & YouTube --}}
<div class="flex items-center justify-evenly mt-6 mb-16">
    <a href="{{ route('contact', $locale) }}"
       class="flex items-center justify-center w-12 h-12 bg-white border-2 border-tertiary rounded-lg shadow-md dark:bg-gray-700 hover:bg-secondary dark:hover:bg-secondary transition-colors"
       title="{{ __('Contact') }}">
        <img src="{{ asset('images/email.svg') }}" alt="Email" class="w-8 h-8">
    </a>
    <a href="https://www.youtube.com/channel/UC_WvUUtD3Ot84fhtSq0DM4Q/videos" target="_blank"
       class="flex items-center justify-center w-12 h-12 bg-white border-2 border-tertiary rounded-lg shadow-md dark:bg-gray-700 hover:bg-secondary dark:hover:bg-secondary transition-colors"
       title="YouTube">
        <img src="{{ asset('images/youtube.svg') }}" alt="YouTube" class="w-9 h-6">
    </a>
</div>