@props(['blogs'])

<div>

    <div class="grid grid-cols-4 justify-between gap-5  my-8  ">

        @foreach($blogs as $blog)

        <div class="h-full">

            <div class="h-2/3">
                <div class="relative h-full">
                    <img class="w-full h-full rounded-xl" src="{{asset('images/'.$blog->image)}}" alt="">
                    <div class="absolute p-3 py-5 bottom-0">
                        <div>
                            <div style="background: {{$blog->category->color}}"
                                class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-2 w-max text-xs items-center">
                                <svg height="12" width="10"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <circle r="4" cx="5" cy="5.5" fill="black" />
                                </svg>
                                {{$blog->category->title}}
                            </div>
                        </div>

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

            <div class="flex flex-col gap-1 mt-3">




                <div class="text-white">
                    {!! $blog->subject!!}
                    {{-- {!! $blog->subject !!}--}}
                </div>
                <div>
                    {{-- توضیحات--}}
                    {{-- {!! $blog->preview !!}--}}
                </div>
                <div class="flex gap-3 text-white">

                    <div class="flex flex-col justify-center">
                        <img class="rounded-full size-8" src="http://127.0.0.1:8000/images/17365895806dl75b4493S48w80sD0323r31KB6V48E_.jpg" alt="">
                    </div>

                    <div class="text-xs text-gray-400 flex flex-col justify-center">
                        {{-- تاریخ--}}
                        با المیرا کرمی
                        {{-- {{jalaliDate($blog->updated_at,'%d %B، %Y')}}--}}
                    </div>

                    <span class="text-gray-400">.</span>

                    <div class="text-xs text-gray-400 flex flex-col justify-center">
                        {{-- زمان مطالعه--}}
                        {{jalaliDate($blog->updated_at,'%d %B، %Y')}}

                        {{-- {!! $blog->reed_time !!} دقیقه زمان مطالعه--}}
                    </div>

                    {{-- <div>--}}
                    {{-- {!! $blog->likes ??0 !!}--}}
                    {{-- </div>--}}

                </div>
            </div>

        </div>
        @endforeach





    </div>

</div>