@props([
    'categories' => collect(),
    'routeName',
    'locale',
    'activeId' => null,
    'count' => null,
    'depth' => 0,
    'allHref' => null,
    'allLabel' => null,
])

@php
    $isRoot = (int) $depth === 0;
    $allUrl = $allHref ?: route($routeName, ['locale' => $locale]);
    $allText = $allLabel ?: __('site.all_categories');
@endphp

<ul @class(['site-category-tabs-track' => $isRoot, 'site-category-tab-flyout-list' => ! $isRoot])>
    @if ($isRoot)
        <li class="site-category-tab-item">
            <a
                href="{{ $allUrl }}"
                @class([
                    'site-category-tab',
                    'site-category-tab--active' => ! $activeId,
                ])
                @if (! $activeId) x-ref="activeTab" @endif
            >
                <span>{{ $allText }}</span>
                @if ($count !== null)
                    <span class="site-category-tab-badge">{{ $count }}</span>
                @endif
            </a>
        </li>
    @endif

    @foreach ($categories as $category)
        @php
            $id = (int) $category->id;
            $hasChildren = $category->children && $category->children->isNotEmpty();
            $isActive = $activeId
                ? \App\Models\Category::treeContains($category, (int) $activeId)
                : false;
        @endphp
        <li
            class="site-category-tab-item"
            data-depth="{{ $depth }}"
            @mouseenter="onEnter({{ $id }}, {{ (int) $depth }})"
            @mouseleave="onLeave()"
        >
            <a
                href="{{ route($routeName, ['locale' => $locale, 'category_id' => $id]) }}"
                @class([
                    'site-category-tab',
                    'site-category-tab--active' => $isActive && (int) $activeId === $id,
                    'site-category-tab--in-path' => $isActive && (int) $activeId !== $id,
                    'site-category-tab--branch' => $hasChildren,
                ])
                @click="onTabClick($event, {{ $id }}, {{ (int) $depth }}, {{ $hasChildren ? 'true' : 'false' }})"
                @if ($hasChildren) :aria-expanded="isOpen({{ $id }}).toString()" @endif
                @if ($isActive && (int) $activeId === $id) x-ref="activeTab" @endif
            >
                <span>{{ locale_category_name($category) }}</span>
                @if ($hasChildren)
                    <span class="site-category-tab-chevron" aria-hidden="true"></span>
                @endif
            </a>
            @if ($hasChildren)
                <div
                    class="site-category-tab-flyout"
                    x-show="isOpen({{ $id }})"
                    x-cloak
                    @mouseenter="onEnter({{ $id }}, {{ (int) $depth }})"
                    @mouseleave="onLeave()"
                >
                    <x-site.category-tabs-branch
                        :categories="$category->children"
                        :route-name="$routeName"
                        :locale="$locale"
                        :active-id="$activeId"
                        :depth="((int) $depth) + 1"
                    />
                </div>
            @endif
        </li>
    @endforeach
</ul>