hstream/resources/views/stream/partials/info.blade.php

<div
    class="overflow-hidden rounded-2xl border border-gray-200/70 bg-white/90 shadow-sm backdrop-blur-sm transition-colors dark:border-white/10 dark:bg-neutral-900/80">

    <div class="p-5 md:p-7">
        <input id="e_id" type="hidden" value="{{ $episode->id }}" />

        <div class="flex flex-col gap-6 lg:flex-row">
            <!-- Cover -->
            <div class="hidden shrink-0 md:block">
                <img
                    alt="{{ $episode->title }}"
                    loading="lazy"
                    width="180"
                    src="{{ $episode->cover_url }}"
                    class="aspect-[11/16] w-[140px] rounded-2xl object-cover shadow-lg ring-1 ring-black/5 dark:ring-white/10" />
            </div>

            <!-- Main Content -->
            <div class="flex-1">
                <div class="flex flex-col gap-5 xl:flex-row xl:items-start xl:justify-between">

                    <!-- Title + Metadata -->
                    <div class="min-w-0">
                        <h1
                            class="break-words text-2xl font-black tracking-tight text-gray-900 dark:text-white md:text-4xl">
                            <a
                                href="{{ route('hentai.index', ['title' => $episode->hentai->slug]) }}"
                                class="bg-gradient-to-r from-rose-500 to-pink-500 bg-clip-text text-transparent transition hover:opacity-80">
                                {{ $episode->title }} - {{ $episode->episode }}
                            </a>
                        </h1>

                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">
                            {{ $episode->title_jpn }}
                        </p>

                        <!-- Meta Pills -->
                        <div class="mt-4 flex flex-wrap items-center gap-2 text-sm">

                            <div
                                class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-3 py-1 text-gray-700 dark:bg-white/5 dark:text-gray-300">
                                <i class="fa-solid fa-upload text-xs"></i>
                                {{ $episode->created_at->format('Y-m-d') }}
                            </div>

                            <div
                                class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-3 py-1 text-gray-700 dark:bg-white/5 dark:text-gray-300">
                                <i class="fa-regular fa-calendar text-xs"></i>
                                {{ $episode->release_date }}
                            </div>

                            <a
                                href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'studios[0]' => $episode->studio->slug]) }}"
                                class="inline-flex items-center rounded-full bg-rose-100 px-3 py-1 font-medium text-rose-700 transition hover:bg-rose-200 dark:bg-rose-500/10 dark:text-rose-300 dark:hover:bg-rose-500/20">
                                {{ $episode->studio->name }}
                            </a>

                            <a
                                id="av1-unsupported"
                                data-te-toggle="tooltip"
                                title="For 1080p and 4k streams we are using the new AV1 codec."
                                class="hidden rounded-full bg-red-100 px-3 py-1 text-sm font-medium text-red-700 dark:bg-red-500/10 dark:text-red-400">
                                AV1 Unsupported
                            </a>
                        </div>
                    </div>

                    <!-- Stats + Actions -->
                    <div class="flex flex-col gap-3 xl:items-end min-w-[330px]">

                        <!-- Stats -->
                        <div class="flex flex-wrap items-center gap-3">

                            <div
                                class="inline-flex font-bold items-center gap-2 rounded-xl bg-gray-100 px-4 py-2 text-gray-700 dark:bg-white/5 dark:text-gray-200">
                                <i class="fa-regular fa-eye"></i>
                                {{ $episode->viewCountFormatted() }}
                            </div>

                            @auth
                                @livewire('like-button', ['episode' => $episode])
                            @endauth

                            @guest
                                <div
                                    data-te-toggle="tooltip"
                                    title="Please login to like the episode"
                                    class="inline-flex cursor-pointer items-center gap-2 rounded-xl bg-gray-100 px-4 py-2 text-gray-700 dark:bg-white/5 dark:text-gray-200">
                                    <i class="fa-regular fa-heart"></i>
                                    {{ $episode->likeCount() }}
                                </div>
                            @endguest

                            @php $commentcount = $episode->commentCount(); @endphp

                            <a
                                href="#comments"
                                class="inline-flex items-center gap-2 rounded-xl bg-gray-100 px-4 py-2 text-gray-700 transition hover:bg-gray-200 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10">
                                <i class="fa-regular fa-comment"></i>
                                {{ $commentcount }}
                            </a>
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex flex-wrap gap-2">

                            @if(!$episode->dmca_takedown)
                                <a
                                    data-te-toggle="modal"
                                    data-te-target="#modalDownload"
                                    id="reloadCaptchaModal"
                                    class="inline-flex cursor-pointer items-center gap-2 rounded-xl bg-rose-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-rose-700">
                                    <i class="fa-solid fa-download"></i>
                                    {{ __('stream.download') }}
                                </a>
                            @endif

                            <a
                                data-te-toggle="modal"
                                data-te-target="#modalShare"
                                class="inline-flex cursor-pointer items-center gap-2 rounded-xl border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 transition hover:bg-gray-100 dark:border-white/10 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10">
                                <i class="fa-solid fa-share"></i>
                                {{ __('stream.share') }}
                            </a>

                            @auth
                                <a
                                    data-te-toggle="modal"
                                    data-te-target="#modalAddToPlaylist"
                                    class="inline-flex cursor-pointer items-center gap-2 rounded-xl border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 transition hover:bg-gray-100 dark:border-white/10 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10">
                                    <i class="fa-solid fa-square-plus"></i>
                                    {{ __('playlist.playlist') }}
                                </a>
                            @endauth
                        </div>
                    </div>
                </div>

                <!-- Description -->
                <div class="mt-8 border-t border-gray-200 pt-6 dark:border-white/10">
                    <h2 class="mb-3 text-lg font-bold text-gray-900 dark:text-white">
                        {{ __('stream.description') }}
                    </h2>

                    <p class="leading-relaxed text-gray-700 dark:text-gray-300">
                        {{ $episode->description }}
                    </p>
                </div>

                <!-- Genres -->
                <div class="mt-8 border-t border-gray-200 pt-6 dark:border-white/10">
                    <h2 class="mb-4 text-lg font-bold text-gray-900 dark:text-white">
                        {{ __('stream.genres') }}
                    </h2>

                    <div class="flex flex-wrap gap-2">

                        @foreach ($episode->tags->sortBy('slug') as $tag)

                            @php
                                $classes = 'bg-gray-100 text-gray-700 hover:bg-rose-600 hover:text-white dark:bg-white/5 dark:text-gray-300 dark:hover:bg-rose-600';

                                if (in_array($tag->slug, ['uncensored', 'vanilla', '4k'])) {
                                    $classes = 'bg-green-100 text-green-700 hover:bg-green-600 hover:text-white dark:hover:text-white dark:bg-green-500/10 dark:text-green-400 dark:hover:bg-green-600';
                                }

                                if ($tag->slug === 'censored') {
                                    $classes = 'bg-yellow-100 text-yellow-700 hover:bg-yellow-500 hover:text-white dark:hover:text-white dark:bg-yellow-500/10 dark:text-yellow-400 dark:hover:bg-yellow-500';
                                }

                                if (in_array($tag->slug, ['gore', 'horror', 'scat', 'ntr', 'rape'])) {
                                    $classes = 'bg-red-100 text-red-700 hover:bg-red-600 hover:text-white dark:hover:text-white dark:bg-red-500/10 dark:text-red-400 dark:hover:bg-red-600';
                                }
                            @endphp

                            <a
                                href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $tag->slug]) }}"
                                class="inline-flex items-center gap-2 rounded-full px-4 py-2 text-xs font-bold uppercase tracking-wide transition {{ $classes }}">

                                @if(in_array($tag->slug, ['gore', 'horror', 'scat', 'ntr', 'rape']))
                                    <i class="fa-solid fa-triangle-exclamation text-[10px]"></i>
                                @endif

                                {{ $tag->name }}
                            </a>

                        @endforeach
                    </div>
                </div>

                <!-- Gallery -->
                <div class="mt-8 border-t border-gray-200 pt-6 dark:border-white/10">
                    @include('stream.partials.gallery')
                </div>
            </div>
        </div>
    </div>
</div>