@extends('layouts.master')

@section('title', $page->title . ' | ' . setting('site.title'))

@push('custom-css')
<style>
    /* Keep card height and "Read More" position consistent across a row,
       regardless of how much title/excerpt text a given program has. */
    .page-blog .post-item { height: 100%; display: flex; flex-direction: column; }
    .page-blog .post-item-body { display: flex; flex-direction: column; flex: 1 1 auto; }
    .page-blog .post-item-content { flex: 1 1 auto; }
    .page-blog .post-item-btn { margin-top: auto; }
</style>
@endpush

@section('content')
<!--begin::Content-->

<div class="main-container">
    <section class="banner-container ">
        <div class="banner-title ">
            <div style="line-height: 1.1;">
                <span style="background-color: #86A34D;font-weight: bold; margin-bottom: 8px;font-size: 64px;">{!! $page->title !!}</span>
            </div>
        </div>
        <div style="height: 400px;" class="banner-image">
            <img src="{{ Voyager::image($page->image) }}" decoding="async" loading="lazy" alt="" style="width: 100%; height: 100%; object-fit: cover; object-position: center;" rel="preload" as="image">
        </div>
    </section>

    <!-- Page Header Section Start -->
    <div class="mt-3">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="page-header-box">
                        <h1 class="text-anime-style-3" data-cursor="-opaque">{!! $page->title !!}</h1>
                        <p class="wow fadeInUp" data-wow-delay="0.2s">{!! $page->body !!}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Section End -->

    <!-- Page Blog Start -->
    <div class="page-blog blogs-page">
        <div class="container">
            <div class="row">

                @forelse($programs as $program)
                    <div class="col-xl-4 col-md-6">
                        <!-- Post Item Start -->
                        <div class="post-item wow fadeInUp">

                            <!-- Post Featured Image Start-->
                            <div class="post-featured-image">
                                <a href="{{ route('programs.show', $program->slug) }}" data-cursor-text="View">
                                    <figure class="image-anime">
                                        <img src="{{ $program->image_url }}"
                                            alt="{{ $program->title }}"
                                            loading="lazy" decoding="async"
                                            >
                                    </figure>
                                </a>

                                @if($program->icon)
                                    <div class="post-item-tags"><span>{{ $program->icon }}</span></div>
                                @endif
                            </div>
                            <!-- Post Featured Image End -->

                            <!-- Post Item Body Start -->
                            <div class="post-item-body mb-3">
                                <div class="post-item-content">
                                    <h2>
                                        <a href="{{ route('programs.show', $program->slug) }}">{{ $program->title }}</a>
                                    </h2>
                                    @if($program->excerpt)
                                        <p class="blog-excerpt">{{ \Illuminate\Support\Str::limit($program->excerpt, 120) }}</p>
                                    @endif
                                </div>

                                <div class="post-item-btn">
                                    <a href="{{ route('programs.show', $program->slug) }}" class="subscribe">Read More</a>
                                </div>
                            </div>
                            <!-- Post Item Body End -->

                        </div>
                        <!-- Post Item End -->
                    </div>
                @empty
                    <div class="col-lg-12">
                        <div class="section-title text-center">
                            <h2 class="wow fadeInUp">No programs to show</h2>
                            <p class="wow fadeInUp">Please check back soon.</p>
                        </div>
                    </div>
                @endforelse

            </div>

            @if($programs->hasPages())
                <div class="page-pagination fancy-pagination wow fadeInUp" data-wow-delay="0.4s">
                    {{ $programs->links('vendor.pagination.default') }}
                </div>
            @endif
        </div>
    </div>
    <!-- Page Blog End -->
</div>
    <!--end::Content-->
@endsection