<div class="logos-slider block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}" data-controller="blocks/logos-slider">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="logos-slider__divider" data-aos="growline" data-aos-delay="0"></div>
    <div class="logos-slider__wrapper">
        @if($block->block_title)
            <div class="logos-slider__header" data-aos="fade-up" data-aos-delay="200">
                <h2>@title($block->block_title)</h2>
            </div>
        @endif
        <div class="logos-slider__logos swiper swiper-container logos-slider__logos--desktop" data-role="slider">
            <div class="swiper-wrapper">
                @foreach($block->blockGalleryItems as $logo)
                    @if($loop->index % 8 === 0)
                        <div class="swiper-slide">
                    @endif
                    @if($loop->index % 4 === 0)
                        <div class="logos-slider__logos-row">
                    @endif
                        @if($logo->link_url)
                            <a href="{{ $logo->link_url }}" target="_blank" class="logos-slider__logo" data-aos="fade-up" data-aos-delay="300">
                        @else
                            <div class="logos-slider__logo" data-aos="fade-up"  data-aos-delay="300">
                        @endif
                            <div class="logos-slider__logo-image">
                                <picture>
                                    <source srcset="{{ getMediaUrl($logo->mediaItem->filename, '400x') }}.webp" type="image/webp">
                                    <img src="{{ getMediaUrl($logo->mediaItem->filename, '400x') }}" alt="{{ htmlentities($logo->subtitle) }}"  loading="lazy"/>
                                </picture>
                            </div>
                            @if($logo->caption)
                                <span class="logos-slider__logo-caption">{{ $logo->caption }}</span>
                            @endif
                        @if($logo->link_url)
                            </a>
                        @else
                            </div>
                        @endif
                    @if($loop->iteration % 4 === 0 || $loop->count === $loop->iteration)
                        </div>
                    @endif
                    @if($loop->iteration % 8 === 0 || $loop->count === $loop->iteration)
                        </div>
                    @endif
                @endforeach
            </div>
            @if($block->blockGalleryItems->count() > 8)
                @include('frontend.templates.components.swiper-navigation', ['count' => ceil($block->blockGalleryItems->count() / 8)])
            @endif
        </div>
        <div class="logos-slider__logos swiper swiper-container logos-slider__logos--mobile" data-role="slider-mobile">
            <div class="swiper-wrapper">
                @foreach($block->blockGalleryItems as $logo)
                    @if($loop->index % 2 === 0)
                        <div class="swiper-slide">
                    @endif
                        @if($logo->link_url)
                            <a href="{{ $logo->link_url }}" target="_blank" class="logos-slider__logo" data-aos="fade-up">
                        @else
                            <div class="logos-slider__logo" data-aos="fade-up">
                        @endif
                            <div class="logos-slider__logo-image">
                                <picture>
                                    <source srcset="{{ getMediaUrl($logo->mediaItem->filename, '400x') }}.webp" type="image/webp">
                                    {!! getMediaImg($logo->mediaItem, '400x', htmlentities($logo->subtitle), null, true) !!}
                                </picture>
                            </div>
                            @if($logo->caption)
                                <span class="logos-slider__logo-caption">{{ $logo->caption }}</span>
                            @endif
                        @if($logo->link_url)
                            </a>
                        @else
                            </div>
                        @endif
                    @if($loop->iteration % 2 === 0 || $loop->count === $loop->iteration)
                        </div>
                    @endif
                @endforeach
            </div>
            @if($block->blockGalleryItems->count() > 2)
                @include('frontend.templates.components.swiper-navigation', ['count' => ceil($block->blockGalleryItems->count() / 2)])
            @endif
        </div>
    </div>
</div>
