@extends('layouts.app')
@section('title', 'Inicio')
@section('body')

    <div class="container mx-auto my-9 gap-x-9">

        <div class="mb-4">

            <a href="{{ route('centro-ayuda') }}" class="flex gap-x-1.5 text-sm font-bold mb-4 cursor-pointer">
                <img src="{{  env('VITE_CDN_URL_ASSETS').'/icons/arrow_back.svg' }}" alt="Boton de regreso" />
                Regresar al centro de ayuda
            </a>

            <p class="text-primary-300 font-bold text-sm">
                publicado el {{ \Carbon\Carbon::parse($blog->published_at)->format('y/m/d') }}
            </p>
        </div>

        <div class="flex ">
            <div class="flex-1">
                <h3>{{ $blog->title }}</h3>
                <hr class="text-gray-400 mt-5" />

                <div class="mt-5">
                    <p> {{ $blog->lead }} </p>
                    <div class="mt-3">
                        {!! $blog->content !!}
                    </div>
                </div>
            </div>
            <div class="w-76">
                <h3>Artículos similares</h3>

                <div class="flex flex-col gap-y-5 mt-9">

                    @foreach ($getGenerales->take(4) as $getGeneral)
                        <a
                            href="{{route('centro-ayuda-slug', ['slug' => $getGeneral->slug])}}"
                            class="font-semibold cursor-pointer hover:border-2 hover:border-primary-200 px-3 rounded-2xl hover:bg-primary-100 transition-all flex flex-col">
                            <span class="text-sm text-secondary-300">{{ $getGeneral->title }}</span>
                            <span class="text-xs text-gray-500">
                                {{ $getGeneral->lead }}
                            </span>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>



@endsection