@push('additional_styles')
    <link rel="stylesheet" href="{{asset('canvas/css/swiper.css')}}">
@endpush

<section id="slider" class="slider-element slider-parallax swiper_wrapper min-vh-60 min-vh-md-90 include-header"
    data-autoplay="7000" data-speed="650" data-loop="true">
    <div class="slider-inner">

        <div class="swiper swiper-parent">
            <div class="swiper-wrapper">
                @foreach ($raffles as $raffle)
                    @foreach ($raffle->media as $media)
                    <a href="{{route('raffle-details', $raffle->uuid)}}" class="swiper-slide dark">
                        <div class="container">
                            <div class="slider-caption slider-caption-center">
                                <h2 data-animate="fadeInUp">{{$raffle->title}}</h2>
                            </div>
                        </div>
                        @if (pathinfo($media->file, PATHINFO_EXTENSION) == 'mp4')
                            <div class="video-wrap no-placeholder">
                                <video preload="auto" loop autoplay muted playsinline>
                                    <source src='{{env('AWS_URL')}}{{$media->file}}' type='video/mp4'>
                                </video>
                                <div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
                            </div>
                        @else 
                            <div class="swiper-slide-bg" style="background-image: url('{{env('AWS_URL')}}{{$media->file}}');"></div>
                        @endif
                    </a>
                    @endforeach
                @endforeach
            </div>
            <div class="slider-arrow-left"><i class="uil uil-angle-left-b"></i></div>
            <div class="slider-arrow-right"><i class="uil uil-angle-right-b"></i></div>
            <div class="slide-number">
                <div class="slide-number-current"></div><span>/</span>
                <div class="slide-number-total"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

    </div>
</section>