@extends('layouts.web')

@section('content')
<section id="latest-blog" class="py-5">
      <div class="container-fluid">
        <div class="row">
          <div class="section-header d-flex align-items-center justify-content-between my-5">
            <h2 class="section-title">Artikel</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            @foreach ($article as $item)
              <article class="post-item card border-0 shadow-sm p-3">
                <div class="image-holder zoom-effect">
                  <a href="#">
                    <img src="{{ asset('img_assets/article/'. $item->image) }}" alt="post" class="card-img-top">
                  </a>
                </div>
                <div class="card-body">
                  <div class="post-meta d-flex text-uppercase gap-3 my-2 align-items-center">
                    <div class="meta-date">📅 {{ date('d-m-Y', strtotime($item->created_at)) }}</div>
                  </div>
                  <div class="post-header">
                    <h3 class="post-title">
                      <a href="{{ route('article.detail', $item->id) }}" class="text-decoration-none">{{ Illuminate\Support\Str::limit($item->title, 20, '...') }}</a>
                    </h3>
                    <p>{{ Illuminate\Support\Str::limit($item->description, 20, '...') }}</p>
                  </div>
                </div>
              </article>
            @endforeach
          </div>
        </div>
      </div>
    </section>
@endsection