@if($actor && $actor->videos && count($actor->videos) > 0)
    <div class="mb-6">
        <h2 class="text-[#E32B2B] uppercase underline text-lg font-bold mb-3">Beliebte Videos</h2>

        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($actor->videos->take(4)->all() as $video)
                <div class="bg-white rounded-lg border">
                    <a class="*:transition group" href="/videos/{{ $video->v_id }}">
                        <div class="w-full h-40 overflow-hidden border rounded-t-lg group-hover:brightness-90">
                            @if ($video->image)
                                <img class="object-cover w-full h-full" src="{{ Storage::url($video->image) }}" alt="{{ $video->title }}" />
                            @else
                                <div class="relative flex items-center justify-center w-full h-full text-gray-400 bg-gray-200">
                                    Video
                                    @if($video->runtime)
                                        <span class="absolute right-2 bottom-2 text-xs">{{ $video->runtime }}</span>
                                    @endif
                                </div>
                            @endif
                        </div>
                        <div class="flex flex-col px-4 py-3">
                            <h3 class="text-gray-900 font-bold truncate group-hover:text-[#E32B2B] mb-1">
                                {{ $video->title }}
                            </h3>
                            @if(isset($video->rating))
                                <x-star-rating :rating="$video->rating" :count="$video->rating_count ?? 0" />
                            @endif
                            <p class="text-xs text-gray-400 mb-3 truncate">{{ $video->description }}</p>
                            <hr class="mb-3" />
                            <div class="flex justify-between items-center">
                                <div class="text-xs text-gray-400">{{ $actor->nick }}</div>
                                <button type="button" class="px-2 py-1 bg-[#00B388] text-white text-xs rounded">
                                    <i class="fa-solid fa-download"></i>
                                </button>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>

        <!-- Show 4 more videos on larger screens -->
        <div class="hidden md:grid md:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
            @foreach ($actor->videos->skip(4)->take(4)->all() as $video)
                <div class="bg-white rounded-lg border">
                    <a class="*:transition group" href="/videos/{{ $video->v_id }}">
                        <div class="w-full h-40 overflow-hidden border rounded-t-lg group-hover:brightness-90">
                            @if ($video->image)
                                <img class="object-cover w-full h-full" src="{{ Storage::url($video->image) }}" alt="{{ $video->title }}" />
                            @else
                                <div class="relative flex items-center justify-center w-full h-full text-gray-400 bg-gray-200">
                                    Video
                                    @if($video->runtime)
                                        <span class="absolute right-2 bottom-2 text-xs">{{ $video->runtime }}</span>
                                    @endif
                                </div>
                            @endif
                        </div>
                        <div class="flex flex-col px-4 py-3">
                            <h3 class="text-gray-900 font-bold truncate group-hover:text-[#E32B2B] mb-1">
                                {{ $video->title }}
                            </h3>
                            @if(isset($video->rating))
                                <x-star-rating :rating="$video->rating" :count="$video->rating_count ?? 0" />
                            @endif
                            <p class="text-xs text-gray-400 mb-3 truncate">{{ $video->description }}</p>
                            <hr class="mb-3" />
                            <div class="flex justify-between items-center">
                                <div class="text-xs text-gray-400">{{ $actor->nick }}</div>
                                <button type="button" class="px-2 py-1 bg-[#00B388] text-white text-xs rounded">
                                    <i class="fa-solid fa-download"></i>
                                </button>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>

        @if(count($actor->videos) > 8)
            <div class="mt-6 text-center">
                <a href="/videos?actor={{ $actor->id }}" class="inline-block bg-[#00B388] hover:bg-[#009974] text-white font-bold py-2 px-6 rounded">
                    Mehr Videos
                </a>
            </div>
        @endif
    </div>
@endif