@extends("layouts.master")
@section("title", "Program Archive")

@section("content")
    <div class="breadcrumb-wrapper bg-cover" style="background-image: url('assets/img/inner/breadcrumb.jpg');">
        <div class="container">
            <div class="page-heading">
                <div class="breadcrumb-sub-title">
                    <h1 class="wow fadeInUp" data-wow-delay=".3s">Program Archive</h1>
                </div>
                <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
                    <li><a href="{{ route("home") }}">Home</a></li>
                    <li><i class="fa-solid fa-chevron-right"></i></li>
                    <li>Program Archive</li>
                </ul>
            </div>
        </div>
    </div>

    <section class="section-padding">
        <div class="container">
            <div class="row g-4">
                @forelse ($programs as $program)
                    <div class="col-lg-6">
                        <div class="p-4 h-100" style="border:1px solid #e6eaf3; background:#fff;">
                            <h4>{{ $program->title }}</h4>
                            <p class="mb-2"><strong>Category:</strong> {{ $program->category?->name }}</p>
                            @if ($program->subtitle)
                                <p>{{ $program->subtitle }}</p>
                            @endif
                            <a href="{{ route("program-show", $program->slug) }}" class="theme-btn">
                                View Details
                                <i class="fa-solid fa-arrow-up-right"></i>
                            </a>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-warning mb-0">No programs available.</div>
                    </div>
                @endforelse
            </div>
            <div class="mt-4">
                {{ $programs->links() }}
            </div>
        </div>
    </section>
@endsection