@extends('web.layout.app')

@section('content')
  <main id="content" class="wrapper layout-page">
  <section class="page-title z-index-2 position-relative">
    <div class="bg-body-secondary">
      <div class="container">
        <nav class="py-4 lh-30px" aria-label="breadcrumb">
          <ol class="breadcrumb justify-content-center py-1">
            <li class="breadcrumb-item"><a href="{{url('/')}}">{{translate('Home')}}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{translate('Blog')}} </li>
          </ol>
        </nav>
      </div>
    </div>
    <div class="text-center py-13">
      <div class="container">
        <h2 class="mb-0">{{translate('Blog')}}</h2></div>
    </div>
  </section>
  <div class="container mb-lg-18 mb-15 pb-3">
    <div class="row gy-50px">

      @foreach($blogs as $blog)

        <div class="col-md-6 col-lg-4">

          <article class="card card-post-grid-1 bg-transparent border-0" data-animate="fadeInUp">
            <figure class="card-img-top position-relative mb-10"><a href="{{url('blog/'.$blog->getTranslation('slug'))}}" class="hover-shine hover-zoom-in d-block" title="How to Plop Hair for Bouncy, Beautiful Curls">
                <img data-src="{{asset($blog->image)}}" class="img-fluids lazy-image w-100" alt="How to Plop Hair for Bouncy, Beautiful Curls" width="370" height="450" src="#">
              </a>
              <a  class="post-item-cate btn btn-light btn-text-light-body-emphasis btn-hover-bg-dark btn-hover-text-light fw-500 post-cat position-absolute top-100 start-50 translate-middle py-2 px-7 border-0" title="Life style">{{$blog->category->getTranslation('name')}}</a>
            </figure>
            <div class="card-body text-center px-md-9 py-0">
              <h4 class="card-title lh-base mb-9"><a class="text-decoration-none"  title="How to Plop Hair for Bouncy, Beautiful Curls">{{$blog->category->getTranslation('name')}}</a></h4>
              <ul class="post-meta list-inline lh-1 d-flex flex-wrap justify-content-center m-0">

                <li class="list-inline-item">{{date_format($blog->created_at,'Y m d')}}</li>
              </ul>
            </div>
          </article>
        </div>
      @endforeach



    </div>
    <nav class="d-flex mt-13 pt-3 justify-content-center " aria-label="pagination" data-animate="fadeInUp">
      {{ $blogs->links() }}
    </nav>
  </div>
</main>

@endsection