<script lang="ts">
	import { page } from '$app/stores';
	import { getPaginationContext } from '$lib/Pagination';

	const pagination = getPaginationContext();

	$: values = new Set([24, 48, 72, 90, 120, 150, 180, $pagination.items].sort((a, b) => a - b));
</script>

<select
	class="btn-slate"
	bind:value={$pagination.items}
	on:change={() => $pagination.apply($page.url.searchParams)}
	title="Limit displayed items to..."
>
	{#each values as value}
		<option {value}>{value}</option>
	{/each}
</select>