@if ($podcasts->count())
    <div class="row">
        @foreach ($podcasts as $podcast)
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title" style="color:#0F2854 !important">
                            {{ $podcast->name }}
                        </h5>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <p class="mb-0">
                                By: {{ $podcast->author ?? 'Unknown' }}
                            </p>

                            @if ($podcast->label)
                                <span class="badge bg-secondary py-1 px-2 fs-7">{{ $podcast->label }}</span>
                            @endif
                    </div>
                    <img src="{{ $podcast->image ?? asset('images/default-podcast.png') }}" alt="{{ $podcast->name }}"
                        class="card-img-top" style="height:300px !important; object-fit:cover;">
                    <p>

                    </p>


                    <a href="{{ route('podcasts.show', $podcast->id) }}" class="btn btn-primary btn-sm shadow-none">
                        View Episodes
                    </a>
                </div>
                {{-- <div class="card-footer text-muted">
                        @if ($podcast->last_synced_at)
                            Synced {{ $podcast->last_synced_at->diffForHumans() }}
                        @else
                            Never synced
                        @endif
                    </div> --}}
            </div>
    </div>
@endforeach
</div>
@else
<div class="alert alert-info">
    No podcasts available yet.
</div>
@endif