@extends('welcome')

@section('seo_title', 'Blog | ')

@section('content')
<div class="min-h-screen">

    <div class="pt-20 w-full py-4 bg-white shadow-sm">
        <div class="max-w-3xl px-2 mx-auto text-slate-600 lg:text-lg flex items-center justify-center">
            {{__("Blog")}}
        </div>
    </div>

    <div class="mt-10 mx-auto max-w-7xl w-full rounded-lg text-slate-600 px-2">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($articles as $n)
            <div class="shadow bg-white p-2.5 rounded-lg">
                <div class="relative overflow-hidden">
                    <a href="{{$n->slug}}">
                            <img src="{{ $n->imageUrl}}" class="w-full rounded-lg transition-transform duration-300 transform-gpu hover:scale-110" />
                    </a>
                    <div class="absolute top-2 right-4 text-white bg-blue-800 p-1.5 rounded mt-2 flex items-center text-sm">
                        <x-entypo-calendar class="text-white w-4 h-4 flex-shrink-0 mr-1 " />
                        {{$n->created_at->format('d-M-Y')}}
                    </div>
                </div>
                <div class="p-3">
                    <a href="{{ $n->slug }}" class="text-xl font-semibold text-gray-900 hover:text-slate-800 mt-3 block tracking-tight">
                        {{substr($n->title,0,74)}}
                        @if(strlen($n->title) > 74)
                        ...
                        @endif
                    </a>
                    <p class="text-lg mt-2">
                        {{substr(trim(strip_tags($n->content)),0,130)}}
                        @if(strlen(trim(strip_tags($n->content))) > 130)
                        ...
                        @endif
                    </p>
                    <div class="mt-2">
                        <a href="{{$n->slug}}" class="flex items-center text-blue-800 hover:text-blue-700 hover:underline font-semibold">
                           <x-gmdi-arrow-circle-right-r class="w-6 h-6 text-blue-800 " />
                           {{__('Read more') }}
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endsection