@php
    $isMega = ($isMega ?? false) === true;
    $collapseSub = ($collapseSub ?? true) === true;
@endphp

@foreach ($categories as $parent)
    @php
        $parentActive = $activeId === (int) $parent->id;
        $hasChildren = $parent->children && $parent->children->count() > 0;
        $childActive = $hasChildren && $parent->children->contains(fn ($c) => (int) $c->id === $activeId);
        $parentLabel = locale_category_name($parent);
    @endphp
    <li @class(['eca-category-tree-item', 'eca-category-tree-item--mega' => $isMega])>
        <div class="eca-category-tree-row">
            @if ($hasChildren && ! $isMega)
                <button
                    type="button"
                    class="eca-category-tree-toggle"
                    @click="toggle({{ $parent->id }})"
                    :class="{ 'eca-category-tree-toggle--open': isExpanded({{ $parent->id }}) }"
                    :aria-expanded="isExpanded({{ $parent->id }}).toString()"
                    aria-label="{{ $parentLabel }}"
                >
                    <x-site.svg-icon name="back" class="eca-category-tree-toggle-icon h-3.5 w-3.5" flip />
                </button>
            @endif
            <a
                href="{{ route('site.items.index', ['locale' => $locale, 'category_id' => $parent->id]) }}"
                @class([
                    'eca-category-tree-link',
                    'is-active' => $parentActive || $childActive,
                    'eca-category-tree-link--branch' => $hasChildren && ! $isMega,
                    'eca-category-tree-link--mega-parent' => $isMega && $hasChildren,
                    'eca-category-tree-link--mega-parent-only' => $isMega && ! $hasChildren,
                ])
                @if (($closeOnNavigate ?? false) === true)
                    @click="$dispatch('site-header:close-mega')"
                @endif
            >
                <span class="eca-category-tree-link-text">{{ $parentLabel }}</span>
                @if ($hasChildren && ! $isMega)
                    <span class="eca-category-tree-count">{{ $parent->children->count() }}</span>
                @endif
            </a>
        </div>
        @if ($hasChildren)
            <ul @class([
                'eca-category-tree-sub',
                '' => $isMega,
            ])
                @unless ($isMega)
                    x-show="isExpanded({{ $parent->id }})"
                    @if ($collapseSub) x-collapse @endif
                    x-cloak
                @endunless
            >
                @foreach ($parent->children as $child)
                    <li>
                        <a
                            href="{{ route('site.items.index', ['locale' => $locale, 'category_id' => $child->id]) }}"
                            @class([
                                'eca-category-tree-sublink',
                                'eca-category-tree-sublink--mega' => $isMega,
                                'is-active' => $activeId === (int) $child->id,
                            ])
                            @if (($closeOnNavigate ?? false) === true)
                                @click="$dispatch('site-header:close-mega')"
                            @endif
                        >
                            {{ locale_category_name($child) }}
                        </a>
                    </li>
                @endforeach
            </ul>
        @endif
    </li>
@endforeach