@extends('layout.master')
@section('meta')
    @include('layout.partials.seo', [
        'title' => nova_get_setting_translate('blog_meta_title'),
        'description' => nova_get_setting_translate('blog_meta_description'),
        'keywords' => nova_get_setting_translate('blog_meta_keywords'),
        'image' => Storage::url(nova_get_setting('blog_banner')),
        'schema' => nova_get_setting('blog_schema')
    ])
@endsection
@section('content')
    <main id="content">
        <div class="bg-img-hero text-center mb-1"
             style="background-image: url({{Storage::url(nova_get_setting('blog_banner'))}});"
             role="img"
             title="{{nova_get_setting_translate('blog_banner_title')}}"
             aria-label="{{nova_get_setting_translate('blog_banner_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">{{nova_get_setting_translate('blog_title')}}</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 custom-breadcrumb-item font-size-14 text-white active"
                                    aria-current="page"> {{nova_get_setting_translate('blog_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">{{nova_get_setting_translate('blog_header')}}</h2>
                    {!! nova_get_setting_translate('blog_text') !!}
                </div>
                <div class="row">
                    @foreach($articleCategories as $articleCategory)
                        <div class="col-md-6 col-lg-3 mt-4">
                            <div class="mb-4 mb-lg-0 text-md-center text-lg-left">
                                <a class="d-block mb-3" href="{{route('blog.index' , [$articleCategory->slug])}}">
                                    <img class="img-fluid rounded-xs w-100"
                                         src="{{$articleCategory->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_CATEGORY_MEDIA_PATH,'webp')['url']}}"
                                         alt="{{$articleCategory->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_CATEGORY_MEDIA_PATH)['alt']}}"
                                         title="{{$articleCategory->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_CATEGORY_MEDIA_PATH)['title']}}">
                                </a>
                                <h6 class="text-gray-6 font-size-17 pt-xl-1 font-weight-bold font-weight-bold mb-1">
                                    <a href="{{route('blog.index' , [$articleCategory->slug])}}">{{$articleCategory->name}}</a>
                                </h6>
                                <a class="text-gray-1" href="#">
                                    <span>{{ \Carbon\Carbon::parse($articleCategory->created_at)->format('F d, Y') }}</span>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
                {{$articleCategories->links()}}
            </div>
        </div>
        @include('layout.partials.faqs')
        @include('layout.partials.partners')
    </main>
@endsection