@php
    $settingData = get_post_setting_data($dynamic, isset($category) ? $category : null);
    $postSettings = $settingData['postSettings'];

    $postOptions = $postSettings->makeByPrefix('detail_');
    $header = $options->theme->header;
    $breadcrumb_background = $settingData['header_image'] ?? $header->breadcrumb_background;

    if ($postSettings->breadcrumb_background) {
        $breadcrumb_background = $postSettings->breadcrumb_background;
    }

    if ($postOptions->breadcrumb_background) {
        $breadcrumb_background = $postOptions->breadcrumb_background;
    }
    $ufe = $postOptions->use_feature_image ?? $postSettings->header_use_feature_image;
    if ($postOptions->use_feature_image ?? $postSettings->header_use_feature_image && $article->featured_image && ($image = $article->getImage())) {
        $breadcrumb_background = $image;
    }

    $header_style = $postSettings->header_style(1);
    $layout = in_array($postOptions->layout, ['fullwidth', 'custom']) || $postOptions->type == 'project' ? 'master' : $postOptions->layout;

    $dateFormat = config('app.locale') == 'vi' ? 'd/m/Y' : 'M d, Y';
    $u = $article->getViewUrl();
@endphp
@extends($_layout . 'blog')
@section('title', $page_title)
@include($_lib . 'register-meta')


@if ($postOptions->show_breadcrumb)
    @section('breadcrumb.show', true)
    @section('breadcrumb.title', $page_title)

    @if ($breadcrumb_background)
        @section('breadcrumb.background', $breadcrumb_background)
    @endif
@endif
@section('sidebar', 'post')
@if ($breadcrumb_background)
    @section('breadcrumb.background', $breadcrumb_background)
@endif

