@extends('layout', ['page_title' => 'Blogs', 'page_slug' => 'blogs'])
@section('content')
<section class="blog-area top-padding">
    <div class="container">
        <div class="row">
            @foreach ($posts as $post)
                <div class="col-lg-6 mb-5 mb-lg-0">
                    <div class="blog-left-sidebar">
                        <article class="blog-item">
                            <div class="blog-item-img">
                                <img class="card-img rounded-0" src="{{asset('images/blogs/'.$post->img)}}" alt="">
                                <a href="#" class="blog-item-date">
                                    
                                    <h3>{{$post->created_at->format('d')}}</h3>
                                    <p>{{$post->created_at->format('M')}}</p>
                                </a>
                            </div>
                            <div class="blog-details">
                                <a class="d-inline-block" href="{{route('blogs.show',['post' => $post->slug])}}">
                                    <h2 class="blog-head">{{$post->title}}</h2>
                                </a>
                                <div class="blog-excerpt">{!! $post->body !!}</div>
                                <ul class="blog-info-link">
                                    <li>
                                        <span><i class="fa fa-user"></i> {{$post->user->name}}<span>
                                    </li>
                                </ul>
                            </div>
                        </article>
                    </div>
                </div>
            @endforeach
            {{-- <div class="col-lg-6 mb-5 mb-lg-0">
                <div class="blog-left-sidebar">
                    <article class="blog-item">
                        <div class="blog-item-img">
                            <img class="card-img rounded-0" src="{{asset('images/blogs/image_1.jpg.webp')}}" alt="">
                            <a href="#" class="blog-item-date">
                                <h3>16</h3>
                                <p>Sep</p>
                            </a>
                        </div>
                        <div class="blog-details">
                            <a class="d-inline-block" href="#">
                                <h2 class="blog-head">Google inks pact for new 35-storey office</h2>
                            </a>
                            <p>That dominion stars lights dominion divide years for fourth have don't stars is that he earth it first without heaven in place seed it second morning saying.</p>
                            <ul class="blog-info-link">
                                <li>
                                    <span><i class="fa fa-user"></i> Latest news<span>
                                </li>
                            </ul>
                        </div>
                    </article>
                </div>
            </div>
            <div class="col-lg-6 mb-5 mb-lg-0">
                <div class="blog-left-sidebar">
                    <article class="blog-item">
                        <div class="blog-item-img">
                            <img class="card-img rounded-0" src="{{asset('images/blogs/blog_thumb_1.webp')}}" alt="">
                            <a href="#" class="blog-item-date">
                                <h3>14</h3>
                                <p>Jan</p>
                            </a>
                        </div>
                        <div class="blog-details">
                            <a class="d-inline-block" href="#">
                                <h2 class="blog-head">Google inks pact for new 35-storey office</h2>
                            </a>
                            <p>That dominion stars lights dominion divide years for fourth have don't stars is that he earth it first without heaven in place seed it second morning saying.</p>
                            <ul class="blog-info-link">
                                <li>
                                    <span><i class="fa fa-user"></i> Latest news</span>
                                </li>
                            </ul>
                        </div>
                    </article>
                </div>
            </div>
            <div class="col-lg-6 mb-5 mb-lg-0">
                <div class="blog-left-sidebar">
                    <article class="blog-item">
                        <div class="blog-item-img">
                            <img class="card-img rounded-0" src="{{asset('images/blogs/blog_thumb_1.webp')}}" alt="">
                            <a href="#" class="blog-item-date">
                                <h3>16</h3>
                                <p>Sep</p>
                            </a>
                        </div>
                        <div class="blog-details">
                            <a class="d-inline-block" href="#">
                                <h2 class="blog-head">Google inks pact for new 35-storey office</h2>
                            </a>
                            <p>That dominion stars lights dominion divide years for fourth have don't stars is that he earth it first without heaven in place seed it second morning saying.</p>
                            <ul class="blog-info-link">
                                <li><span><i class="fa fa-user"></i> Latest news</span></li>
                            </ul>
                        </div>
                    </article>
                </div>
            </div>
            <div class="col-lg-6 mb-5 mb-lg-0">
                <div class="blog-left-sidebar">
                    <article class="blog-item">
                        <div class="blog-item-img">
                            <img class="card-img rounded-0" src="{{asset('images/blogs/blog_thumb_1.webp')}}" alt="">
                            <a href="#" class="blog-item-date">
                                <h3>14</h3>
                                <p>Jan</p>
                            </a>
                        </div>
                        <div class="blog-details">
                            <a class="d-inline-block" href="#">
                                <h2 class="blog-head">Google inks pact for new 35-storey office</h2>
                            </a>
                            <p>That dominion stars lights dominion divide years for fourth have don't stars is that he earth it first without heaven in place seed it second morning saying.</p>
                            <ul class="blog-info-link">
                                <li><span><i class="fa fa-user"></i> Latest news</span></li>
                            </ul>
                        </div>
                    </article>
                </div>
            </div> --}}
        </div>
        <div class="row">
            <div class="col-md-12">
                    {{$posts->links('pagination::bootstrap-5')}}
            </div>
        </div>
        {{-- <div class="row">
            <div class="col-lg-12 mb-5">
                <div class="blog-left-sidebar">
                    <nav class="blog-pagination justify-content-center d-flex">
                        <ul class="pagination">
                            <li class="page-item">
                                <a href="#" class="page-link" aria-label="Previous">
                                    <i class="fas fa-angle-left"></i>
                                </a>
                            </li>
                            <li class="page-item">
                                <a href="#" class="page-link">1</a>
                            </li>
                            <li class="page-item active">
                                <a href="#" class="page-link">2</a>
                            </li>
                            <li class="page-item">
                                <a href="#" class="page-link" aria-label="Next">
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div> --}}
    </div>
</section>
@endsection