@props(['rows'])

@if ($rows->hasPages() || $rows->total() > 10)
    <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 px-4 py-3 dark:border-slate-800">
        <div class="flex items-center gap-2 text-xs text-slate-500">
            <span>Rows per page</span>
            <select wire:model.live="perPage" class="field-input w-auto py-1 text-xs">
                @foreach ([10, 25, 50, 100] as $size)
                    <option value="{{ $size }}">{{ $size }}</option>
                @endforeach
            </select>
            <span class="tabular">
                {{ $rows->firstItem() ?? 0 }}–{{ $rows->lastItem() ?? 0 }} of {{ number_format($rows->total()) }}
            </span>
        </div>

        <div>{{ $rows->onEachSide(1)->links() }}</div>
    </div>
@endif