<?php
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\SocialPost;
?>

<main class="max-w-7xl mx-auto px-4 md:px-6 py-10">
    <div class="mb-10">
        <h1 class="text-3xl md:text-5xl font-black text-slate-900 tracking-tight uppercase flex items-center gap-4">
            <i class="fa-brands fa-youtube text-red-600"></i>
            {{ __('social.youtube_title') }} <span class="text-red-600 ml-2">{{ __('social.youtube_highlight') }}</span>
        </h1>
        <div class="h-1 w-16 bg-red-600 mt-3 rounded"></div>
        <p class="text-slate-500 mt-4 text-sm font-odia">{{ __('social.youtube_subtitle') }}</p>
    </div>

    @if($videos->count())
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($videos as $video)
        <div class="overflow-hidden rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow bg-slate-900">
            <div class="w-full">
                {!! $video->embed_html !!}
            </div>
            <div class="p-4">
                @if($video->title)
                <h3 class="text-sm font-bold text-white font-odia leading-snug mb-2">{{ $video->title }}</h3>
                @endif
                <div class="flex items-center justify-between">
                    @if($video->author_name)
                    <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">{{ $video->author_name }}</span>
                    @endif
                    <a href="{{ $video->url }}" target="_blank" rel="noopener noreferrer"
                        class="text-[10px] font-bold uppercase tracking-wider text-red-500 hover:text-red-400 transition-colors flex items-center gap-1">
                        {{ __('social.watch') }} <i class="fa-brands fa-youtube"></i>
                    </a>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="mt-12">
        {{ $videos->links() }}
    </div>
    @else
    <div class="bg-slate-50 p-12 text-center rounded-lg border border-slate-100">
        <i class="fa-brands fa-youtube text-5xl text-red-200 mb-4 block"></i>
        <p class="text-slate-400 font-odia">{{ __('social.youtube_empty') }}</p>
    </div>
    @endif
</main>