@extends('user_layout.app')

@section('content')
<div class="container py-5">

    <h1 class="text-center mb-5">Our Blog</h1>

    <div class="row">
        @forelse($blogs as $blog)
        <div class="col-md-4 mb-4">
            <div class="card h-100 shadow-sm">

                @if($blog->image)
                    <img src="{{ asset('uploads/blogs/'.$blog->image) }}"
                         class="card-img-top"
                         style="height:220px; object-fit:cover;">
                @endif

                <div class="card-body">
                    <h5 class="card-title">{{ $blog->title }}</h5>

                    <p class="text-muted">
                        {{ \Illuminate\Support\Str::limit(strip_tags($blog->content), 120) }}
                    </p>

                    <a href="{{ route('blogs.show', $blog->slug) }}"
                       class="btn btn-outline-dark btn-sm">
                        Read More
                    </a>
                </div>
            </div>
        </div>
        @empty
            <p class="text-center">No blogs available.</p>
        @endforelse
    </div>

    <!-- Pagination -->
    <div class="mt-4 d-flex justify-content-center">
        {{ $blogs->links() }}
    </div>

</div>
@endsection