@props(['current' => 25, 'options' => [10, 25, 50, 100], 'baseUrl' => '', 'paramName' => 'per_page'])

<div class="pms-per-page d-inline-flex align-items-center gap-1">
    <span class="pms-per-page__label text-muted small">Per page:</span>
    <select class="pms-per-page__select form-control form-control-sm"
            onchange="pmsChangePerPage(this.value, '{{ $baseUrl }}', '{{ $paramName }}')"
            aria-label="Records per page">
        @foreach ($options as $opt)
            <option value="{{ $opt }}" @selected((int)$current === $opt)>{{ $opt }}</option>
        @endforeach
    </select>
</div>

@once
<script>
    window.pmsChangePerPage = function(value, baseUrl, paramName) {
        paramName = paramName || 'per_page';
        var url = new URL(window.location.href);
        url.searchParams.set(paramName, value);
        url.searchParams.set('page', '1');
        window.location.href = url.toString();
    };
</script>
@endonce