@php
    $args['post_type'] = 'teams';
    $blogs = HelpDesk::elementPostsByArgs($args);
@endphp
<section class="noice-overlay">
    <div class="xl:pt-120 sm:pt-80 pt-40 pb-50">
        <div class="container">
            <div class="flex items-center justify-between sm:mb-50 mb-20">
                <div class="max-w-580 pxl-heading-scroll-effect">
                    @if(isset($args['subtitle']) && $args['subtitle'] != '')
                    <span class="text-2xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
                    @endif
                    <h2 class="xl:text-7xl/80 md:text-5xl text-4xl heading-text">
                        {!! isset($args['title']) ? $args['title'] : '' !!}
                    </h2>
                    @if(isset($args['description']) && $args['description'] != '')
                    <p class="text-xl font-normal text-bodytext max-w-500 mx-auto capitalize">{{ $args['description'] }}</p>
                    @endif
                </div>
                @if (isset($args['view_all']) && $args['view_all'] == 'true')
                <a 
                    data-block="button"
                    href="{{ isset($args['page_id']) ? DzHelper::laraPageLink($args['page_id']) : 'javascript:void(0);' }}" 
                    class="lg:size-129 sm:size-100 size-70 sm:p-15 p-8 flex items-center justify-center rounded-full text-primary border border-primary light lg:text-lg/20 sm:text-base text-xs gradient-hover btn btn-outline style-1 button--stroke sm:ms-auto flairBtn group magneticBtn">
                        <span class="button-flair"></span>
                        <span class="text-center button__label group-hover:text-secondary duration-100">
                            {{ __("View All") }}<br>{{ __("Post") }}
                        </span>
                    </a>
                @endif
            </div>
        </div>
        <div class="wrapper">
            <div class="pxl-team-list" id="{{ $args['base'] }}LoadmoreContent">
                @php $ajax_view = 'ajax_team_listing_1'; @endphp
                @include('elements.team_listing.team_listing_1',compact('blogs'))
            </div>
        </div>
        @if ($args['pagination'] ?? false)
        <div class="grid grid-cols-12 gap-20 sm:mt-50 mt-20">
            <div class="col-span-12 text-center">
                @if (@$args['pagination_type'] == 'load_more') 
                    @if ($blogs->hasMorePages())
                    <form id="W3Ajax{{ $args['base'] }}Form">
                        <input type="hidden" name="ajax_container" value="{{ $args['base'] }}LoadmoreContent">
                        <input type="hidden" name="no_of_posts" value="{{$args['no_of_posts']}}">
                        <input type="hidden" name="order" value="{{$args['order']}}">
                        <input type="hidden" name="orderby" value="{{$args['orderby']}}">
                        <input type="hidden" name="page" value="2">
                        <input type="hidden" name="post_type" value="{{ $args['post_type'] }}">
                        <input type="hidden" name="ajax_view" value="{{ $ajax_view }}">
                        <input type="hidden" name="view_name" value="index">

                        <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="W3Ajax{{ $args['base'] }}Form">
                            <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
                    <a href="javascript:void(0);" class="btn btn-primary px-15 btn-skew disabled"><span>{{ DzHelper::theme_lang('No More Posts') }}</span></a>
                    @endif
                @else
                {!! $blogs->links('elements.pagination') !!}
                @endif
            </div>
        </div>
        @endif
    </div>
    <img src="{{ theme_asset('images/background/bg6.png') }}" alt="" class="absolute top-[-50%] left-[-47%] -z-1 pointer-events-none">
    <img src="{{ theme_asset('images/background/bg10.png') }}" alt="" class="absolute bottom-[-40%] right-[0%] max-xl:w-[60%] -z-1 pointer-events-none">
</section>