@extends('front.layouts.app')
@section('content')
    <main class="container-lg mt-3">

        @include('front.partials.breadcrumbs')

        <div class="row g-4">
            <div class="col-md-8">

                <article class="blog-post
                ">
                    <div class="mb-2">
                        <h1 class="fw-bold font-family-roboto-condensed mb-1">{{ $post->title }}</h1>

                        <div>
                            @foreach ($post->keywords as $keyword)
                                @if ($keyword == $post->main_keyword)
                                    <h2 class="badge text-bg-dark me-1 small">{{ $keyword }}</h2>
                                @else
                                    <h2 class="badge text-bg-light border me-1 small fw-normal">{{ $keyword }}</h2>
                                @endif
                            @endforeach
                        </div>
                    </div>


                    <div class="mb-2 text-secondary">
                        <small>{{ $post->published_at->format('jS F Y') }}</small> •
                        <small>By FutureWalker</small>
                    </div>

                    <div class="card mb-3 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h3 class="small fw-bold mb-2">Quick News Bite:</h3>
                            <div><small>{{ $post->bites }}</small></div>
                        </div>
                    </div>

                    <div class="row justify-content-center">
                        <div class="col-12 col-md-12">
                            <img src="{{ $post->featured_image }}" class="img-fluid rounded-3 shadow-lg mb-3"
                                alt="">
                        </div>
                    </div>
                    {!! $content !!}
                </article>

            </div>

            <div class="col-md-4">
                <div class="position-sticky" style="top: 8rem;">
                    @include('front.partials.sidebar')
                </div>
            </div>
        </div>
    </main>
@endsection

@push('top_head')
    {!! $breadcrumb_context !!}
@endpush