@props([
    'paginator' => null,
    'fetchRoute' => null,
    'nextUrl' => null,
    'mode' => 'html',
    'tbody' => null,
    'modals' => null,
    'enableScroll' => true,
    'showButton' => true,
    'container' => 'main-content',
])

@php
    $resolvedNext = $nextUrl;
    if (!$resolvedNext && $fetchRoute && $paginator?->hasMorePages()) {
        $resolvedNext = route($fetchRoute, array_merge(request()->query(), [
            'page' => $paginator->currentPage() + 1,
        ]));
    }
    $uid = 'lm-' . substr(md5(($resolvedNext ?? 'end') . ($tbody ?? 'tbody')), 0, 8);
@endphp

<div {{ $attributes->merge(['class' => 'app-load-more text-center py-3']) }} id="{{ $uid }}-wrap">
    @if($resolvedNext)
        <button type="button" class="btn btn-app-secondary btn-sm" id="{{ $uid }}-btn">
            Carregar mais
        </button>
        <div class="text-muted text-xs mt-2 d-none" id="{{ $uid }}-status"></div>
        <div class="text-muted text-xs py-2 d-none" id="{{ $uid }}-loading">Carregando…</div>
    @else
        <div class="text-muted text-xs" id="{{ $uid }}-status">Todos os itens estão sendo exibidos.</div>
    @endif
</div>

@if($resolvedNext)
    @once
        <script src="{{ asset('assets/js/app-load-more.js') }}?v=3"></script>
    @endonce
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (!window.AppLoadMore) return;
            window.AppLoadMore({
                wrapId: @json($uid . '-wrap'),
                btnId: @json($uid . '-btn'),
                statusId: @json($uid . '-status'),
                loadingId: @json($uid . '-loading'),
                nextUrl: @json($resolvedNext),
                mode: @json($mode),
                tbodySelector: @json($tbody),
                modalsSelector: @json($modals),
                enableScroll: @json($enableScroll),
                containerSelector: @json($container),
            });
        });
    </script>
@endif