<script>
    import Pagination from "svelte-pagination";
    import { createEventDispatcher } from "svelte";
    const dispatch = createEventDispatcher();

    export let forcePage = 1;
    export let limit = 15;
    export let count = 0;
    export let disabled = false;
    let timePage = null;

    function handleChange(e) {
        const { selected = 1 } = e.detail;
        dispatch("page", selected)
    }
</script>

<div class="pagination-container">
    <Pagination
        pageCount={Math.ceil(count / limit) +1}
        marginPagesDisplayed={2}
        pageRangeDisplayed={5}
        previousLabel="«"
        nextLabel="»"
        containerClassName="pagination px-0 mb-0"
        pageClassName={"page-item" + (disabled ? " disabled" : "")}
        previousClassName={"page-item" + (disabled ? " disabled" : "")}
        nextClassName={"page-item" + (disabled ? " disabled" : "")}
        breakClassName={"page-item" + (disabled ? " disabled" : "")}
        pageLinkClassName="page-link"
        previousLinkClassName="page-link"
        nextLinkClassName="page-link"
        breakLinkClassName="page-link"
        activeClassName="active"
        activeLinkClassName="active"
        hrefBuilder={() => {}}
        ariaLabelBuilder={null}
        extraAriaContext={null}
        initialPage={forcePage || 1}
        {forcePage}
        on:change={handleChange}
    />
    
    <span class="page-link d-inline-block bg-light text-info">
        {#if count}
            {count} registros
        {:else}
            Sin registros
        {/if}
    </span>
</div>

