@extends('public.layout')

@section('title', 'Blog')

@section('content')

<h1 class="text-3xl font-bold mb-2">Blog</h1>
<p class="text-gray-500 mb-10">Artikel, pengumuman, dan berita dari Persegi</p>

<div class="grid md:grid-cols-3 gap-6">
    @forelse($posts as $post)
    <a href="{{ route('blog.detail', $post) }}" class="bg-white rounded-xl shadow hover:shadow-md transition p-5 block">
        <div class="flex items-center gap-2 mb-2">
            <span class="text-xs px-2 py-0.5 rounded-full font-medium
                {{ $post->category === 'pengumuman' ? 'bg-yellow-100 text-yellow-700' : ($post->category === 'berita' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600') }}">
                {{ ucfirst($post->category) }}
            </span>
            <span class="text-xs text-gray-400">{{ $post->published_at->format('d M Y') }}</span>
        </div>
        <h3 class="font-bold text-gray-800 mb-2">{{ $post->title }}</h3>
        <p class="text-sm text-gray-500 line-clamp-3">{{ strip_tags($post->content) }}</p>
        <div class="text-xs text-gray-400 mt-3">{{ $post->author->name }}</div>
    </a>
    @empty
    <p class="text-gray-400 col-span-3">Belum ada artikel.</p>
    @endforelse
</div>

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

@endsection