<div class="tabs-block {{ $block->white_grid ? 'tabs-block--background-white' : '' }} block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}" data-controller="blocks/tabs-block">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="tabs-block__wrapper">
        <div class="tabs-block__content">
            @if($block->block_title)
                <div class="tabs-block__header">
                    <h2>@title($block->block_title)</h2>
                </div>
            @endif
            <div class="tabs-block__tab-control swiper swiper-container" data-role="slider">
                <ul class="swiper-wrapper">
                    @foreach($block->cards as $card)
                        <li class="swiper-slide">
                            <a
                                href="#"
                                class="{{ $loop->first ? 'js-active' : '' }}"
                                data-tab="{{ $loop->iteration }}"
                                data-action="select-tab"
                            >@title($card->title)</a>
                        </li>
                    @endforeach
                </ul>
                <button class="tabs-block__nav-prev" data-action="prev"></button>
                <button class="tabs-block__nav-next" data-action="next"></button>
            </div>
            <div class="tabs-block__view" data-role="view">
                @foreach($block->cards as $card)
                    <div class="tabs-block__card {{ $loop->first ? 'js-active' : '' }} {{ empty($card->image) ? 'tabs-block--no-image' : ''}}" data-tab-content="{{ $loop->iteration }}">
                        @if($card->image)
                            <div class="tabs-block__card-image">
                                <picture>
                                    <source srcset="{{ getMediaUrl($card->image->filename, '600x') }}.webp" type="image/webp">
                                    {!! getMediaImg($card->image, '600x', htmlentities($card->title)) !!}
                                </picture>
                            </div>
                        @endif
                        <div class="tabs-block__card-text">
                            @if($card->subject)
                                <h3>{{ $card->subject }}</h3>
                            @endif
                            @if($card->content)
                                <div class="rich-content">
                                    {!! $card->content !!}
                                </div>
                            @endif
                            {!! generateLink($card->cta, 'std-button std-button--orange') !!}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
