@props(['resource'])
<div
    class="relative rounded-b-2xl flex items-center justify-between px-4 py-4  text-end sm:px-4  h-20 bg-gray-50 dark:border-gray-800 dark:bg-gray-900 border-t border-gray-100  dark:border-gray-800">
    <div class="absolute inset-0 m-auto flex items-center justify-center">
        <div class="flex items-center space-x-2">
            <div x-data="{ openDropDown: false }" class="relative h-fit">
                <button @click="openDropDown = !openDropDown"
                    :class="openDropDown ? 'text-gray-700 dark:text-white' :
                        'text-gray-400 hover:text-gray-700 dark:hover:text-white'"
                    class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
                    <span class="flex items-center">
                        {{ $resource->perPage }}<span class="ms-1 hidden sm:flex">{{ __('dashboard.per_page') }}</span>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="size-4 ms-3">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                        </svg>

                    </span>
                </button>
                <div x-cloak x-show="openDropDown" @click.outside="openDropDown = false"
                    class="absolute right-0 bottom-full z-40 w-40 space-y-1 rounded-2xl border border-gray-200 bg-white p-2 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark">
                    <button wire:click="setPerPage(5)"
                        class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
                        {{ __('5') }}
                    </button>

                    <button wire:click="setPerPage(10)"
                        class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
                        {{ __('10') }}
                    </button>

                    <button wire:click="setPerPage(25)"
                        class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
                        {{ __('25') }}
                    </button>

                    <button wire:click="setPerPage(50)"
                        class="flex w-full rounded-lg px-3 py-2 text-left text-theme-xs font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
                        {{ __('50') }}
                    </button>
                </div>
            </div>

        </div>
    </div>
    <div class="flex-1">
        {{ $resource->rows->links('partials.pagination') }}
    </div>
</div>