<div class="bg-transparent rounded-lg overflow-hidden bg-white dark:bg-neutral-800 p-5">
    <!-- Cover -->
    <div class="w-[100px] md:w-[150px] mr-4 float-left">
        <img alt="{{ $episode->title }}" loading="lazy" width="150"
            class="block relative rounded-lg object-cover object-center aspect-[11/16] z-20"
            src="{{ $episode->cover_url }}"></img>
    </div>

    <!-- Info -->
    <div class="relative">
        <!-- Title -->
        <h1 class="text-3xl font-bold text-rose-600">
            {{ $episode->title }} ({{ $episode->title_jpn }})
        </h1>
        <div>
            <a data-te-toggle="tooltip"
                title="Released {{ \Carbon\Carbon::parse($episode->release_date)->diffForHumans(['parts' => 2]) }}"
                class="text-l text-gray-800 dark:text-white leading-tight pl-1">
                <i class="fa-regular fa-calendar"></i> {{ $episode->release_date }}
                |
            </a>
            <a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'studios[0]' => $episode->studio->slug]) }}"
                class="text-l text-gray-800 dark:text-white leading-tight hover:underline hover:underline-offset-4">
                {{ $episode->studio->name }}
            </a>
        </div>
        <hr class="border-gray-400/40 mt-2 mb-2">
        <p class="leading-normal font-bold text-lg text-rose-600">
            {{ __('stream.description') }}
        </p>
        <p class="text-gray-800 dark:text-gray-200 leading-tight min-h-[50%]">
            {{ $hentai->description }}
        </p>
        <hr class="border-gray-400/40 mt-2 mb-1">
        <ul class="list-none text-center" style="overflow: hidden;">
            <a class="text-gray-400">
                |
            </a>
            @foreach ($episode->tags->sortBy('slug') as $tag)
                <li class="inline-block p-1">
                    @if ($tag->slug == 'uncensored' || $tag->slug == 'vanilla' || $tag->slug == '4k')
                    <a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $tag->slug]) }}"
                        class="relative block items-center px-2 py-2 mt-1 dark:focus:ring-offset-gray-800 border border-transparent rounded-md font-semibold text-xs text-green-500 dark:hover:text-white hover:text-white uppercase tracking-widest hover:bg-green-700 focus:bg-green-700 active:bg-green-900 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition ease-in-out duration-150">
                        {{ $tag->name }}
                    </a>
                    @elseif($tag->slug == 'censored')
                    <a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $tag->slug]) }}"
                        class="relative block items-center px-2 py-2 mt-1 dark:focus:ring-offset-gray-800 border border-transparent rounded-md font-semibold text-xs text-yellow-600 dark:hover:text-white hover:text-white uppercase tracking-widest hover:bg-yellow-700 focus:bg-yellow-700 active:bg-yellow-900 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition ease-in-out duration-150">
                        {{ $tag->name }}
                    </a>
                    @elseif($tag->slug == 'gore' || $tag->slug == 'horror' || $tag->slug == 'scat' || $tag->slug == 'ntr' || $tag->slug == 'rape')
                    <a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $tag->slug]) }}"
                        class="relative block items-center px-2 py-2 mt-1 dark:focus:ring-offset-gray-800 border border-transparent rounded-md font-semibold text-xs text-red-600 dark:hover:text-white hover:text-white uppercase tracking-widest hover:bg-red-700 focus:bg-red-700 active:bg-red-900 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150">
                        <i class="fa-solid fa-triangle-exclamation"></i> {{ $tag->name }}
                    </a>
                    @else
                    <a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $tag->slug]) }}"
                        class="relative block items-center px-2 py-2 mt-1 dark:focus:ring-offset-gray-800 border border-transparent rounded-md font-semibold text-xs dark:text-white hover:text-white uppercase tracking-widest hover:bg-rose-700 focus:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 transition ease-in-out duration-150">
                        {{ $tag->name }}
                    </a>
                    @endif
                </li>
                <a class="text-gray-400">
                    |
                </a>
            @endforeach
        </ul>
    </div>
</div>
