@extends('layout')

@section('page-title', $post->title)

@section('content')
    <div id="content">
        <div class="bg-subpage"></div>
        <div class="blog-detail-page blog-list-page style-two pt-80 pb-80">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="heading">
                            <div class="heading-infor flex-item-center gap-10 row-gap-4">
                                @foreach($post->categories as $category)
                                    <a class="category text-button text-blue" href="{{ route('blog.category', $category->unique_name) }}">
                                        {{ $category->name }}
                                    </a>
                                @endforeach
                                <i class="ph-fill ph-dot-outline text-on-surface-variant1"></i>
                                <div class="author fw-400"><a href="#">Bishal Saha</a></div>
                                <i class="ph-fill ph-dot-outline text-on-surface-variant1"></i>
                                <div class="date fw-400">{{ date_format($post->updated_at, 'F d, Y') }}</div>
                            </div>
                            <div class="title heading3 mt-12">{{ $post->title }}</div>
                        </div>
                        <div class="blog-content mt-40">
                            <div class="bg-img main-img">
                                <img class="w-100 bora-20" src="{{ asset('blog/1/'.$post->hero_image) }}" alt="{{ $post->title }}"/>
                            </div>
                            <div class="body2 text-on-surface-variant1 mt-40">
                                <p>{{ $post->content }}</p>
                                <p>{{ $post->content }}</p>
                                <p>{{ $post->content }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 ml-30 ml-col-lg-0">
                        <x-blog-sidebar/>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection