@extends('layouts.public')
@section('title', 'البودكاست')

@section('content')
<h1 class="text-2xl font-bold mb-6">البودكاست</h1>

<div class="grid grid-cols-2 gap-4">
    @forelse ($episodes as $episode)
    <a href="/podcast/{{ $episode->slug }}" class="flex gap-3 bg-white p-3 rounded-lg shadow group">
        @if ($episode->cover_image)
            <img src="{{ Storage::url($episode->cover_image) }}" alt="{{ $episode->title }}" class="w-16 h-16 object-cover rounded flex-shrink-0">
        @endif
        <div>
            @if ($episode->show_name)
                <p class="text-xs text-gray-500">{{ $episode->show_name }}</p>
            @endif
            <h3 class="font-semibold group-hover:text-blue-600">{{ $episode->title }}</h3>
        </div>
    </a>
    @empty
    <p class="text-gray-500 col-span-2">لا توجد حلقات بعد.</p>
    @endforelse
</div>

<div class="mt-8">{{ $episodes->links() }}</div>
@endsection