@extends('layout.master')
@section('meta')
    @include('layout.partials.seo', [
        'title' => $articleCategory->meta_title,
        'description' => $articleCategory->meta_description,
        'keywords' => $articleCategory->meta_keywords,
        'image' => $articleCategory->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_CATEGORY_MEDIA_PATH, 'webp')['url'],
        'schema' => $articleCategory->schema
    ])
@endsection
@section('content')
    <main id="content">
        <div class="bg-img-hero text-center mb-1"
             style="background-image: url({{$articleCategory->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_CATEGORY_BANNER_MEDIA_PATH, 'webp')['url']}});"
             role="img"
             title="{{$articleCategory->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_CATEGORY_BANNER_MEDIA_PATH)['title']}}"
             aria-label="{{$articleCategory->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_CATEGORY_BANNER_MEDIA_PATH)['alt']}}">
            <div class="container space-top-xl-3 py-6 py-xl-0">
                <div class="row justify-content-center py-xl-4">
                    <!-- Info -->
                    <div class="py-xl-10 py-5">
                        <h1 class="font-size-40 font-size-xs-30 text-white font-weight-bold mb-0">{{$articleCategory->heading}}</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb breadcrumb-no-gutter justify-content-center mb-0">
                                <li class="breadcrumb-item font-size-14">
                                    <a class="text-white" href="{{route('home')}}">{{__('general.home')}}</a>
                                </li>
                                <li class="breadcrumb-item font-size-14">
                                    <a class="text-white" href="{{route('blog.category')}}">{{__('general.blog')}}</a>
                                </li>
                                <li class="breadcrumb-item custom-breadcrumb-item font-size-14 text-white active"
                                    aria-current="page"> {{$articleCategory->name}}
                                </li>
                            </ol>
                        </nav>
                    </div>
                    <!-- End Info -->
                </div>
            </div>
        </div>
        <div class="recent-article-block recent-article-v1">
            <div class="container space-1 mt-3 mb-lg-4">
                <div class="w-md-80 w-lg-75 text-center mx-md-auto mb-5">
                    <h2 class="section-title text-black font-size-30 font-weight-bold mb-0">{{$articleCategory->heading}}</h2>
                    {!! $articleCategory->description !!}
                </div>
                <div class="row">
                    @foreach($articles as $article)
                       @include('layout.partials.article_box',['article' => $article , 'style'=>'home'])
                    @endforeach
                </div>
                {{$articles->links()}}
            </div>
        </div>
        @include('layout.partials.faqs')
        @include('layout.partials.partners')
    </main>
@endsection