@php
    $chapterCount = $drama['chapterCount'] ?? 0;
    $chapterList = $drama['chapterList'] ?? $drama['chapters'] ?? $drama['videos'] ?? [];
    $bookId = $drama['bookId'] ?? null;
    $currentLang = $lang ?? request()->route('lang');
@endphp
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; justify-content: flex-start;">
    @for($i = 0; $i < $chapterCount; $i++)
        @php
            $chapter = $chapterList[$i] ?? null;
        @endphp
    <a href="{{ route('episode.page', ['lang' => $currentLang, 'bookId' => $bookId, 'episodeIndex' => $i + 1]) }}" style="text-decoration: none; color: inherit;">
            <div style="
                background: #23262f;
                border: 1px solid #313442;
                border-radius: 6px;
                width: 100%;
                aspect-ratio: 1 / 1;
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 0;
                min-height: 0;
                box-sizing: border-box;
                margin: 0 auto;
                transition: box-shadow 0.15s, border 0.15s;
                padding: 0;
            "
            onmouseover="this.style.boxShadow='0 2px 8px #4D65ED33';this.style.border='1.5px solid #4D65ED';"
            onmouseout="this.style.boxShadow='none';this.style.border='1px solid #313442';"
            >
                <span style="font-weight: 600; color: #fff; font-size: 0.95em; word-break: break-word; text-align: center;">{{ $i + 1 }}</span>
            </div>
        </a>
    @endfor
</div>
<script async="async" data-cfasync="false" src="https://confessinvaluable.com/5f48b46b4481c05877a6f5a7911a5e12/invoke.js"></script>
<div id="container-5f48b46b4481c05877a6f5a7911a5e12"></div>