{{-- <input type="hidden" id="carousel_id" value="{{ $carousel_id }}"> --}}
<div id="{{ $carousel_id }}">
    @forelse ($videos as $video)
        <div class="px-2">
            @include('video.layout.card', ['video' => $video, 'winner' => $winner ?? false])
        </div>
    @empty
        @include('video.layout.empty', ['title' => __('video.notFoundSearch.title'), 'description' => __('video.notFoundSearch.description')])
    @endforelse
</div>

@push('scripts')
<script>
$(document).ready(function(){
    var carousel_id = "{{$carousel_id}}";
    $('#'+carousel_id).slick({
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 1,
        dots: false,
        centerMode: true,
        focusOnSelect: false,
        arrows: true,
        autoplay: false,
        draggable: false,
        responsive: [
            {
                breakpoint: 1200,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 1,
                },
            },
            {
                breakpoint: 992,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                },
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                },
            },
            {
                breakpoint: 576,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                },
            },
        ],
    });
});
</script>
@endpush