<div class="c-tabslider  @modifiers('c-tabslider')  js-tabslider">
    @if(!empty($slider_label) || !empty($slider_title))
        <div class="c-tabslider__heading">
            @if(!empty($slider_label))
                <p class="u-color-primary  u-ff-primary  u-fw-bold">{!! $slider_label !!}</p>
            @endif
            @if(!empty($slider_title))
            <h2 class="c-tabslider__heading-title">
                {{$slider_title}}
            </h2>
            @endif
        </div>
    @endif
    @if(isset($tabs) && $tabs->isNotEmpty())

        <div class="c-tabslider__nav  js-tabslider-nav">
            @unless(!empty($disableArrows))
                <button class="c-tabslider__arrow is-disabled js-tabslider-arrow-prev">
                    @include('site.components.icons.arrowLeft')
                </button>
            @endunless
            @foreach($tabs as $tab)
                <button class="c-tabslider__button  js-tabslider-trigger  @if($loop->iteration == 1) is-active @endif"
                        data-tab-id="{{$loop->iteration}}">
                    {{--                        <span class="c-tabslider__dot"></span>--}}
                    @if($loop->iteration === 1)
                        <div class="c-tabslider__dot">
                            @include('site.components.icons.searchIcon')
                        </div>
                    @elseif($loop->iteration === 2)
                        <div class="c-tabslider__dot">
                            @include('site.components.icons.calendar')
                        </div>
                    @else
                        <div class="c-tabslider__dot">
                            @include('site.components.icons.speechBubble')
                        </div>
                    @endif
                    <div class="c-tabslider__title" style="pointer-events: none;">
                        {!! $tab->title !!}
                    </div>
                </button>
            @endforeach
            @unless(!empty($disableArrows))
                <button class="c-tabslider__arrow is-right js-tabslider-arrow-next">
                    @include('site.components.icons.arrowRight')
                </button>
            @endunless
        </div>

        <div class="c-tabslider__container  js-tabslider-container">

            @foreach($tabs as $tab)

                <div class="c-tabslider__content  js-tabslider-content  @if($loop->iteration == 1) is-active @endif"
                     data-tab-id="{{$loop->iteration}}">

                    @if(isset($tabContent))
                        @include($tabContent, ['resource' => $tab, 'textImage' => $textImage ?? false])
                    @else
                        {{ dd('Provide a tab content view') }}
                    @endif


                </div>
            @endforeach

        </div>

    @endif

</div>