@extends('layouts.guest.general')

@section('main_content')
    {{-- nav --}}
    {{-- Banner, breadcrumb and heading come from the "Blog header" shared section, so they are
         editable in the panel; the arguments are the fallback if that row is gone. --}}
    <x-page-header
        section="Blog header"
        image="images/blogs/Header-Blog.png"
        h1="Welcome to Our Blog - ITG Group"
        :fallback-title="__('messages.blog')"
        :crumbs="[
            ['label' => __('messages.home'), 'url' => '/'],
            ['label' => __('messages.blog'), 'url' => 'blogs'],
        ]"
    />

    <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">
                    <div class="blog-classic">

                        @forelse ($blogs as $blog)
                            <div class="news-block-four">
                                <div class="inner-box">
                                    @if ($blog->image?->image_large)
                                        <div class="image">
                                            <a href="{{ $blog->publicUrl() }} ">
                                                <img
                                                    src="{{ Storage::url($blog->image->image_large) }} "
                                                    alt="banner image blog"/>
                                            </a>
                                        </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>
                                            <a href="{{ $blog->publicUrl() }}">
                                                {{ $blog->translation->name }}
                                            </a>
                                        </h3>

                                        <div class="container text">
                                            <div class="news-detail">
                                                <div class="inner-box">
                                                    <div class="text-truncate-multiline text-justify">
                                                        {!! tiptap_converter()->asHTML($blog->translation->description) !!}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a class="explore"
                                           href="{{ $blog->publicUrl() }} ">{{ __('messages.btn-card1') }}
                                            <span class="flaticon-plus"></span></a>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <p class="text-center">{{ __('messages.no-blog') }} </p>
                        @endforelse
                        <div class="mt-10">
                            {{ $blogs->links('vendor.pagination.blog') }}
                        </div>
                    </div>
                </div>
                <!-- Sidebar Side -->
                @include('blogs.components.blog-nav-right')
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        a:not([href]):not([tabindex]) {
            color: var(--color-green-one);
        }
    </style>
@endpush