@php
    $premiumInstructorsSingle = $instructors instanceof \Illuminate\Support\Collection
        ? $instructors->count() === 1
        : (is_countable($instructors) ? count($instructors) === 1 : false);
@endphp
<section class="home-sections section-premium section-skin-cream premium-instructors-section container reveal-up py-35 py-lg-35 px-12 px-lg-20{{ $premiumInstructorsSingle ? ' premium-instructors-section--single' : '' }}" aria-labelledby="premium-instructors-heading">
    <header class="premium-instructors-header mb-30 mb-lg-35">
        <div class="premium-instructors-head-row">
            <div class="premium-instructors-header__text">
                <p class="premium-instructors-finder-eyebrow mb-10">{{ trans('home.premium_home_instructors_finder_eyebrow') }}</p>
                <h2 id="premium-instructors-heading" class="section-title premium-instructors-title mb-10">{{ trans('home.instructors') }}</h2>
                <p class="premium-instructors-hint mb-0">{{ trans('home.instructors_hint') }}</p>
            </div>
        </div>
    </header>

    <div class="position-relative premium-instructors-frame{{ $premiumInstructorsSingle ? ' premium-instructors-frame--single' : '' }}">
        <div class="swiper premium-instructors-swiper{{ $premiumInstructorsSingle ? ' premium-instructors-swiper--single' : '' }}">
            <div class="swiper-wrapper py-15 py-lg-20">
                @foreach ($instructors as $instructor)
                    <div class="swiper-slide premium-instructor-slide">
                        <div class="premium-home-instructor-card-shell h-100">
                            @include('web.default.includes.home._premium_instructor_card', [
                                'instructor' => $instructor,
                                'avatarSize' => $premiumInstructorsSingle ? 240 : 120,
                                'bioTruncate' => $premiumInstructorsSingle ? 220 : 100,
                            ])
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination premium-instructors-pagination premium-swiper-dots-shell"></div>
            <div class="swiper-button-prev premium-instructors-prev swiper-btn premium-instructors-nav-btn">
                <i class="fa fa-angle-left" aria-hidden="true"></i>
            </div>
            <div class="swiper-button-next premium-instructors-next swiper-btn premium-instructors-nav-btn">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
        </div>
    </div>
</section>
