@include('components.seo')

<div class="space-y-5">
    <x-client.breadcrumbs :breadcrumb="$breadcrumb"/>
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4  mt-7">
        @foreach($datas as $data)
            <div class="border dark:border-amber-400 p-4 rounded-3xl lg:flex flex flex-col space-y-0 lg:space-y-5 gap-4 bg-gray-200 shadow-md dark:bg-stone-700 ">
                <a
                    class=""
                    href="{{route('index.article' , $data->slug)}}">
                    <img
                        class=" rounded-xl hover:grayscale @include('components.transition') hover:scale-105 hover:-skew-y-2"
                        src="{{$data->avatar}}" alt="{{$data->name}}" height="200" width="400">
                </a>
                <div class="w-full">
                    <a
                        class="text-amber-400"
                        href="{{route('index.article' , $data->slug)}}">
                        <h2 class="text-lg">{{$data->name}}</h2>
                    </a>
                    <div class="text-justify">
                        {{   \Illuminate\Support\Str::of($data->short_description)->words(15, '...') }}
                    </div>
                    <div class="flex justify-between">
                        <p>
                            {{$data->user->name}}
                        </p>
                        <div class="flex gap-1">
                            {{jdate($data->created_at)->ago()}}
                            <x-icons.clock class="size-6"/>

                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    {{ $datas->links()  }}
    <livewire:client.component.free-advice/>
</div>