@props([
    'isThumbnail',
    'rowsCount' => 2,
])

@php
    $gridClasses = $isThumbnail
        ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4'
        : 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 3xl:grid-cols-7';

    // Render enough items for largest possible layout
    $limit = 24;

    $view = $isThumbnail ? 'thumbnail' : 'poster';
@endphp

<div
    class="episode-grid grid {{ $gridClasses }}"
    data-rows="{{ $rowsCount }}"
>
    @foreach ($episodes->take($limit) as $ep)
        @php
            $episode = isset($popularView)
                ? $ep->episode
                : $ep;
        @endphp

        <div class="episode-item p-1">
            <x-episode-cover
                :episode="$episode"
                :view="$view"
            />
        </div>
    @endforeach
</div>