@extends('layout.layout')
@section('meta')
    @include('layout.partials.seo', [
        'title' => nova_get_setting_translate('blog_site_title') ?? env('APP_NAME'),
        'description' =>nova_get_setting_translate('blog_site_description') ?? env('APP_NAME'),
        'keywords' => nova_get_setting_translate('blog_site_keywords') ?? env('APP_NAME'),
        'image' => Storage::url(nova_get_setting('blog_banner')),
        'schema' => $settings['blog_schema'] ?? ''
    ])
@endsection

@section('content')
    <main class="main">
        <div class="page-header text-center" style="background-image: url('{{ Storage::url(nova_get_setting('blog_banner')) }}');background-size: cover;background-position: center;background-repeat: no-repeat"
        title="{{nova_get_setting_translate('blog_banner_title')}}"
         aria-label="{{nova_get_setting_translate('blog_banner_alt')}}">
            <div class="container">
                <h1 class="page-title">
                    @isset($settings['blog_title'])
                    {{json_decode($settings['blog_title'])->{app()->getLocale()} }}
                    @endisset
                    <span>
                        @isset($settings['blog_description'])
                        {!!json_decode($settings['blog_description'])->{app()->getLocale()} !!}
                        @endisset
                </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 active" aria-current="page">
                        @isset($settings['blog_title'])
                            {{json_decode($settings['blog_title'])->{app()->getLocale()} }}
                        @endisset
                    </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