@props(['titleHero'=>'','breadcrumb'=>[]])
<x-main-layout {{ $attributes->merge([
    'hasFooter' => $hasFooter,
    'hasHeader' => $hasHeader,
    ]) }}>

    <div id="page-content" class="flex flex-auto flex-col max-w-full ">
        <div class="darooman-container p-8">
            <x-general.breadcrumb
                :breadcrumb="$breadcrumb">
            </x-general.breadcrumb>
        </div>
        <!-- Page Section -->
        <div class="darooman-container mb-8 xl:max-w-7xl mx-auto px-4 lg:px-8 z-2">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6">
                <!-- Main Content -->
                <div style="z-index: 1;"
                     class="order-first lg:col-span-8 rounded shadow-sm bg-white p-5 lg:p-6 ">
                    <article class="wml-content mx-auto ">
                        {!! $slot !!}
                    </article>
                </div>
                <!-- END Main Content -->
                <div style="height: fit-content"
                     class="lg:block order-last lg:col-span-4 rounded shadow-sm bg-white p-5 lg:p-6 sticky top-12 right-0">
                    <!-- Side content -->
                    <x-blog.sidebar
                        :posts="$attributes['recentPosts']">
                    </x-blog.sidebar>
                    <!-- END Side content -->
                </div>
            </div>
        </div>
        <!-- END Page Section -->
    </div>
    <!-- END Page Content -->
    {!! $down??'' !!}
</x-main-layout>