<script>
    import { createEventDispatcher } from "svelte";
    const dispatch = createEventDispatcher();
    export let pages;
    export let limit;
    export let currentPage;
    export let inModal;
    export let modalUrl;

    function url(page) {
        const url = new URL(modalUrl ?? window.location.href);
        let skip = page * limit - limit;
        url.searchParams.set("skip", skip);
        return url;
    }

    function goto(e, pagenum) {
        e.preventDefault();
        const url = new URL(modalUrl ?? window.location.href);
        let skip = pagenum * limit - limit;
        url.searchParams.set("skip", skip);
        if (inModal) {
            dispatch("refresh", url);
        } else {
            window.location = url;
        }
    }
</script>

{#each pages as i}
    <li class="page-item" class:active={currentPage === i}>
        {#if currentPage === i}
            <span class="page-link active">{i}</span>
        {:else}
            <a class="page-link" on:click={(e) => goto(e, i)} href={url(i)}
                >{i}</a
            >
        {/if}
    </li>
{/each}
