@extends('layouts.app')
@section('title', t('المدونة','Blog').' — '.site_name())
@section('content')
<section class="page-hero"><div class="container"><h1>{{ t('المدونة','Blog') }}</h1><p>{{ t('آخر المقالات والأخبار','Latest articles and news') }}</p></div></section>
<section class="section"><div class="container">
  @if($posts->count() === 0)
    <p style="text-align:center;color:#64748b;padding:48px">{{ t('لا يوجد مقالات بعد','No posts yet') }}</p>
  @else
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px">
    @foreach($posts as $post)
    <article style="border:1.5px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;transition:all .3s">
      @if($post->cover)<img src="{{ asset($post->cover) }}" style="width:100%;height:200px;object-fit:cover">@endif
      <div style="padding:20px">
        <div style="font-size:11px;color:#94a3b8;margin-bottom:8px">
          {{ $post->published_at->format('Y-m-d') }} | {{ $post->category }}
        </div>
        <h2 style="font-size:18px;font-weight:700;margin-bottom:8px">
          <a href="{{ route('blog.post',$post->slug) }}" style="color:#0f172a">{{ is_ar()?$post->title_ar:$post->title_en }}</a>
        </h2>
        <p style="font-size:14px;color:#64748b;line-height:1.7">{{ Str::limit(is_ar()?$post->excerpt_ar:$post->excerpt_en,100) }}</p>
        <a href="{{ route('blog.post',$post->slug) }}" class="btn btn-outline btn-sm" style="margin-top:12px">{{ t('اقرأ المزيد','Read More') }} →</a>
      </div>
    </article>
    @endforeach
  </div>
  <div style="margin-top:32px">{{ $posts->links() }}</div>
  @endif
</div></section>
@endsection