@extends('layout.layout')
@section('meta')
    @include('layout.partials.seo', [
        'title' =>  $category->meta_title ,
        'description' => $category->meta_description,
        'keywords' => $category->meta_keywords,
        'image' => $category->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::ARTICLE_CATEGORY_MEDIA_PATH, 'webp')['url'],
        'schema' => $category->schema
    ])
@endsection
@section('content')
    <main class="main">
        <div class="page-header text-center"
         style="background: url({{$category->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::ARTICLE_CATEGORY_BANNER_MEDIA_PATH , 'webp')['url']}}) no-repeat center top/cover;"
         title="{{$category->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::ARTICLE_CATEGORY_BANNER_MEDIA_PATH)['title']}}"
         role="img"
         aria-label="{{$category->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::ARTICLE_CATEGORY_BANNER_MEDIA_PATH)['alt']}}"
        >
            <div class="container">
                <h1 class="page-title">{{$category->heading}}
                <span>
                {!!$category->description!!}
                </span>
                </h1>
            </div>
        </div>
        <nav aria-label="breadcrumb" class="breadcrumb-nav border-0 mb-0">
            <div class="container">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('general.home') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('allblog') }}">{{ __('blog.allblog') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{$category->name}}</li>
                </ol>
            </div>
        </nav>
        <div class="mb-2"></div>

        <div class="blog-posts">
            <div class="container">
                <div class="row">
                    @foreach ($articles as $article)
                    <div class="col-md-3">
                    @include('layout.partials.article-box',['article' => $article])
                    </div>
                    @endforeach
                </div>
                <div class="row">
                    <nav aria-label="Page navigation">
                        <ul class="pagination justify-content-center">
                        {!!$articles->withQueryString()->onEachSide(2)->links() !!}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>


    </main>
    @include('layout.partials.faq')
    @include('layout.partials.news_letter')

@endsection