@extends('layouts.publik')

@section('content')
<div class="container py-5">
    <div class="mb-4">
        <h3 class="fw-bold text-success"><i class="fa-solid fa-newspaper me-2"></i>BERITA DESA</h3>
        <hr>
    </div>

    <div class="row">
        @forelse($berita as $b)
        <div class="col-md-4 mb-4">
            <div class="card h-100 shadow-sm border-0">
                <img src="{{ $b->gambar ? asset('storage/'.$b->gambar) : 'https://placehold.co/600x400' }}" class="card-img-top" alt="{{ $b->judul }}" style="height: 200px; object-fit: cover;">
                <div class="card-body">
                    <h5 class="card-title fw-bold">{{ $b->judul }}</h5>
                    <small class="text-muted d-block mb-3"><i class="fa-regular fa-calendar me-1"></i>{{ $b->created_at->format('d M Y') }}</small>
                    <p class="card-text text-secondary">{{ \Illuminate\Support\Str::limit(strip_tags($b->isi), 120) }}</p>
                </div>
                <div class="card-footer bg-white border-0 pb-3">
                    <a href="{{ route('publik.berita.show', $b->slug) }}" class="btn btn-outline-success w-100 btn-sm">Baca Detail →</a>
                </div>
            </div>
        </div>
        @empty
        <p class="text-center text-muted py-5">Saat ini belum ada arsip kabar berita desa.</p>
        @endforelse
    </div>

    <div class="d-flex justify-content-center mt-4">
        {{ $berita->links() }}
    </div>
</div>
@endsection