@extends('themes.'.config('smartekcms.themes.frontend').'.app', [
    'title' => trans('front.blogs.blogs'),
    'meta_description' => trans('front.blogs.meta_description', ['appName' => $general_settings->website_title]),
    'model_type' => 'blog',
])

@section('head')
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "{{ trans('front.general.home') }}",
        "item": "{{ route('home') }}"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "{{ trans('front.blogs.blogs') }}",
        "item": "{{ route('blogs/', ['blogs' => trans('route.frontend.blogs') ]) }}"
      }]
    }
    </script>
@endsection

@section('content')

    <!-- ====== Banner Start ====== -->
    <section class="st-page-banner banner-2">
        <!--v2 banner-->
        <div class="card bg-transparent">
            <div class="container" style="z-index: 1;">
                <div class="st-banner-content">
                    <h1 class="text-center">{{ trans('front.blogs.blogs') }}</h1>
                </div>
                <ul class="st-breadcrumb">
                    <li><a href="{{ route('home') }}">{{ trans('front.general.home') }}</a></li>
                    <li class="active"><a href="{{ route('blogs/', ['blogs' => trans('route.frontend.blogs') ]) }}">{{ trans('front.blogs.blogs') }}</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- ====== Banner End ====== -->

    <!-- ====== Blogs Start ====== -->
    <section class="st-blogs-grid">
        <div class="container">
            <div class="row">
                @foreach($blogs as $blog)
                <div class="col-lg-4 col-md-6">
                    <div class="ud-single-blog">
                        <div class="ud-blog-image">
                            <a class="grid-image ratio ratio-16x9" href="{{ route('blogs/blog', ['blogs' => trans('route.frontend.blogs'), 'slug' => $blog->slug ]) }}">
                                <img class="card-img-top" src="{{ $blog->getFirstMediaUrlTraitAttribute('cover', 'thumb_512x288', true) }}" alt="{{ $blog->title }} - blog">
                            </a>
                        </div>
                        <div class="ud-blog-content">
                            <span class="ud-blog-date">{{ $blog->published_at->diffForHumans() }}</span>
                            <h3 class="ud-blog-title">
                                <a class="stretched-link" href="{{ route('blogs/blog', ['blogs' => trans('route.frontend.blogs'), 'slug' => $blog->slug ]) }}">
                                    {{ $blog->title }}
                                </a>
                            </h3>
                            <p class="ud-blog-desc">
                                {{ Illuminate\Support\Str::limit(strip_tags(htmlspecialchars_decode($blog->text)),75) }}
                            </p>
                        </div>
                    </div>
                </div>
                @endforeach
                {{ optional($blogs ?? '')->links('themes.'.config('smartekcms.themes.frontend').'.layouts.paginate') }}
            </div>
        </div>
    </section>
    <!-- ====== Blogs End ====== -->
@endsection

@section('js')
	@parent
@endsection