@props(['active', 'id'])

@php
    if (! empty($attributes['slides'])) {
        $slides = $attributes['slides'];
    }

    if (empty($attributes['slides'])) {
        $slides = '2';
    }
@endphp

<div data-swiper="{{ $slides }}" x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
    <div data-tabs-swiper>
        <ul data-tabs-swiper-wrapper {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center overflow-x-scroll lg:overflow-visible']) : $attributes }}>
            {!! $navs !!}
        </ul>
    </div>

    {!! $content !!}
</div>