@aware(['page'])
@props(['posts','section_name','section_description'])


<section class="text-gray-600 body-font">
    <div class="container px-5 py-24 mx-auto">
        <div class="flex flex-wrap w-full mb-20">
            <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
                <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">{{$section_name}}</h1>
                <div class="h-1 w-20 bg-indigo-500 rounded"></div>
            </div>
            <p class="lg:w-1/2 w-full leading-relaxed text-gray-500">{!! tiptap_converter()->asHTML($section_description) !!}</p>
        </div>
        <div class="flex flex-wrap -m-4">


            @foreach ($posts as $p)
            
            @php
            $post=  App\Models\Post::where('id',$p['post_id'])->first();
         
            @endphp
                <div class="xl:w-1/4 md:w-1/2 p-4">
                    <div class="bg-gray-100 p-6 rounded-lg">
                        <img class="h-40 rounded w-full object-cover object-center mb-6"
                            src="{{asset('storage/'. $post->media->path)}}" alt="content">
                            <a >
                                <x-mary-icon name="heroicon.c.qr.code" class="text-emerald-500" /> {{ $post?->category?->name }}
                            </a>
                        <h2 class="text-lg text-gray-900 font-medium title-font mb-4">{{$post->name}}</h2>
                        <p class="leading-relaxed text-base">    {!! tiptap_converter()->asHTML(\Illuminate\Support\Str::limit($post?->sub_description, 60)) !!}</p>
                        <a href="{{ route('posts.show', [$post->slug]) }}"
                            class="text-emerald-500 inline-flex items-center md:mb-2 lg:mb-0 hover:text-emerald-700">
                            Learn More
                            <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path d="M5 12h14"></path>
                                <path d="M12 5l7 7-7 7"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            @endforeach


        </div>
    </div>
</section>