@extends('layouts.public')

@section('title', 'مقالات - asrit.ir')

@section('content')
    <div class="container px-4 py-5">
        <h2 class="pb-2 border-bottom text-center">اخبار و مقالات</h2>

        <div class="row g-4 py-5">
            @forelse($articles as $article)
                <div class="col-md-6 col-lg-4">
                    <div class="card shadow-sm h-100">
                        @if($article->image_path)
                            <a href="{{ route('articles.show', $article) }}">
                                <img src="{{ Storage::url($article->image_path) }}" class="card-img-top" alt="{{ $article->title }}" style="aspect-ratio: 16/9; object-fit: cover;">
                            </a>
                        @endif
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">{{ $article->title }}</h5>
                            <p class="card-text text-muted">

                                منتشر شده در:  {{ to_persian_nums(jdate($article->published_at)->format('d F Y')) }}


                            </p>

                            <p class="card-text flex-grow-1">{{ $article->summary ?? Str::limit(strip_tags($article->body), 150) }}</p>
                            <a href="{{ route('articles.show', $article) }}" class="btn btn-primary mt-auto align-self-start">ادامه مطلب</a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center">
                    <p>در حال حاضر مقاله‌ای برای نمایش وجود ندارد.</p>
                </div>
            @endforelse
        </div>

        {{-- Pagination Links --}}
        <div class="d-flex justify-content-center">
            {{ $articles->links() }}
        </div>
    </div>
@endsection