@extends('theme::layouts.app', ['title' => __('blog.title|Blog')])

@section('content')
    <main class="flex-grow w-full">
        @include('theme::partials.breadcrumbs')

        <div class="w-full max-w-[1440px] mx-auto px-6 lg:px-10 py-10">
            @if($posts->onFirstPage())
                @include('theme::partials.blog.featured-post', ['post' => $posts->first()])
            @endif


            <div class="flex flex-col lg:flex-row gap-12">
                <div class="flex-grow lg:w-2/3">
                    @if($posts->onFirstPage())
                        <div class="flex items-center justify-between mb-8">
                            <h2 class="text-2xl font-bold text-text-main dark:text-white">@lang('blog.heading|Recent Articles')</h2>
                        </div>
                    @endif

                    {{-- Post Grid --}}
                        @include('theme::partials.blog.posts-loop', ['isHome' => true])
                </div>

                <aside class="lg:w-1/3 space-y-10">
                    @include('theme::partials.blog.widgets.search')
                    @include('theme::partials.blog.widgets.categories')
                    @include('theme::partials.blog.widgets.popular-posts')
                    @include('theme::partials.blog.widgets.newsletter')
                </aside>
            </div>
        </div>
    </main>
@endsection