@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 text-left">
                        <div class="mb-2">
                            <h1 class="h3 fw-bold mb-1">{{ $post->title }}</h1>

                            <div>
                                <span>
                                    in
                                    @foreach ($post->post_categories as $post_category)
                                        <small><a class="text-decoration-none"
                                                href="{{ route('home.country.category', ['country' => $post_category->category->country_locale_slug, 'category' => $post_category->category->slug]) }}">{{ $post_category->category->name }}</a>
                                        </small>
                                    @endforeach
                                </span>
                                <span class="ms-2">
                                    <small>

                                        {{ $post->author->name }}
                                    </small>
                                </span>
                                <span class="ms-2">
                                    <small>

                                        {{ $post->publish_date->timezone(session()->get('timezone'))->isoFormat('Do MMMM YYYY, h:mm A') }}
                                    </small>
                                </span>
                            </div>

                        </div>
                        <div class="mb-3">
                            <h2 class="h5">{{ $post->excerpt }}</h2>
                        </div>
                        <div class="mb-3">
                            <div class="img-fluid rounded-start ratio ratio-16x9">
                                <div class="lqip-loader">
                                    <!-- Use the LQIP image with the appropriate URL -->
                                    <img class="img-fluid rounded-2" src="{{ $post->featured_image }}"
                                        alt="Photo of {{ $post->name }}">

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

                    </div>
                </div>
            </div>
        </div>
    @endsection