@extends('layout')

@section('content')
    <div class="space-y-12">
        <div class="border-b border-gray-200 pb-5">
            <h1 class="text-3xl leading-6 font-bold text-gray-900">Последние публикации</h1>
            <p class="mt-2 max-w-4xl text-sm text-gray-500">Читайте мысли, идеи и истории.</p>
        </div>

        <div class="grid gap-8">
            @forelse($posts as $post)
                <article class="flex flex-col items-start bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 border border-gray-100">
                    <div class="flex items-center gap-x-4 text-xs">
                        <time datetime="{{ $post->published_at }}" class="text-gray-500">
                            {{ $post->published_at ? $post->published_at->format('d M, Y') : 'Черновик' }}
                        </time>
                    </div>
                    <div class="group relative mt-3">
                        <h3 class="text-xl font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
                            <a href="{{ route('posts.show', $post) }}">
                                <span class="absolute inset-0"></span>
                                {{ $post->title }}
                            </a>
                        </h3>
                        <p class="mt-3 line-clamp-3 text-sm leading-6 text-gray-600">
                            {{ Str::limit($post->content, 150) }}
                        </p>
                    </div>
                </article>
            @empty
                <p class="text-gray-500 text-center py-10">Публикаций пока нет.</p>
            @endforelse
        </div>

        <div class="mt-8">
            {{ $posts->links() }}
        </div>
    </div>
@endsection