@include('components.seo')
<div class="grid grid-cols-1 lg:grid-cols-3 mt-8 gap-8 ">
    <div class="col-span-1 md:col-span-2 space-y-4">
        <x-client.breadcrumbs :breadcrumb="$breadcrumb" />

        <div class="w-full flex justify-center items-center mb-4 ">
            <h1>
                {{ $news->name  }}
            </h1>
        </div>
        <img
            class=""
            src="{{$news->avatar}}" alt="{{$news->name}}">
        <div class="flex items-center gap-2 mr-4 border-b-2 w-fit border-gray-300 text-gray-500 mb-5">
            <span>{{jdate($news->created_at)->ago()}}</span>
            <x-icons.clock class="text-gray-950 "/>
        </div>
        <div id="description" class="text-justify">
            {!! $news->description !!}
        </div>
        <livewire:client.component.free-advice/>
    </div>
    <div
        class="border rounded-md p-4 bg-amber-400 dark:bg-stone-700 h-fit sticky top-4 @include('components.transition') ">
        <h2 class="font-bold">آخرین اخبار</h2>
        <x-client.pages.side-bar type="news"/>
    </div>
</div>