@extends('layout')

@section('content')
<div class="max-w-6xl mx-auto px-4 py-12">
    <h1 class="text-3xl font-bold text-ink mb-2">Bloq</h1>
    <p class="text-muted mb-8">Libro.az blogu — yeniliklər və məsləhətlər</p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($posts as $post)
        <a href="{{route('blog.show',$post->slug)}}" class="bg-surface rounded-2xl shadow-sm border border-line overflow-hidden hover:shadow-md transition-shadow no-underline">
            @if($post->poster)<img src="{{$post->poster}}" class="w-full h-48 object-cover">@else<div class="w-full h-48 bg-primarysoft flex items-center justify-center"><x-icon name="file-pen" class="w-10 h-10" /></div>@endif
            <div class="p-5">
                <h3 class="font-bold text-ink mb-1">{{$post->title}}</h3>
                <p class="text-sm text-muted line-clamp-2">{{$post->short_description}}</p>
                <div class="flex justify-between items-center mt-3 text-xs text-muted">
                    <span>{{$post->author}}</span>
                    <span>{{$post->published_at?->format('d.m.Y')}}</span>
                </div>
            </div>
        </a>
        @endforeach
    </div>
    <div class="mt-8">{{$posts->links()}}</div>
</div>
@endsection