@extends($layout ?? 'layouts.guest.general')

@section('main_content')
    {{-- nav --}}
    <x-page-header
        section="Blog header"
        image="images/blogs/Header-Blog.png"
        :h1="'Welcome to Our Blog - ' . $blog->translation->name"
        :title="$blog->translation->name"
        :crumbs="[
            ['label' => __('messages.home'), 'url' => '/'],
            ['label' => __('messages.blog'), 'url' => 'blogs'],
        ]"
    />

    <!-- Sidebar Page Container -->
    <div class="sidebar-page-container">
        <div class="auto-container">
            <div class="row clearfix">
                <!-- Content Side -->
                <div class="content-side col-lg-8 col-md-12 col-sm-12">
                    <!-- News Detail -->
                    <div class="news-detail">
                        <div class="inner-box">
                            @if ($blog->image?->image_large)
                                <div class="image">
                                    <img src="{{ Storage::url($blog->image->image_large) }}" alt=""/>
                                </div>
                            @endif
                            <div class="lower-content">
                                <ul class="post-info">
                                    <li>{{ $blog->blogCategory->translation->name }} </li>
                                    <li><span
                                            class="icon flaticon-calendar"></span>{{ $blog->created_at->format('M d, Y') }}
                                    </li>
                                </ul>
                                <h3>{{ $blog->translation->name }}</h3>
                                {!! tiptap_converter()->asHTML($blog->translation->description) !!}

                                <div class="lower-content2"></div>

                                <div class="gallery-box">
                                    <div class="row clearfix">
                                        <!-- Carousel Column -->
                                        <div class="carousel-column col-lg-6 col-md-6 col-sm-12">
                                            <div class="single-item-carousel owl-carousel owl-theme">
                                                @foreach ($blog->galleryImages as $imageGallery)
                                                    <div class="slide">
                                                        <div class="image">
                                                            <img
                                                                src="{{ Storage::url($imageGallery->name) }}"
                                                                alt="gallery image"/>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Post Share Options-->
                            <div class="post-share-options px-3">
                                <div class="post-share-inner clearfix">
                                    <ul class="social-box">
                                        <span class="share">{{ __('messages.share-article') }} </span>
                                        <li>
                                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
                                               target="_blank"><span class="fa fa-facebook-f"></span></a></li>
                                        <li>
                                            <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(url()->current()) }}"
                                               target="_blank"><span class="fa fa-linkedin"></span></a>
                                        </li>
                                        <li>
                                            <a href="https://api.whatsapp.com/send?text=ITG%20Blog%20{{ urlencode(url()->current()) }}"
                                               target="_blank"><span class="fa fa-whatsapp f-size-10"></span></a></li>
                                    </ul>
                                </div>
                            </div>
                            <!-- End Post Share Options-->
                        </div>
                    </div>
                    <!-- End Related Post -->
                </div>
                <!-- Sidebar Side -->
                @include('blogs.components.blog-nav-right')
            </div>
        </div>
    </div>
@endsection