<section class="home-sections section-premium section-skin-cream premium-graduate-videos-section container reveal-up py-40 py-lg-50 px-12 px-lg-20" aria-labelledby="premium-graduate-videos-heading">
    <header class="premium-graduate-videos-header mb-30 mb-lg-35">
        <div class="premium-graduate-videos-head-row">
            <div class="premium-graduate-videos-header__text">
                <p class="premium-graduate-videos-eyebrow mb-10">{{ trans('home.premium_graduate_videos_eyebrow') }}</p>
                <h2 id="premium-graduate-videos-heading" class="section-title premium-graduate-videos-title mb-10">{{ trans('home.premium_graduate_videos_heading') }}</h2>
                <p class="premium-graduate-videos-sub mb-0">{{ trans('home.premium_graduate_videos_sub') }}</p>
            </div>
            <a href="{{ route('graduateVideos.index') }}" class="premium-graduate-videos-cta d-inline-flex align-items-center flex-shrink-0 text-decoration-none mt-20 mt-lg-0">
                <span>{{ trans('home.premium_graduate_videos_cta') }}</span>
                <span class="premium-graduate-videos-cta__chev" aria-hidden="true"><i class="fa fa-angle-left"></i></span>
            </a>
        </div>
    </header>

    <div class="position-relative premium-graduate-videos-frame">
        <div class="swiper premium-graduate-videos-swiper">
            <div class="swiper-wrapper">
                @foreach ($graduateVideos as $video)
                    <div class="swiper-slide premium-graduate-videos-slide">
                        <a href="{{ route('graduateVideos.show', ['graduate_video' => $video]) }}" class="premium-gv-card text-reset text-decoration-none d-block h-100">
                            <div class="premium-gv-card__thumb">
                                @if ($video->thumbnailUrl())
                                    <img src="{{ $video->thumbnailUrl() }}" alt="{{ $video->title }}" loading="lazy" decoding="async" class="premium-gv-card__img img-cover">
                                @else
                                    <div class="premium-gv-card__placeholder">
                                        <i class="fa fa-video-camera" aria-hidden="true"></i>
                                    </div>
                                @endif
                                <span class="premium-gv-card__shade" aria-hidden="true"></span>
                                <span class="premium-gv-card__play" aria-hidden="true">
                                    <span class="premium-gv-card__play-inner"><i class="fa fa-play"></i></span>
                                </span>
                            </div>
                            <div class="premium-gv-card__meta">
                                <h3 class="premium-gv-card__title">{{ $video->title }}</h3>
                                @if ($video->durationFormatted())
                                    <span class="premium-gv-card__dur">{{ $video->durationFormatted() }}</span>
                                @endif
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination premium-graduate-videos-pagination premium-gv-pagination premium-swiper-dots-shell"></div>
            <div class="swiper-button-prev premium-gv-prev swiper-btn premium-gv-nav-btn">
                <i class="fa fa-angle-left" aria-hidden="true"></i>
            </div>
            <div class="swiper-button-next premium-gv-next swiper-btn premium-gv-nav-btn">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
        </div>
    </div>
</section>
