<template>
    <div class="pagination">
        <button @click="gotoPage(0)">First</button>
        <button @click="gotoPage(page - 1)">Previous</button>
        <button class="unselectable">{{ page + 1 }} / {{ maxPages }}</button>
        <button @click="gotoPage(page + 1)">Next</button>
        <button @click="gotoPage(maxPages)">Last</button>
    </div>
</template>

<script>
export default {
    props: {
        page: Number,
        itemsPerPage: Number,
        maxPages: Number,
    },
    methods: {
        gotoPage(page) {
            if (page < 0) {
                page = 0;
            }

            if (page >= this.maxPages) {
                page = this.maxPages - 1;
            }

            if (page !== this.page) {
                this.$emit('update:page', page);
            }
        },
    }
}
</script>
