@extends('layouts.app')
@section('header')
    <link rel="stylesheet" href="{{ asset('css/blog.css') }}"/>
@endsection
@section('content')
    <div class="container body-content ps-0 pe-0">
        <div class="row">
            <header class="py-3 bg-light col-12 border-bottom mb-4">
                <div class="text-center my-5">
                    <h1 class="fw-bolder">{{ $title }}</h1>
                    <p class="lead mb-0">{!! $description !!}</p>
                </div>
            </header>
            <div class="col-12 p-0 m-0">
                <div class="row p-0 m-0">
                    <div class="col-lg-9 col-12">
                        <div class="row">
                            @forelse($articles as $article)
                                <div class="col-lg-4">
                                    <div class="card mb-4">
                                        @if($article->image)
                                            <a href="{{ route('articles.show', $article->slug) }}">
                                                <img class="card-img-top"
                                                     src="{{ asset($article->image) }}"
                                                     alt="{{ $article->title }}" />
                                            </a>
                                        @endif
                                        <div class="card-body">
                                            <div class="small text-muted">{{ jdate($article->created_at)->ago() }}</div>
                                            <h2 class="card-title h4">{{ $article->title }}</h2>
                                            <p class="card-text">{{ $article->description }}</p>
                                            <a class="btn btn-primary float-end" href="{{ route('articles.show', $article->slug) }}">ادامه مطلب</a>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="alert alert-danger col-12" role="alert">
                                    <span class="fa fa-ban"></span>
                                    هیچ مطلبی یافت نشد
                                </div>
                            @endforelse
                            <div class="col-12">
                                {!! $articles->appends($_GET)->links() !!}
                            </div>
                        </div>
                    </div>
                    @include('frontend.articles.sidebar', [ 'action' => '', 'show_widgets' => false ])
                </div>
            </div>
        </div>
    </div>
@endsection