<!--Start Blog Grid-->
@section('content')

    <div class="article-page">

        <div class="article-rte">
            @if ($article->featured_image)
                <div class="article-img">
                    <img src="{{ $article->getImage() }}" alt="{{ $article->title }}" />
                </div>
            @else
            @endif
            <div class="article-meta">
                <h2 class="article-title">{{ $article->title }}</h2>
                <div class="article-card-published text_14 d-flex align-items-center">
                    @if ($article->author)
                        <span class="article-author d-flex align-items-center">
                            <span class="icon-author">
                                <svg width="15" height="17" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M7.5 0.59375C4.72888 0.59375 2.46875 2.85388 2.46875 5.625C2.46875 7.3573 3.35315 8.89587 4.69238 9.80274C2.12903 10.9033 0.3125 13.447 0.3125 16.4063H1.75C1.75 13.2224 4.31616 10.6563 7.5 10.6563C10.6838 10.6563 13.25 13.2224 13.25 16.4063H14.6875C14.6875 13.447 12.871 10.9033 10.3076 9.80274C11.6469 8.89587 12.5313 7.3573 12.5313 5.625C12.5313 2.85388 10.2711 0.59375 7.5 0.59375ZM7.5 2.03125C9.49341 2.03125 11.0938 3.63159 11.0938 5.625C11.0938 7.61841 9.49341 9.21875 7.5 9.21875C5.50659 9.21875 3.90625 7.61841 3.90625 5.625C3.90625 3.63159 5.50659 2.03125 7.5 2.03125Z"
                                        fill="#00234D" />
                                </svg>
                            </span>
                            <span class="ms-2">{{ $article->author->name }}</span>
                        </span>
                    @endif
                    <span class="article-separator mx-3">
                        <svg width="2" height="12" viewBox="0 0 2 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.4" d="M1.09761 0.5H0V11.5H1.09761V0.5Z" fill="black" />
                        </svg>
                    </span>
                    <a href="#comments" class="article-date d-flex align-items-center">
                        <span class="icon-publish">
                            <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.347656 0.5V15.5H7.53711L10.0977 18.0605L12.6582 15.5H19.8477V0.5H0.347656ZM1.84766 2H18.3477V14H12.0371L10.0977 15.9395L8.1582 14H1.84766V2ZM4.84766 4.25V5.75H15.3477V4.25H4.84766ZM4.84766 7.25V8.75H15.3477V7.25H4.84766ZM4.84766 10.25V11.75H12.3477V10.25H4.84766Z" fill="black" />
                            </svg>
                        </span>
                        <span class="ms-2">0</span>
                    </a>
                    @if ($c = $article->category)
                        <span class="article-separator mx-3 d-none d-sm-block">
                            <svg width="2" height="12" viewBox="0 0 2 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.4" d="M1.09761 0.5H0V11.5H1.09761V0.5Z" fill="black" />
                            </svg>
                        </span>
                        <a href="{{ $c->getViewUrl() }}" class="article-date d-none d-sm-flex align-items-center">
                            <span class="icon-tag">
                                <svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M7.09375 0.65625L6.8125 1.10156C6.8125 1.10156 5.86621 2.55762 4.65625 4.21875C3.44629 5.87988 1.91992 7.76074 1.02344 8.39062L0.648438 8.64844L0.695312 9.09375L1.44531 15.8438L1.51562 16.5H2.19531C3.30859 16.5 4.60645 16.5586 5.89844 16.6406L6.69531 16.6875V10.5H8.19531V16.8047L8.875 16.875C10.9961 17.0625 12.6016 17.25 12.6016 17.25H12.7188L20.9219 15.6094L20.9453 15.0234C20.9453 15.0234 21.0127 13.7725 21.1328 12.3047C21.2529 10.8369 21.4492 9.11133 21.6484 8.48438L21.8125 7.96875L21.4141 7.66406C18.8271 5.66016 16.3516 1.14844 16.3516 1.14844L16.1172 0.679688L15.5781 0.75C15.5781 0.75 10.7588 1.41504 7.58594 0.773438L7.09375 0.65625ZM15.2969 2.29688C15.6045 2.86816 17.1221 5.58105 19.3047 7.73438L13.6562 8.625C11.8076 6.84961 9.92383 4.04297 8.89844 2.41406C11.8018 2.71289 14.667 2.38184 15.2969 2.29688ZM7.39844 2.90625C8.38281 4.49121 10.4482 7.60254 12.625 9.67969C12.1328 11.6865 11.9834 14.3613 11.9453 15.6797C11.4443 15.627 10.8408 15.5537 9.69531 15.4453V9H5.19531V15.1172C4.39551 15.0732 3.61914 15.0352 2.875 15.0234L2.24219 9.25781C3.45215 8.27344 4.74707 6.65625 5.875 5.10938C6.60742 4.10156 7.06445 3.41309 7.39844 2.90625ZM20.0312 9.16406C19.8555 10.0576 19.7207 11.1123 19.6328 12.1641C19.5361 13.3506 19.5127 14.001 19.4922 14.3906L13.4688 15.6094C13.5068 14.2881 13.6445 11.7891 14.0312 10.1016L20.0312 9.16406Z"
                                        fill="black" />
                                </svg>
                            </span>
                            <span class="ms-2">{{ $c->name }}</span>
                        </a>
                    @endif
                </div>
            </div>

            <div class="article-content">
                {!! $article->content !!}
            </div>


            <div class="share-area mt-5 d-flex align-items-center">
                <strong class="label mb-1 d-block">{{ scw_text('blog_page_share') }}:</strong>
                <ul class="list-unstyled share-list d-flex align-items-center mb-1 flex-wrap">
                    <li class="share-item">
                        <a href="{{ scw_social_link('facebook', $u) }}" target="blank">
                            <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.17383 9.3125L8.58398 6.61719H5.97656V4.85938C5.97656 4.09766 6.32812 3.39453 7.5 3.39453H8.70117V1.08008C8.70117 1.08008 7.61719 0.875 6.5918 0.875C4.45312 0.875 3.04688 2.19336 3.04688 4.53711V6.61719H0.644531V9.3125H3.04688V15.875H5.97656V9.3125H8.17383Z" fill="black" />
                            </svg>
                        </a>
                    </li>
                    <li class="share-item">
                        <a href="{{ scw_social_link('twitter', $u) }}" target="blank">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M17.1452 6.62529C17.1452 6.79391 17.1452 6.94848 17.1452 7.08899C17.1452 8.35363 16.9063 9.60422 16.4286 10.8407C15.9789 12.0492 15.3185 13.1593 14.4473 14.171C13.6042 15.1827 12.4941 16.0117 11.1171 16.6581C9.76815 17.2763 8.27869 17.5855 6.64871 17.5855C4.59719 17.5855 2.71429 17.0375 1 15.9415C1.28103 15.9696 1.57611 15.9836 1.88525 15.9836C3.59953 15.9836 5.13115 15.4637 6.48009 14.4239C5.66511 14.3958 4.93443 14.1429 4.28806 13.6651C3.66979 13.1874 3.24824 12.5831 3.02342 11.8525C3.24824 11.9087 3.47307 11.9368 3.69789 11.9368C4.03513 11.9368 4.35831 11.8806 4.66745 11.7681C3.82436 11.5995 3.12178 11.178 2.55972 10.5035C1.99766 9.82904 1.71663 9.05621 1.71663 8.18501C1.71663 8.15691 1.71663 8.14286 1.71663 8.14286C2.25059 8.42389 2.81265 8.57845 3.40281 8.60656C2.30679 7.84777 1.75878 6.82201 1.75878 5.52927C1.75878 4.8548 1.9274 4.23653 2.26464 3.67447C3.19204 4.79859 4.30211 5.69789 5.59485 6.37237C6.91569 7.04684 8.33489 7.42623 9.85246 7.51054C9.79625 7.22951 9.76815 6.94848 9.76815 6.66745C9.76815 5.65574 10.1194 4.79859 10.822 4.09602C11.5527 3.36534 12.4239 3 13.4356 3C14.5035 3 15.4028 3.37939 16.1335 4.13817C16.9766 3.96956 17.7635 3.67447 18.4941 3.25293C18.2131 4.12412 17.6651 4.79859 16.8501 5.27635C17.6089 5.19204 18.3255 5.00937 19 4.72834C18.4941 5.45902 17.8759 6.09133 17.1452 6.62529Z"
                                    fill="black" />
                            </svg>
                        </a>
                    </li>
                    <li class="share-item">
                        <a href="{{ scw_social_link('pinterest', $u) }}" target="blank">
                            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M14.5312 7.375C14.5312 3.36133 11.2793 0.109375 7.26562 0.109375C3.25195 0.109375 0 3.36133 0 7.375C0 10.4805 1.9043 13.0879 4.59961 14.1426C4.54102 13.5859 4.48242 12.707 4.62891 12.0625C4.77539 11.5059 5.47852 8.45898 5.47852 8.45898C5.47852 8.45898 5.27344 8.01953 5.27344 7.375C5.27344 6.37891 5.85938 5.61719 6.5918 5.61719C7.20703 5.61719 7.5 6.08594 7.5 6.64258C7.5 7.25781 7.08984 8.19531 6.88477 9.07422C6.73828 9.77734 7.26562 10.3633 7.96875 10.3633C9.25781 10.3633 10.2539 9.01562 10.2539 7.05273C10.2539 5.29492 8.99414 4.09375 7.23633 4.09375C5.15625 4.09375 3.95508 5.64648 3.95508 7.22852C3.95508 7.87305 4.18945 8.54688 4.48242 8.89844C4.54102 8.95703 4.54102 9.04492 4.54102 9.10352C4.48242 9.33789 4.33594 9.83594 4.33594 9.92383C4.30664 10.0703 4.21875 10.0996 4.07227 10.041C3.16406 9.60156 2.60742 8.2832 2.60742 7.19922C2.60742 4.91406 4.27734 2.80469 7.41211 2.80469C9.93164 2.80469 11.8945 4.62109 11.8945 7.02344C11.8945 9.51367 10.3125 11.5352 8.11523 11.5352C7.38281 11.5352 6.67969 11.1543 6.44531 10.6855C6.44531 10.6855 6.09375 12.0918 6.00586 12.4141C5.83008 13.0586 5.39062 13.8496 5.09766 14.3184C5.77148 14.5527 6.50391 14.6406 7.26562 14.6406C11.2793 14.6406 14.5312 11.3887 14.5312 7.375Z"
                                    fill="black" />
                            </svg>
                        </a>
                    </li>
                </ul>
            </div>
            @php
                $previous = $article->previous();
                $next = $article->next();
            @endphp

            @if ($previous || $next)

            <div class="next-prev-article mt-5 d-flex align-items-center justify-content-between">
                @if ($previous)
                <a href="{{$previous->getViewUrl()}}" class="article-btn prev-article-btn mt-2" title="{{$previous->title}}">{{scw_text('blog_page_previous')}}</a>

                @endif
                @if ($next)
                <a href="{{$next->getViewUrl()}}" class="article-btn next-article-btn active mt-2" title="{{$next->title}}">{{scw_text('blog_page_next')}}</a>
                @endif
            </div>

            @endif


            @include($_template . 'comments', [
                'comments' => $article->publishComments,
                'ref' => $article->type,
                'ref_id' => $article->id,
                'url' => $u,
            ])

        </div>
    </div>


@endsection