<x-website.layout>
    <!-- start banner -->
    @foreach ($sections as $section)
        @if ($section->key == 'blogs')
            @include('Website.partials._banner', ['page_title' => $blog->name])
        @endif
    @endforeach
    <!-- end banner -->

    <section class="blog-hero py-5">
        <div class="container">
            <div class="row g-5">
                <!-- ============ ARTICLE CONTENT ============ -->
                <div class="col-lg-8">
                    <div class="article-card">
                        <img src="{{ $blog->image_path }}" class="w-100 h-100" alt="{{ $blog->name }}">
                        <div class="my-4">
                            <h1>{{ $blog->name }}</h1>
                        </div>

                            {!! $blog->long_desc !!}

                    </div>
                </div>

                <!-- ============ SIDEBAR ============ -->
                <div class="col-lg-4">
                    <div class="sidebar-card">
                        <h4 class="fw-bold mb-4">{{ __('website.blogs') }}</h4>
                        @foreach ($blogs as $latestBlog)
                        <div class="latest-post">
                                <img src="{{ $latestBlog->image_path }}" alt="{{ $latestBlog->name }}" />
                                <div>
                                    <div class="latest-post-title">{{ $latestBlog->name }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
</x-website.layout>