@extends('layouts.app')

@section('title', 'الأخبار والمناسبات')

@section('content')
@include('components.page-header', ['title' => 'الأخبار والمناسبات'])
<section class="section">
    <div class="container">
        <div class="news-grid">
            @forelse($news as $article)
                <article class="news-card">
                    @if($article->image)
                        <img src="{{ asset('storage/'.$article->image) }}" alt="{{ $article->title }}">
                    @endif
                    <div class="news-card-body">
                        <small style="color:#999;">{{ $article->published_at?->format('Y-m-d') }}</small>
                        <h3><a href="{{ route('news.show', $article->slug) }}">{{ $article->title }}</a></h3>
                        <p>{{ $article->excerpt ?? \Illuminate\Support\Str::limit(strip_tags($article->content), 120) }}</p>
                        <a href="{{ route('news.show', $article->slug) }}" class="btn-outline">اقرأ المزيد</a>
                    </div>
                </article>
            @empty
                <p>لا توجد أخبار منشورة حالياً.</p>
            @endforelse
        </div>
        <div class="pagination">{{ $news->links() }}</div>
    </div>
</section>
@endsection