@props([
    'wrapId',
    'previousId',
    'nextId',
    'numbersId' => null,
    'hidden' => false,
])

<div {{ $attributes->class(['d-flex', 'justify-content-end', 'flex-wrap']) }}>
    <div
        class="pagination-wrap hstack gap-2 flex-wrap justify-content-end"
        id="{{ $wrapId }}"
        @if($hidden) style="display: none;" @endif
    >
        <a
            class="page-item pagination-prev"
            id="{{ $previousId }}"
            href="javascript:void(0);"
            aria-label="{{ __('Previous') }}"
            title="{{ __('Previous') }}"
        >&laquo;</a>
        <ul
            class="pagination listjs-pagination mb-0"
            @if($numbersId) id="{{ $numbersId }}" @endif
        ></ul>
        <a
            class="page-item pagination-next"
            id="{{ $nextId }}"
            href="javascript:void(0);"
            aria-label="{{ __('Next') }}"
            title="{{ __('Next') }}"
        >&raquo;</a>
    </div>
</div>