@php
    use App\Http\Resources\Shop\Blog\BlogArticleResource;
@endphp

@php /** @var BlogArticleResource $blogArticleResource */ @endphp
@extends('shop::layout.main')

@section('title',  trans('shop-seo.blogs_meta_title'))

@section('meta_title',  trans('shop-seo.blogs_meta_title'))
@section('meta_description',  trans('shop-seo.blogs_meta_description'))
@section('meta_type',  'article')

@section('content-wrapper')

    <section class="section">
        <div class="container-lg">

            <div class="section__header  text-center">
                <h1 class="section__title  section__title--lg">
                    {{ trans('shop-blog.page_blog') }}
                </h1>
                <div class="section__text">
                    {{ trans('shop-blog.page_blog_description') }}
                </div>
            </div>

            <div class="row">
                @foreach($blogArticleCollection as $blogArticleResource)
                    <div class="col-lg-4  col-md-6  mb-5">
                        <div class="card">
                            <div class="card__preview">
                                <a href="{{ $blogArticleResource['link'] }}"
                                   title="{{ $blogArticleResource['title'] }}">
                                    <picture>
                                        <source srcset="{{ $blogArticleResource['image']['webp'] }}" type="image/webp">
                                        <img src="{{ $blogArticleResource['image']['source'] }}"
                                             alt="{{ $blogArticleResource['title'] }}">
                                    </picture>
                                </a>
                            </div>
                            <div class="card__content">
                                <time class="card__pubdate" datetime="{{ $blogArticleResource['created_at'] }}">
                                    {{ $blogArticleResource['created_at'] }}
                                </time>
                                <h3 class="card__title">
                                    <a href="{{ $blogArticleResource['link'] }}"
                                       title="{{ $blogArticleResource['title'] }}">
                                        {{ $blogArticleResource['title'] }}
                                    </a>
                                </h3>
                                <div class="card__text">
                                    {!! $blogArticleResource['short_description'] !!}
                                </div>
                                <a class="link  link--primary  fw-500" href="{{ $blogArticleResource['link'] }}"
                                   title="trans('shop-blog.page_read_more')">
                                    {{ trans('shop-blog.page_read_more') }}
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>

@endsection