@extends('layouts.public')
@section('title', $episode->title)
@section('meta_description', \Illuminate\Support\Str::limit(strip_tags($episode->description ?? ''), 155))

@section('content')
@include('public._breadcrumb', ['items' => [['label' => 'البودكاست', 'url' => '/podcast'], ['label' => $episode->title]]])

<div class="flex gap-4 items-start mb-4">
    @if ($episode->cover_image)
        <img src="{{ Storage::url($episode->cover_image) }}" alt="{{ $episode->title }}" class="w-24 h-24 object-cover rounded">
    @endif
    <div>
        @if ($episode->show_name)
            <p class="text-sm text-gray-500">{{ $episode->show_name }}</p>
        @endif
        <h1 class="text-2xl font-bold">{{ $episode->title }}</h1>
    </div>
</div>

@include('public._share-buttons', ['shareTitle' => $episode->title])

@if ($episode->audioUrl())
<audio controls class="w-full my-4" src="{{ $episode->audioUrl() }}">
    متصفحك لا يدعم تشغيل الصوت.
</audio>
@endif

@if ($episode->description)
<div class="prose max-w-none mt-4">{{ $episode->description }}</div>
@endif
@endsection