@props([
    'currentPage' => 1,
    'totalPages' => 1,
    'pages' => [],
    'slugId' => '',
    'opt' => [],
])

@if ($totalPages > 1)
    <ol class="flex justify-center gap-1 font-medium m-8">
        <li>
            <button class="px-2.5 py-3.5 inline-flex size-16 items-center justify-center rounded border border-gray-300 bg-white text-gray-900 rtl:rotate-180" wire:click="previous" @if ($currentPage <= 1) disabled @endif>
                <span class="sr-only">Prev Page</span>
                <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
            </button>
        </li>

        @foreach ($pages as $page)
            <li>
                <button class="px-4 py-1 block size-16 rounded {{ $currentPage == $page ? 'border-primary bg-primary text-center leading-8 text-white' : 'border border-gray-300 bg-white text-center leading-8 text-gray-900' }}" wire:click="setPage({{ $page }}, '{{ $slugId }}', '{{ json_encode($opt) }}')" {{ $page == '...' ? 'disabled' : '' }}>
                    {{ $page }}
                </button>
            </li>
        @endforeach

        <li>
            <button class="px-2.5 py-3.5 inline-flex size-16 items-center justify-center rounded border border-gray-300 bg-white text-gray-900 rtl:rotate-180" wire:click="next" @if ($currentPage >= $totalPages) disabled @endif>
                <span class="sr-only">Next Page</span>
                <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                </svg>
            </button>
        </li>
    </ol>
@endif