@props([
    'tabs',
    'contents' => [],
    'active' => null,
    'justifyAlign' => 'start',
    'isVertical' => false,
])

@if($tabs)
    @php
        // Если содержимое не передано, создаем его из слотов
        if ($contents === []) {
            $tabs = collect($tabs)
                ->mapWithKeys(fn($value, $name) => [
                    Str::camel($name) => $value
                ])
                ->all();

            $contents = collect($__laravel_slots ?? [])
                ->mapWithKeys(fn($contentSlot, $name) => [
                    Str::camel($name) => $contentSlot
                ])
                ->filter(fn($contentSlot, $name) => array_key_exists($name, $tabs))
                ->all();
        }
    @endphp

        <!-- Tabs -->
    <div {{ $attributes->class(['tabs']) }}
         x-data="tabs(
            '{{ $active ?? (request()->has('tab') ? request()->tab : (isset($_GET['tab']) ? $_GET['tab'] : array_key_first($tabs))) }}',
            {{ $isVertical ? 'true' : 'false' }}
        )"
         x-init="() => {
            const hash = window.location.hash.replace('#', '');
            if (hash && $el.querySelector(`#${hash}`)) {
                activeTab = hash;
            }
        }"
    >
        <!-- Tabs Buttons -->
        <ul @class(['tabs-list', 'justify-' . $justifyAlign])>
            @foreach($tabs as $tabId => $tabData)
                <li class="tabs-item">
                    <!-- Используем <span> вместо <a> для предотвращения прокрутки -->
                    <span
                        x-ref="tab{{ $tabId }}"
                        @click.prevent="setActiveTab('{{ $tabId }}')"
                        :class="{ '_is-active': activeTab === '{{ $tabId }}' }"
                        class="tabs-button cursor-pointer"
                    >
                        {!! isset($tabData['icon']) ? $tabData['icon'] : '' !!} {{ $tabData['label'] }}
                    </span>
                </li>
            @endforeach
        </ul>
        <!-- END: Tabs Buttons -->

        <!-- Tabs content -->
        <div class="tabs-content">
            @foreach($contents as $tabId => $tabContent)
                <div
                    :class="activeTab === '{{ $tabId }}' ? 'block' : 'hidden'"
                    class="tab-panel"
                    id="{{ $tabId }}"
                    @set-active-tab="setActiveTab(`{{ $tabId }}`)"
                >
                    <div class="tabs-body">
                        {!! $tabContent !!}
                    </div>
                </div>
            @endforeach
        </div>
        <!-- END: Tabs content -->
    </div>
    <!-- END: Tabs -->
@endif