@extends('frontend.layouts.master')

@section('title','blog-page')

@section('header')

  <!-- Page Header-->
  <header class="masthead" style="background-image: url('frontend-asset/assets/img/home-bg.jpg')">
            <div class="container position-relative px-4 px-lg-5">
                <div class="row gx-4 gx-lg-5 justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-7">
                        <div class="site-heading">
                            <h1>Blogs</h1>
                            <span class="subheading">A Blog Theme by Start Bootstrap</span>
                        </div>
                    </div>
                </div>
            </div>
        </header>

@endsection('header')

@section('content')

<div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">

                    <!-- Post preview-->

                    @foreach($blogs as $blogsList)

                    
                    <div class="post-preview">
                        <a href="blog_details/{{$blogsList->url}}">
                            <h2 class="post-title">{{$blogsList->title}}</h2>
                            <h3 class="post-subtitle">{{$blogsList->short_description}}</h3>
                        </a>
                        <p class="post-meta">
                            Posted by
                            <a href="#!">{{$blogsList->user->name}}</a>
                            on {{$blogsList->created_at->format('F d Y')}}
                        </p>
                    </div>               
                   <!-- Divider-->
                    @if(!$loop->last)
                    <hr class="my-4" />
                  @endif
                    @endforeach
                  
         
                    <!-- Pager-->
                    

                    <div class="container text-center">
 
  <ul class="pagination ">
  {{ $blogs->links()}}
  </ul>
</div>
<br>
<br>
<br>
                </div>
            </div>
        </div>
    
@endsection('content')