@props(['isThumbnail'])

@php
    // Render enough items for largest possible layout
    $limit = 16;

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

@if ($isThumbnail)
<div
  class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5
         [&>.episode-item]:hidden
         [&>.episode-item:nth-child(-n+8)]:block
         md:[&>.episode-item:nth-child(-n+8)]:block
         lg:[&>.episode-item:nth-child(-n+9)]:block
         xl:[&>.episode-item:nth-child(-n+9)]:block
         2xl:[&>.episode-item:nth-child(-n+12)]:block
         3xl:[&>.episode-item:nth-child(-n+15)]:block"
>
@else
<div
  class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-8
         [&>.episode-item]:hidden
         [&>.episode-item:nth-child(-n+12)]:block
         md:[&>.episode-item:nth-child(-n+12)]:block
         xl:[&>.episode-item:nth-child(-n+12)]:block
         2xl:[&>.episode-item:nth-child(-n+15)]:block
         3xl:[&>.episode-item:nth-child(-n+16)]:block"
>
@endif
    @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>