@extends('layouts.front.app')

@section('content')
    <div class="container py-3">


        <div class="row justify-content-center">
            <div class="col-12 col-lg-11 col-xl-9 col-xxl-8">


                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-8 col-xl-8">

                        <div class="mb-5">
                            <h1 class="h2 fw-bold">{{ $category->name }}</h1>
                            <p class="text-secondary">
                                {{ $category->description }}
                            </p>
                        </div>

                        @foreach ($latest_posts as $post)
                            <div class="my-3">


                                <div class="card mb-3">

                                    <div class="card-body">
                                        <h5 class="card-title">
                                            <a class="text-decoration-none fw-bold"
                                                href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}">{{ $post->title }}</a>
                                        </h5>

                                        <p class="card-text">
                                            in
                                            @foreach ($post->post_categories as $post_category)
                                                <small><a class="text-decoration-none"
                                                        href="{{ route('home.country.category', ['country' => $country_locale->country_iso, 'category' => $post_category->category->slug]) }}">{{ $post_category->category->name }}</a>
                                                </small>
                                            @endforeach
                                            {{-- <small class="text-body-secondary ms-2">3 min read</small> --}}
                                        </p>

                                    </div>
                                    <a class="card-img-top"
                                        href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}">
                                        <div class="img-fluid rounded-start ratio ratio-16x9">
                                            <div class="lqip-loader">
                                                <!-- Use the LQIP image with the appropriate URL -->
                                                <img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}">

                                                <!-- Use the final JPEG image with the appropriate URL -->
                                                <img class="lqip-frozen" src="{{ $post->featured_image_lqip }}"
                                                    alt="Placeholder image of {{ $post->name }}">
                                            </div>
                                        </div>
                                    </a>

                                </div>


                            </div>
                        @endforeach

                        {{ $latest_posts->links() }}
                    </div>
                    {{--             <div class="col-md-4 col-lg-4 col-xl-4 bg-secondary">
              b
            </div> --}}
                </div>
            </div>

        </div>

    </div>
@endsection