@if (isset($video) && count($video) > 0)
    <div class="col-12 p-5 ml-0 mr-0 mt-5 video-home-bg mob-p-10">
        <div class="row">
            <div class="container">

                <h3 class="category-heading mb-4 text-white font-1">VID<span class="red-color">EOS</span><small
                        class="view-more text-white"><a href="{{ url('videos') }}" class="text-white">VIEW <span
                                class="red-color">MORE</span></a> <i class="fas fa-chevron-right ml-2 red-color"></i>
                    </small> </h3>

                <div class="row">
                    <div class="col-md-7 col-12 mob-p-0">
                        <iframe class="video-banner-home"
                            src="https://www.youtube.com/embed/{{ $video[0]['videoId'] }}"></iframe>
                    </div>
                    <div class="col-md-5">
                        <h2 class="mt-3 font-2-bold text-white" style="line-height: 50px;">{!! $video[0]['title'] !!}
                        </h2>
                        <p><a href="{{ url('videos') . '/' . Str::slug($video[0]['title']) . '-' . $video[0]['id'] . '.html' }}"
                                class="btn video-btn waves-effect waves-light text-white">VIEW</a></p>
                    </div>
                </div>
            </div>

        </div>


        <div class="row mt-3">

            <div class="col-md-12 p-0">

                <div id="mixedSlider4" class="">
                    <div class="MS-content">
                        @foreach ($video as $value)
                            <div class="item">
                                <!-- Card -->
                                <div class="card">

                                    <!-- Card image -->
                                    <span class="video-icon-home mb-2"><i
                                            class="fas fa-play-circle text-danger fa-2x"></i></span>
                                    <a
                                        href="{{ url('') }}/videos/{!! Str::slug($value['title']) !!}-{{ $value['id'] }}.html"><img
                                            class="card-img-top" src="{{ $value['image_url'] }}" alt="Card image cap"
                                            style="height:200px;"></a>

                                    <!-- Card content -->
                                    <div class="card-body">


                                        <h6><strong><a
                                                    href="{{ url('') }}/videos/{!! Str::slug($value['title']) !!}-{{ $value['id'] }}.html"
                                                    class="text-dark">{{ $value['title'] }}</a></strong></h6>
                                        <a href="{{ url('videos') . '/' . Str::slug($value['title']) . '-' . $value['id'] . '.html' }}"
                                            class="btn btn-yt pl-2 pr-2 pt-1 pb-1 font-1 rounded ml-0 waves-effect waves-light position-absolute r-20 b-20"><i
                                                class="fab fa-youtube text-white mr-2"></i> VIEW</a>
                                        <!--                                    <small class="text-time mt-1 position-absolute r-20 b-20"><strong><a href="#" class="text-danger">VISHNU KUMAR</a></strong></small>-->
                                    </div>

                                </div>
                                <!-- Card -->
                            </div>
                        @endforeach

                    </div>
                    <div class="MS-controls">
                        <button class="MS-left"><a class="btn-floating btn-lg bg-white waves-effect waves-light"><i
                                    class="fas fa-chevron-left text-danger"></i></a></button>

                        <button class="MS-right"><a class="btn-floating btn-lg bg-white waves-effect waves-light"><i
                                    class="fas fa-chevron-right text-danger"></i></a></button>
                    </div>
                </div>
            </div>

        </div>

    </div>
@endif