@extends('layouts.layout')


@section('app')

<section class="inner-hero list-hero bg_img dark--overlay lazy" data-bg="{{ asset('images/breadcrumb.webp') }}">
    <div class="container position-relative">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="text-center h2">{{ $meta['page_title'] ?? $meta['title'] }}</h1>
                <ul class="page-breadcrumb d-flex justify-content-center">
                {{--    <li><a href="{{route('home')}}" class="">Home</a></li>
                    <li>{{$meta['title']}}</li> --}}
                </ul>
            </div>
        </div>
    </div>
</section>
<section class="pt-80 pb-80">
    <div class="container-fluid">
        <div class="row mb-none-30 ajaxLoad">
            @forelse($data as $item)
            @include('components.title_card', ['is_list' => true])
            @if($loop->last)
            @if($pagination->hasMorePages())
            <a href="{{ route($meta['route']->getName(), array_merge($meta['route']->parameters, ['page' => $pagination->currentPage() + 1])) }}" data-params="{{base64_encode(json_encode( ['page' => $pagination->currentPage() + 1,
          'route_parameters' => $meta['route']->parameters,
          'route' => route('api.'.$meta['route']->getName()), 'has_more_pages' => $pagination->hasMorePages() ]))}}" data-lazy-function="more" id="next-page" class="text-center w-10" title="Load More">
                <img width="120" height="120" src="{{ asset('images/loading.svg') }}" alt="Load More">
            </a>
            @endif
            @endif
            @empty
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-xs-12 mb-30 mx-auto">
                <img src="{{ asset('images/no-results.png') }}" alt="No Results">
            </div>
            @endforelse
        </div>
    </div>
</section>


@endsection


@push('footer')
@vite(['resources/js/load-more.js'])

@endpush