@if ($velocityMetaData && $velocityMetaData->slider)
    <div class="slider-container">
        <slider-component
            default-banner="{{ asset('/themes/' . $theme . '/assets/images/banner.webp') }}"
            :banners="{{ json_encode($sliderData) }}"
            :timeout="{{ $velocityMetaData->slider_timer }}">

            {{-- this is default content if js is not loaded --}}
            @if(! empty($sliderData))
                <img class="col-12 no-padding banner-icon" src="{{ env('CDN_URL') . $sliderData[0]['path'] }}" alt=""/>
            @else
                <img class="col-12 no-padding banner-icon" src="{{ asset('/themes/' . $theme . '/assets/images/banner.webp') }}" alt=""/>
            @endif
        </slider-component>
    </div>
@elseif ($velocityMetaData && $velocityMetaData->slider_video_path)
    <div class="slider-container">
        <div class="d-flex justify-content-center align-items-center">
            <video width="100%" height="auto" autoplay muted loop playsinline>
                <source src="{{ $velocityMetaData->sliderVideo()[0]['url'] }}" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>
@endif