{{-- 
<div class="p-6">
    @if ($category->posts->count() > 0)

        <div class="max-w-[95rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 ">


            <div class="max-w-2xl mx-auto text-center  mb-10 lg:mb-14">
                
                    <h1 class="text-4xl pt-0 text-[{{ $category->text_color }}] font-bold md:text-4xl md:leading-tight">
                        <x-mary-icon class="h-7" name="heroicon.c.qr.code" /> {{ $category->name }}</h1>
               
              
            </div>
            
            <div class="flex justify-center">

                <div class="flex flex-wrap {{$category->posts->count()===1 ? 'justify-center': ' '}} md:w-3/4 s:w-1/2">
                    @foreach ($category->posts as $post)
                        @if ($post->status == 1)
                            <div class="w-full sm:w-2/2 md:w-2/4 px-2 ">
                                <livewire:components.post-card :post="$post" :key="$post->id" />
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
</div>
@else
<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
    <p class="text-xl font-semibold text-gray-500">No posts available at the moment.</p>
</div>

@endif
</div> --}}

<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">{{ $category->name }}</h1>
                <div class="h-1 w-20 bg-emerald-500 rounded"></div>
            </div>
            <p class="lg:w-1/2 w-full leading-relaxed text-gray-500">{{ $category->description }}</p>
        </div>
        <div class="flex flex-wrap -m-4">

            
            @foreach ($category->posts as $post)
            @if ($post->status == 1)
                <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="{{$post?->media->alt}}">
                        <h3 class="tracking-widest text-emerald-500 text-xs font-medium title-font">{{ date('d M, Y ', strtotime($post?->published_on)) }}</h3>
                        <h2 class="text-lg text-gray-900 font-medium title-font mb-3">{{$post?->name}}</h2>
                        {!! tiptap_converter()->asHTML(\Illuminate\Support\Str::limit($post?->sub_description, 60) )!!}
                        <p class="leading-relaxed text-base"></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>
                @endif
            @endforeach
            
        </div>
    </div>
</section>