@extends('layouts.app')
@section('content')
<div class="row mainbanner"
    style="background: url('http://127.0.0.1:8000/assets/img/testimonials-bg.jpg') no-repeat center center; background-size: cover;">
    <div class="col-12 py-5 text-center text-white">
        <h1 class="text-center heading h1 p-4 text-white">
            Blogs for Tag: {{ $tag->name }}
        </h1>
    </div>
</div>

<div class="container mt-5">
    <div class="row">
        @forelse($blogs as $blog)
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card h-100 shadow-sm">
                    @if($blog->thumbnail)
                        <img src="{{ asset('storage/'.$blog->thumbnail) }}" class="card-img-top" alt="{{ $blog->title }}">
                    @endif
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">{{ $blog->title }}</h5>
                        <p class="card-text text-truncate">{!! Str::limit(strip_tags($blog->content), 120) !!}</p>
                        <div class="mt-auto">
                            <a href="{{ url('/blog/'.$blog->slug) }}" class="btn btn-dark btn-sm">Read More</a>
                        </div>
                    </div>
                    <div class="card-footer d-flex justify-content-between align-items-center">
                        <small>{{ $blog->created_at->format('M d, Y') }}</small>
                        @if($blog->tags->count())
                            <div>
                                @foreach($blog->tags as $tag)
                                    <span class="badge bg-secondary">{{ $tag->name }}</span>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12 text-center">
                <p class="text-muted">No blogs found for this tag.</p>
            </div>
        @endforelse
    </div>

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