@extends('layout.default')

@section('content')
    @php
        if (isset($w3cms_option)) {
            extract($w3cms_option);
        }
    @endphp

    @include('elements.banner-inner')

    <!-- Blog Post Start -->
    <div class="noice-overlay lg:pt-100 sm:pt-80 sm:pb-70 py-50">
        <div class="container">
            <div class="row">
            
                <div class="{{empty($sidebar) || !$show_sidebar || $layout == 'sidebar_full' ? 'w-full' : 'lg:w-8/12 pb-50' }} {{ $layout == 'sidebar_left' ? 'lg:order-2' : ''}}" >
                    <div class="grid grid-cols-12 gap-20" id="BlogsLoadmoreContent">
                    @include('elements.post_listing.'.$post_listing_style)
                    </div>

                    <!-- Blogs Pagination --> 
                    <div class="grid grid-cols-12 gap-20 sm:mt-50 mt-20">
                        <div class="col-span-12 text-center">
                        @if ($disable_ajax_pagination == 'load_more')
                            @if ($blogs->hasMorePages())
                            <form id="W3AjaxPostForm">
                                <input type="hidden" name="ajax_container" value="BlogsLoadmoreContent">
                                <input type="hidden" name="no_of_posts" value="{{config('Reading.nodes_per_page')}}">
                                <input type="hidden" name="page" value="2">
                                <input type="hidden" name="ajax_view" value="ajax_archive_blog_listing">
                                <input type="hidden" name="view_name" value="archive">
                                <input type="hidden" name="year" value="{{request()->year}}">
                                <input type="hidden" name="month" value="{{request()->month}}">
                                <button class="btn style-1 cursor-pointer btn-outline light ms-auto p-2 px-20 group button--stroke flairBtn magneticBtn ajax-load-more" data-form-id="W3AjaxPostForm">
                                    <span class="button-flair"></span>
                                    <span class="button__label font-semibold pr-10 inline-flex items-center gap-14">Load more</span>
                                    <span class="inline-flex justify-center items-center size-32 -mr-18 rounded-full dark:bg-primary bg-dark duration-100 dark:group-hover:bg-secondary group-hover:bg-white z-0">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g clip-path="url(#clip0_572_9501)">
                                            <path class="dark:stroke-dark stroke-white duration-100 dark:group-hover:stroke-white group-hover:stroke-dark" d="M19.167 3.33325V8.33325H14.167" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path class="dark:stroke-dark stroke-white duration-100 dark:group-hover:stroke-white group-hover:stroke-dark" d="M0.833008 16.6667V11.6667H5.83301" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path class="dark:stroke-dark stroke-white duration-100 dark:group-hover:stroke-white group-hover:stroke-dark" d="M2.92467 7.49998C3.34731 6.30564 4.06562 5.23782 5.01256 4.39616C5.95951 3.55451 7.10423 2.96645 8.33991 2.68686C9.5756 2.40727 10.862 2.44527 12.079 2.79729C13.296 3.14932 14.4041 3.80391 15.2997 4.69998L19.1663 8.33331M0.833008 11.6666L4.69967 15.3C5.5953 16.1961 6.70332 16.8506 7.92035 17.2027C9.13738 17.5547 10.4238 17.5927 11.6594 17.3131C12.8951 17.0335 14.0398 16.4455 14.9868 15.6038C15.9337 14.7621 16.652 13.6943 17.0747 12.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </g>
                                            <defs>
                                            <clipPath id="clip0_572_9501">
                                            <rect width="20" height="20" fill="white"/>
                                            </clipPath>
                                            </defs>
                                        </svg>
                                    </span>
                                </button>
                            </form>
                            @else
                            <button class="btn btn-primary px-15 btn-skew disabled"><span>{{ DzHelper::theme_lang('No More Posts') }}</span></button>
                            @endif
                        @else
                        {!! $blogs->links('elements.pagination') !!}
                        @endif
                    </div>
                    </div>
                    <!-- Blogs Pagination End--> 
                </div>
                <!-- End Content Side-->

                <!-- Right sidebar area -->
                @if (!empty($sidebar) && $show_sidebar && $layout != 'sidebar_full')
                <div class="lg:w-4/12">
                    <aside class="side-bar my-sticky space-top-0 sticky-top dz-sidebar">
                        @include('elements.sidebar')
                    </aside>
                </div>
                @endif
                <!-- End Right sidebar area -->
            </div>
        </div>
    </div>
    <!-- Blog Post End -->
@endsection
