@extends('frontend.layouts.app')

@section('content')
<div class="breadcumb-area style2 bg-smoke4">
  <div class="breadcumb-wrapper" data-bg-src="{{ URL::asset('frontend/assets/img/bg/breadcumb-bg.jpg')}}">
    <div class="container">
      <div class="breadcumb-content">
        <h1 class="breadcumb-title">Blog</h1>
        <ul class="breadcumb-menu">
          <li><a href="{{ url('/')}}">Home</a></li>
          <li>Blog</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<section class="th-blog-wrapper space-top space-extra-bottom">
  <div class="container">
    <div class="row">
      @foreach($blogs as $blog)
      <div class="col-xxl-4 col-lg-4">
        <div class="th-blog blog-single has-post-thumbnail h-100 d-flex flex-column">
          <div class="blog-img" data-slider-options='{"effect":"fade"}'>
            <div class="swiper-slide"><a href="{{ url('/blog-details/'.$blog->slug) }}"><img src="{{ asset('uploads/blog/images/'.$blog->image) }}" alt="Blog Image"></a></div>
          </div>
          <div class="blog-content flex-grow-1 d-flex flex-column">
            <div class="blog-meta"><a class="author" href="{{ url('/blog-details/'.$blog->slug) }}"><i class="fa-light fa-user"></i>by Admin</a><a href="{{ url('/blog-details/'.$blog->slug) }}"><i class="fa-regular fa-calendar"></i>{{ $blog->created_at->format('F d, Y') }}</a></div>
            <h2 class="blog-title"><a href="{{ url('/blog-details/'.$blog->slug) }}">{{ $blog->title }}</a></h2>
            <p class="blog-text flex-grow-1">{{ Str::words(strip_tags($blog->description), 20, '...') }}</p>
            <div class="mt-auto">
              <a href="{{ url('/blog-details/'.$blog->slug) }}" class="th-btn style4 th-icon">Read More <i class="fa-light fa-arrow-right-long"></i></a>
            </div>
          </div>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>
@endsection

@section('custom_script')

@endsection