@extends('frontend.layouts.master')
@section('content')
    <section class="bg-transparent section border-0 m-0 py-2">
        <div class="container-xl">
            <div class="row">
                @foreach($blogs as $key => $blog)
                    <div class="col-md-4 mb-3">
                        <article class="post post-medium mb-5 rounded-3 p-2" style="box-shadow: 0 0 3px #a3484d;">
                            <div class="post-image">
                                <a href="{{route('blogs.show', $blog->slug)}}">
                                    <img src="{{$blog->getFirstMediaUrl(Helper::BLOGS_COLLECTION) }}"
                                         style="width: 100%; aspect-ratio: 4/4; object-fit: contain;"
                                         class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-2" alt=""/>
                                </a>
                            </div>

                            <div class="post-content">
                                <h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-1">
                                    <a href="{{route('blogs.show', $blog->slug)}}">
                                        {{$blog->title}}
                                    </a>
                                </h2>
                                <p class="mb-0">
                                    {{$blog->description}}
                                </p>
                                <div class="post-meta">
                                <span>
                                    <i class="fa-regular fa-thumbs-up"></i>
                                    <a href="#">{{$blog->likes}} Likes</a>
                                </span>
                                    <span>
                                    <i class="far fa-comments"></i>
                                    <a href="#">{{$blog->comments}} Comments</a>
                                </span>
                                    <span class="d-block mt-2">
                                        @foreach($blog->tags as $index => $tag)
                                            <a href="javascript: void(0);" class="btn btn-xs btn-light text-1 text-uppercase">
                                                # {{$tag->name}}
                                            </a>
                                        @endforeach
                            </span>
                                </div>

                            </div>
                        </article>
                    </div>
                @endforeach
                <div class="col-12 mt-4">
                    {{$blogs->links() }}
                    </div>

            </div>
        </div>
    </section>
@endsection