@php
    use App\Http\Resources\Shop\Blog\BlogArticleResource;
    use App\Models\Blog\BlogArticle;
    use App\Helpers\Schema\SchemaHelper;
@endphp
@php /** @var BlogArticleResource $blogArticleResource */ @endphp
@php /** @var BlogArticle $blogArticle */ @endphp

@extends('shop::layout.main')

@section('title',  $blogArticleResource['title'])

@section('meta_title', $blogArticleResource['meta_title'])
@section('meta_description', $blogArticleResource['meta_description'])
@section('meta_image_path', $blogArticleResource['image']['source'])
@section('meta_type',  'article')

@section('content-wrapper')

    <article class="article">
        <div class="breadcrumbs  breadcrumbs--post">
            <ul class="breadcrumbs__list">
                <li class="breadcrumbs__item">
                    <a class="breadcrumbs__link" href="{{ route('home') }}">
                        <img class="img" src="{{ asset('shop/images/breadcrumbs-home.svg') }}"
                             alt="{{ trans('shop-blog.page_home') }}">
                    </a>
                </li>
                <li class="breadcrumbs__item">
                    <a class="breadcrumbs__link" href="{{ route('blogs.index') }}"
                       title="{{ trans('shop-blog.page_blog') }}">
                        {{ trans('shop-blog.page_blog') }}
                    </a>
                </li>
                <li class="breadcrumbs__item">
                    {{ $blogArticleResource['title'] }}
                </li>
            </ul>
        </div><!-- /.breadcrumbs -->

        <div class="article__header">
            <h1 class="article__title">
                {{ $blogArticleResource['title'] }}
            </h1>
            <time class="article__pubdate" datetime="{{ $blogArticleResource['created_at'] }}">
                {{ $blogArticleResource['created_at'] }}
            </time>
            <picture>
                <source srcset="{{ $blogArticleResource['image']['webp'] }}" type="image/webp">
                <img src="{{ $blogArticleResource['image']['source'] }}" class="img b-radius"
                     alt="{{ $blogArticleResource['title'] }}">
            </picture>
        </div><!-- /.article__header -->

      <div class="article__content  text">

            @if($blogArticleResource['video_url'])
                <div class="row p-2 mb-2">
                    <div class="col-12">
                        <div class="video-frame">
                            <iframe src="{{ $blogArticleResource['video_url'] }}" title="YouTube video player" frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
                            </iframe>
                        </div>
                    </div>
                </div>
            @endif

            <div class="col-12">
            {!! $blogArticleResource['description'] !!}
            </div>
        </div><!-- /.article__content -->

        <div class="article__footer">
            <ul class="social  social--share">
                <li class="social__item">
                    <div class="social__text">
                        {{ trans('shop-blog.page_share') }}
                    </div>
                </li>
                <li class="social__item">
                    <a href="{{ $blogArticleResource['share']['whatsapp'] }}"
                       class="social__link"
                       target="_blank"
                       title="Whatsapp"
                    >
                        <img class="img" src="{{ asset('shop/images/whatsapp-share.svg') }}" alt="Whatsapp">
                    </a>
                </li>
                <li class="social__item">
                    <a href="{{ $blogArticleResource['share']['facebook'] }}"
                       class="social__link"
                       target="_blank"
                       title="Facebook"
                    >
                        <img class="img" src="{{ asset('shop/images/facebook-share.svg') }}" alt="Facebook">
                    </a>
                </li>
                <li class="social__item">
                    <a href="{{ $blogArticleResource['share']['messenger'] }}"
                       class="social__link"
                       target="_blank"
                       title="Messenger"
                    >
                        <img class="img" src="{{ asset('shop/images/messenger-share.svg') }}" alt="Messenger">
                    </a>
                </li>
            </ul>
        </div><!-- /.article__footer -->
    </article>

@endsection