@php 
    $paginate_master = config('masterfile.defaultPagination') ?: [];
@endphp
<div class="flex flex-col justify-between space-y-4 px-4 py-4 sm:flex-row sm:items-center sm:space-y-0 sm:px-5">
    <div class="flex items-center space-x-2 text-xs+">
        <span>Show</span>
        <label class="block">
            <select wire:model="perPage"
                class="form-select rounded-full border border-slate-300  px-2 py-1 pr-6 hover:border-slate-400  focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
                @foreach ( $paginate_master as $per_page )
                    <option  value="{{ $per_page }}">{{   $per_page  }}</option>
                @endforeach
            </select>
        </label>
        <span>entries</span>
    </div>

    <div class="pagination">
        <span class="rounded-l-lg bg-slate-150 dark:bg-navy-500">
            @if ($paginator->currentPage() > 1)
                <a href="#" wire:click="gotoPage({{ $paginator->currentPage() - 1 }})"
                    class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 hover:text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                    </svg>
                </a>
            @endif
        </span>
    
        @foreach ($elements as $element)
            @if (is_string($element))
                <span class="bg-slate-150 dark:bg-navy-500 list-none">
                    <a href="#" class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:text-white  hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">{{ $element }}</a>
                </span>
            @endif
    
            @if (is_array($element))
                @foreach ($element as $page => $url)
                    <span class="bg-slate-150 dark:bg-navy-500 list-none">
                        @if ($page == $paginator->currentPage())
                            <span class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-primary px-3 leading-tight text-white">{{ $page }}</span>
                        @else
                            <a href="#" wire:click="gotoPage({{ $page }})"
                                class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">{{ $page }}</a>
                        @endif
                    </span>
                @endforeach
            @endif
        @endforeach
    
        <span class="rounded-r-lg bg-slate-150 dark:bg-navy-500">
            @if ($paginator->hasMorePages())
                <a href="#" wire:click="gotoPage({{ $paginator->currentPage() + 1 }})"
                    class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 hover:text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                    </svg>
                </a>
            @endif
        </span>
    </div>
    <div class="text-xs+">{{ $paginator->currentPage() }} - {{ $paginator->lastPage() }} of {{ $paginator->lastPage() }}
        entries</div>
</div>