@props([
'blogs'
])

<div>

    <div class="grid grid-cols-2 gap-10 ">

        @foreach($blogs as $blog)

        <div class="h-[20vh] text-white">
            <div class="flex gap-3 h-full">
                <div class=" w-1/3 h-fill  text-white ">
                    <img class="w-full h-full rounded-xl"
                        src="{{asset('images/'.$blog->image)}}"
                        alt="">

                </div>

                <div>
                    <div class="h-full flex flex-col gap-2 ">

                        <div>
                            <div style="color: {{$blog->category->color}};"
                                class="flex  relative   rounded gap-1 w-max text-xs text-black items-center">
                                <div class="w-full h-full rounded  absolute z-0 opacity-10 " style="background: {{$blog->category->color}};">

                                </div>
                                <div class="flex gap-1 items-center px-1.5 py-0.5 rounded">
                                    <svg height="12" width="10" xmlns="http://www.w3.org/2000/svg">
                                        <circle r="4" cx="5" cy="5.5" fill="{{$blog->category->color}}" />
                                    </svg>
                                    {{$blog->category->title}}

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

                        <div>
                            {{-- موضوع--}}
                            {!! $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 flex flex-col justify-center text-gray-400">
                                {{-- تاریخ--}}

                                با علی علیزاده
                                {{-- {{jalaliDate($blog->updated_at,'%d %B، %Y')}}--}}
                            </div>

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

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

                        </div>

                        <div class="flex gap-3">



                        </div>

                    </div>


                </div>

            </div>
        </div>

        @endforeach



    </div>


</div>