@if(isset($sub->subcomponents))
    <div class="container">
        <div class="row">
            @foreach($sub->subcomponents as $subitem)
                @php
                 $video_details = getVidDetails($subitem->type, $subitem->url, 1);
                @endphp

                @if( isset($video_details->title) && isset($video_details->thumb) && isset($video_details->url) )
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                        <a class="youtube-link" data-toggle="modal" data-target="#video-popup-modal-{{$item->id}}-{{$subitem->id ?? $loop->iteration }}">
                            <div class="youtube-thumbnail-wrapper">
                                <img src="{{$video_details->thumb}}" class="youtube-thumbnail" alt="{{ env('APP_NAME') }} Video Gallery {{$item->id}}-{{$subitem->id ?? $loop->iteration }}">
                            </div>
                            <h4 class="youtube-title mb-0 py-4">
                                {{$video_details->title}}
                            </h4>
                        </a>
                    </div>

                    <div class="hero-video-modal">
                        <div class="modal fade" id="video-popup-modal-{{$item->id}}-{{$subitem->id ?? $loop->iteration }}" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-body bg-black">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-id="#video-popup-modal-{{$item->id}}-{{$subitem->id ?? $loop->iteration }}"></button>
                                        <!-- 16:9 aspect ratio -->
                                        <div class="embed-responsive embed-responsive-16by9">
                                            <iframe src="" data-src="https://{{ $video_details->url }}?rel=0&autoplay=1&mute=1" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>
                                       </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
@endif