@extends('frontend.layouts.master')
@section('title')
    Unbound Bangladesh | Blogs
@endsection
@section('content')
    <section class="tours-hero bg-success text-white py-5">
        <div class="container">
            <h1 class="display-4 fw-bold mb-3 text-center">Explore Blogs</h1>
        </div>
    </section>
    <nav class="breadcrumb-nav" aria-label="breadcrumb">
        <div class="container">
            <div class="d-flex align-items-center text-white">
                <i class="bi bi-house-door me-2"></i>
                <a href="{{ route('home.home') }}" class="text-white text-decoration-none me-2">Home</a>
                <span class="me-2">•</span>
                <span>Blogs</span>
            </div>
        </div>
    </nav>

    <section class="tours-content py-5">
        <div class="container">
            <div class="row">
                @foreach ($posts as $post)
                    <div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="bg-transparent border-0 card">
                            <div class="post-img-wrapper">
                                @if ($post->image)
                                    <img src="{{ $post->image ? $post->image : asset('frontend/img/travel-story/travel-story-1.png') }}"
                                        alt="Post Image" loading="lazy">
                                @else
                                    <div class="no-image">No Image</div>
                                @endif
                            </div>
                            <div class="px-0 card-body text-start">
                                <span class="mb-2 badge bg-success">{{ $post?->category?->name ?? '-' }}</span>
                                <h5 class="card-title fw-bold">{{ Str::limit($post->title, 90) }}</h5>
                                <p class="card-text text-muted description">{{ Str::limit($post->description, 180) }}</p>
                                <a href="{{ route('home.post.details', $post->slug) }}"
                                    class="text-decoration-none text-dark read-more">
                                    Read More <span class="text-success">→</span>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="mt-5">
                {{ $posts->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </section>
@endsection