@props([
    'categories' => [], 'components' => [], 'rowMax' => 50, 'hiddenCategories' => [], 'validationKeys' => [],
])

<div
        @if ($attributes->has('wire:model'))
            x-data="{tab: @entangle($attributes->wire('model'))}"
        @else
            x-data="{tab: 0}"
        @endif
        x-init="$focus.focus($focus.focusables()[tab]);"
        x-cloak
>
    <div class="flex flex-col py-2">
        @php
            $show_categories = Arr::where($categories, fn($category, $index) => !in_array($index, $hiddenCategories));
        @endphp
        {{--        @foreach(collect($show_categories)->chunk($rowMax) as $chunk_categories)--}}
        <div class="inline-flex pb-1 flex-col w-full whitespace-nowrap overflow-auto max-h-52 rounded-md md:w-auto md:flex-row"
             role="group">
            @foreach($show_categories as $index => $category)
                @php
                    $component = data_get($components, $index);
                    $hasError = false;
                @endphp
                @foreach(data_get($validationKeys, $index, []) as $name)
                    @error($name)
                    @php
                        $hasError = true;
                    @endphp
                    @enderror
                @endforeach
                <button type="button"
                        @click="tab = {{$index}};$wire.dispatchSelf('horizontal-tab-clicked',{index: {{$index}} });"
                        @click.debounce.1000ms="storeCurrentUrl()"
                        @if($component) wire:click="$dispatchTo('{{ $component }}', 'startRender')" @endif
                        :class="tab === {{$index}} ? 'bg-primary-200' : 'bg-white'"
                        class="
                            px-4 py-2 text-sm font-medium text-gray-900 border border-gray-200
                            hover:bg-primary-50 focus:z-10
                            @if($loop->first) md:rounded-br-none md:rounded-l-lg
                            @elseif($loop->last) md:rounded-bl-none md:rounded-r-lg
                            @else border-x @endif
                            @if($hasError) text-red-400 @endif
                        "
                >
                    {{$category}}
                </button>
            @endforeach
        </div>
        {{--        @endforeach--}}
        <div>
            @for($i = 0; $i < count($categories); $i++)
                <div x-show="tab === {{$i}}">
                    {{ ${"slot_{$i}"} }}
                </div>
            @endfor
        </div>
    </div>
</div>