@if (count($sliders) > 0 && $sliders->loadMissing('metadata'))
    <div class="ps-home-banner ps-home-banner--1 hbl-hero-showcase">
        <div class="ps-container">
            @php $ads = get_ads_keys_from_shortcode($shortcode); @endphp
            @if (is_plugin_active('ads') && (AdsManager::locationHasAds('top-slider-image-1') || AdsManager::locationHasAds('top-slider-image-2') || count($ads)))
                <div class="ps-section__left">
                    <div class="ps-carousel--nav-inside owl-slider" data-owl-auto="true" data-owl-loop="true"
                        data-owl-speed="5000" data-owl-gap="0" data-owl-nav="true"
                        data-owl-dots="true" data-owl-item="1" data-owl-item-xs="1"
                        data-owl-item-sm="1" data-owl-item-md="1" data-owl-item-lg="1"
                        data-owl-duration="1000" data-owl-mousedrag="off"
                        data-owl-animate-in="fadeIn" data-owl-animate-out="fadeOut">
                        @foreach($sliders as $slider)
                            <div class="ps-banner bg--cover hbl-hero-slide">
                                @php
                                    $img = RvMedia::getImageUrl($slider->image, null, false, RvMedia::getDefaultImage());
                                    $tabletImage = $slider->getMetaData('tablet_image', true) ?: $img;
                                    $mobileImage = $slider->getMetaData('mobile_image', true) ?: $tabletImage;
                                @endphp
                                <picture>
                                    <source srcset="{{ $img }}" media="(min-width: 1200px)" />
                                    <source srcset="{{ RvMedia::getImageUrl($tabletImage) }}" media="(min-width: 768px)" />
                                    <source srcset="{{ RvMedia::getImageUrl($mobileImage) }}" media="(max-width: 767px)" />
                                    <img src="{{ $img }}" alt="{{ $slider->title ?: __('Slider') }}" loading="eager" />
                                </picture>
                                <div class="hbl-hero-slide__content">
                                    @if ($slider->title)
                                        <h2>{{ $slider->title }}</h2>
                                    @endif
                                    @if ($slider->description)
                                        <p>{{ $slider->description }}</p>
                                    @endif
                                    @if ($slider->link)
                                        <span class="hbl-hero-slide__cta">
                                            {{ __('Shop now') }}
                                            <i class="icon-arrow-right"></i>
                                        </span>
                                    @endif
                                </div>
                                @if ($slider->link)
                                    <a class="ps-banner__overlay" href="{{ url($slider->link) }}" title="{{ $slider->title }}"></a>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="ps-section__right">
                    @if (! empty($ads))
                        @foreach ($ads as $key)
                            <div class="ps-collection ps-collection--hero-tile">
                                {!! AdsManager::displayAds($key, [
                                    'class' => 'hbl-hero-side-tile hbl-home-category-ad hbl-home-category-ad--has-label',
                                    'data-show-label' => '1',
                                ]) !!}
                            </div>
                        @endforeach
                    @else
                        @if (AdsManager::locationHasAds('top-slider-image-1'))
                            <div class="ps-collection">
                                {!! AdsManager::display('top-slider-image-1') !!}
                            </div>
                        @endif
                        @if (AdsManager::locationHasAds('top-slider-image-2'))
                            <div class="ps-collection">
                                {!! AdsManager::display('top-slider-image-2') !!}
                            </div>
                        @endif
                    @endif
                </div>
            @else
                <div class="ps-carousel--nav-inside owl-slider" data-owl-auto="true" data-owl-loop="true" data-owl-speed="5000" data-owl-gap="0" data-owl-nav="true" data-owl-dots="true" data-owl-item="1" data-owl-item-xs="1" data-owl-item-sm="1" data-owl-item-md="1" data-owl-item-lg="1" data-owl-duration="1000" data-owl-mousedrag="off" data-owl-animate-in="fadeIn" data-owl-animate-out="fadeOut">
                    @foreach($sliders as $slider)
                        <div class="ps-banner bg--cover" data-background="{{ RvMedia::getImageUrl($slider->image, null, false, RvMedia::getDefaultImage()) }}">
                            @if ($slider->link)
                                <a class="ps-banner__overlay" href="{{ url($slider->link) }}" title="{{ $slider->title }}"></a>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
@endif