@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
                class="form-select rounded-full border border-slate-300 bg-white 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>{{   $per_page  }}</option>
                @endforeach
            </select>
        </label>
        <span>entries</span>
    </div>

    <ol class="pagination">
        <li class="rounded-l-lg bg-slate-150 dark:bg-navy-500">
            @if ($paginator->currentPage() > 1)
                <a href="{{ $paginator->previousPageUrl() }}"
                    class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/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" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                    </svg>
                </a>
            @endif
        </li>
        @foreach ($elements as $element)
            @if (is_string($element))
            <li class="bg-slate-150 dark:bg-navy-500">
                <a href="#"
                    class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">{{ $element }}</a>
            </li>
            @endif

            @if (is_array($element))
                @foreach ($element as $page => $url)
                    <li class="bg-slate-150 dark:bg-navy-500">
                        @if ($page == $paginator->currentPage())
                            <a href="#"
                                class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">{{ $page }}</a>
                        @else
                            <a href="{{ $url }}"
                                class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">{{ $page }}</a>
                        @endif

                    </li>
                @endforeach
            @endif
        @endforeach


        <li class="rounded-r-lg bg-slate-150 dark:bg-navy-500">
            @if ($paginator->hasMorePages())
                <a href="{{ $paginator->nextPageUrl() }}"
                    class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/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" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </a>
            @endif
        </li>
    </ol>
    <div class="text-xs+">{{ $paginator->currentPage() }} - {{ $paginator->lastPage() }} of {{ $paginator->lastPage() }}
        entries</div>
</div>