@php
    $items = $course->for_items()->get();
    $defaultIcons = ['users', 'award', 'book-open', 'target', 'briefcase', 'heart'];
@endphp
@if($items->count() > 0)
<section class="cp-section cp-bento cp-animate" id="cp-for-whom">
    <div class="container">
        @include('web.default.includes.premium.section_header', [
            'title' => trans('webinars.landing_for_title'),
            'subtitle' => trans('webinars.landing_for_subtitle'),
            'align' => 'center',
            'class' => 'mb-40 cp-section-title-wrap',
        ])
        <div class="cp-bento__grid">
            @foreach($items as $index => $item)
                @php
                    $tone = ($index % 6) + 1;
                    $bg = !empty($item->background_color) ? $item->background_color : null;
                    $icon = !empty($item->icon) ? $item->icon : ($defaultIcons[$index % count($defaultIcons)]);
                    $imageUrl = $item->getImage();
                @endphp
                <article class="cp-bento__cell">
                    <div class="cp-bento__card cp-bento__card--tone-{{ $tone }}" @if($bg) style="background: {{ $bg }};" @endif>
                        <div class="cp-bento__visual">
                            @if(!empty($imageUrl))
                                @include('web.default.course.landing.image_thumb', [
                                    'src' => $imageUrl,
                                    'alt' => $item->description,
                                    'size' => 64,
                                    'class' => 'cp-bento__img',
                                ])
                            @else
                                <span class="cp-bento__icon" aria-hidden="true">
                                    <i data-feather="{{ $icon }}" width="28" height="28"></i>
                                </span>
                            @endif
                        </div>
                        <p class="cp-bento__desc">{{ $item->description }}</p>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>
@endif
