@foreach ($posts as $video)
    <div class="border border-gray-300 rounded-lg p-1 bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
        <div
            class="relative w-full h-48 bg-black cursor-pointer overflow-hidden rounded-lg"
            x-data="{ playing: false }"
            @click="playing = true"
        >
            <!-- Thumbnail -->
            <template x-if="!playing">
                <div class="relative w-full h-full">
                    <img
                        src="https://img.youtube.com/vi/{{ $video->description }}/hqdefault.jpg"
                        class="absolute inset-0 w-full h-full object-cover"
                        loading="lazy"
                    >
                    <!-- YouTube Play Button -->
                    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                        <div class="w-12 h-8 bg-red-600 rounded-lg flex items-center justify-center">
                            <span class="text-white text-lg drop-shadow-lg">▶</span>
                        </div>
                    </div>
                </div>
            </template>

            <!-- Iframe -->
            <template x-if="playing">
                <iframe
                    class="absolute inset-0 w-full h-full"
                    src="https://www.youtube.com/embed/{{ $video->description }}?autoplay=1&rel=0&modestbranding=1"
                    frameborder="0"
                    allow="autoplay; encrypted-media"
                    allowfullscreen
                ></iframe>
            </template>

        </div>
        <div class="pt-2 pb-1 px-1 text-black text-md font-semibold line-clamp-2">
            <span>{{ $video->title }}</span>
        </div>
    </div>
@endforeach