<div class="tabs-vertical {{ $block->white_grid ? 'tabs-vertical--background-white' : '' }} block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}" data-controller="blocks/tabs-vertical">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="tabs-vertical__wrapper">
        <div class="tabs-vertical__content">
            @if($block->block_title)
                <div class="tabs-vertical__header">
                    <h2>@title($block->block_title)</h2>
                </div>
            @endif
            <div class="tabs-vertical__tab-container">
                <div class="tabs-vertical__tab-control tabs-vertical__tab-control--desktop">
                    <ul>
                        @foreach($block->cards as $card)
                            <li>
                                <a
                                    href="#"
                                    class="{{ $loop->first ? 'js-active' : '' }}"
                                    data-tab="{{ $loop->iteration }}"
                                    data-action="select-tab"
                                >@title($card->title)</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="tabs-vertical__tab-control tabs-vertical__tab-control--mobile 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-mobile="{{ $loop->iteration }}"
                                    data-action="select-tab"
                                >@title($card->title)</a>
                            </li>
                        @endforeach
                    </ul>
                    <button class="tabs-vertical__nav-prev" data-action="prev"></button>
                    <button class="tabs-vertical__nav-next" data-action="next"></button>
                </div>
                <div class="tabs-vertical__view" data-role="view">
                    @foreach($block->cards as $card)
                        <div class="tabs-vertical__card {{ $loop->first ? 'js-active' : '' }}" data-tab-content="{{ $loop->iteration }}">
                            @if($card->image)
                                <div class="tabs-vertical__card-image">
                                    <picture>
                                        <source srcset="{{ getMediaUrl($card->image->filename, '1145x700') }}.webp" type="image/webp">
                                        {!! getMediaImg($card->image, '1145x700', htmlentities($card->title)) !!}
                                    </picture>
                                </div>
                            @endif
                            <div class="tabs-vertical__card-text">
                                @if($card->subject)
                                    <h3>{{ $card->subject }}</h3>
                                @endif
                                @if($card->content)
                                    <div class="rich-content-system">
                                        {!! $card->content !!}
                                    </div>
                                @endif
                                {!! generateLink($card->cta, 'std-button std-button--orange') !!}
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
