@props(['pages', 'current_page', 'offset', 'limit', 'TotalRows', 'limits'])

<div class="p-4">
    <nav class="flex flex-col justify-between items-start space-y-3 md:flex-row md:items-center md:space-y-0"
        aria-label="Table navigation">
        <!-- Rows Information -->
        <span class="text-sm font-normal text-gray-500 dark:text-gray-400">
            <span class="font-semibold text-gray-900 dark:text-white">{{ $offset }}-{{ $offset + $limit }}</span>
            sur
            <span class="font-semibold text-gray-900 dark:text-white">{{ $TotalRows }}</span>
        </span>

        <!-- Limit Selector -->
        <div class="top-0 left-0 px-6 py-3">
            <div class="flex items-center mr-2 ml-auto">
                <select aria-current="page" wire:model="limit"
                    wire:change="$dispatch('changeLimit',{ limit : $wire.limit })"
                    class="py-1.5 text-sm text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                    @foreach ($limits as $pageLimit)
                        <option value="{{ $pageLimit }}">{{ $pageLimit }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <!-- Pagination Links -->
        <div class="flex items-center space-x-4">
            <nav aria-label="Page navigation example">
                <ul class="inline-flex -space-x-px text-sm">
                    <li>
                        <a wire:click="$dispatch('prevPage')"
                            class="flex justify-center items-center px-3 ml-0 h-8 leading-tight text-gray-500 bg-white rounded-l-lg border border-gray-300 cursor-pointer hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                            Previous
                        </a>
                    </li>

                    @foreach ($pages as $index => $page)
                        <li>
                            @if ($page == $current_page)
                                <a aria-current="page"
                                    class="flex justify-center items-center px-3 h-8 border border-gray-300 cursor-default text-primary-600 bg-primary-50 dark:border-gray-700 dark:bg-gray-700 dark:text-white">
                                @elseif($page === '...')
                                    <a aria-current="page"
                                        class="flex justify-center items-center px-3 h-8 border border-gray-300 cursor-default text-primary-600 dark:border-gray-700 dark:text-white">
                                    @else
                                        <a wire:click="$dispatch('changePage',{ page:{{ $page }} })"
                                            class="flex justify-center items-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 cursor-pointer hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                            @endif
                            {{ $page }}
                            </a>
                        </li>
                    @endforeach

                    <li>
                        <a wire:click="$dispatch('nextPage')"
                            class="flex justify-center items-center px-3 h-8 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 cursor-pointer hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                            Next
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </nav>
</div>