@extends('site.layouts.app')
@section('content')
  <!-- PAGE HERO -->
  <section class="page-hero">
    <div class="page-hero-bg">
      <img src="{{ asset('site/images/page-hider.png') }}" alt="مقالات">
    </div>
    <div class="breadcrumb">
      <a href="{{ route('site.home') }}">الرئيسية</a>
      <span class="separator">←</span>
      <span>مقالات</span>
    </div>
  </section>

  <!-- ARTICLES -->
  <section class="articles-section">
    <div class="container">
      <div class="articles-grid">
        @forelse($articles as $article)
          <div class="article-card fade-in">
            <div class="article-card-image">
              <img src="{{ $article->image ? asset('storage/'.$article->image) : asset('site/images/eye-exam.png') }}" alt="{{ $article->title }}">
            </div>
            <div class="article-card-content">
              <h3>{{ $article->title }}</h3>
              <p>{{ $article->excerpt ?? Str::limit($article->content, 140, '...') }}</p>
              <a href="{{ route('site.article-details', ['article' => $article->slug]) }}" class="btn">اعرف اكتر <span class="arrow">←</span></a>
            </div>
          </div>
        @empty
          <div class="article-card fade-in" style="grid-column: 1 / -1; text-align: center;">
            <h3>لا توجد مقالات متاحة حالياً</h3>
            <p>سيتم إضافة المقالات في لوحة التحكم. الرجاء العودة لاحقاً.</p>
          </div>
        @endforelse
      </div>
    </div>
  </section>
@endsection