@section('title')
  {{ $article->title ?? 'Latest Blogs' }}
@endsection
@use('App\Models\Articles')
@extends('accessskills.welcome')
@section('content')
  <!-- =========
                        =Page Header Section Starts Here========== -->
  <div class="pageheader"
    style="background-image:url({{ isset($article->cover_photo) ? asset($article->cover_photo) : asset('accessskills/assets/images/bg/home1/2.png') }})">
    <div class="container">
      <div class="pageheader__content">
        <h2>Latest News, Blog & Articles</h2>
      </div>
    </div>
  </div>
  <!-- ==========Page Header Section Ends Here========== -->
  <!-- ===============>> Blog section start here <<================= -->
  <section class="blog blog--style1 padding-top padding-bottom" data-aos="fade-up" data-aos-duration="800">
    <div class="container">
      <div class="blog__wrapper">
        <div class="row g-4">
          @foreach (CCMS::getBlogs() as $Blog)
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-duration="700">
              <div class="blog__item">
                <div class="blog__item-inner">
                  <div class="blog__thumb">
                    <a href="{{ route('blogs.single', $Blog->alias) }}"><img src="{{ asset($Blog->thumb) }}"
                        alt="{{ $Blog->title }}" class="img-responsive" /></a>
                  </div>
                  <div class="blog__content">
                    <div class="blog__content-top">
                      {{-- <span class="blog__meta-tag blog__meta-tag--cat3">Art & Design</span> --}}
                    </div>
                    <h6><a href="{{ route('blogs.single', $Blog->alias) }}">{{ $Blog->title }}</a></h6>
                    <div class="blog__content-bottom blog__content-bottom--border">
                      <a href="{{ route('blogs.single', $Blog->alias) }}"> <span class="icon-right-arrow"></span> Read
                        More</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      </div>
    </div>
  </section>
  <!-- ===============>> Blog section end here <<================= -->
@endsection