<template>
	<div>
		<div class="content-section introduction">
			<div class="feature-intro">
				<h1>Paginator</h1>
				<p>Paginator is a generic component to display content in paged format.</p>
			</div>
		</div>

		<div class="content-section implementation">
			<h3>Basic</h3>
			<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>

			<h3>Custom</h3>
			<Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
                template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
                <template #left>
                    <Button type="button" icon="pi pi-refresh" @click="reset()"/>
                </template>
                <template #right>
                    <Button type="button" icon="pi pi-search" />
                </template>
            </Paginator>

            <div class="image-gallery">
                <img :src="'demo/images/nature/' + image + '.jpg'" />
            </div>
		</div>

        <PaginatorDoc />
	</div>
</template>

<script>
import PaginatorDoc from './PaginatorDoc';

export default {
    data() {
        return {
			first: 0,
            totalRecords: 120,
            totalRecords2: 12
        }
    },
    methods: {
        reset() {
            this.first = 0;
        }
    },
    computed: {
        image() {
            return 'nature' + (this.first + 1);
        }
    },
    components: {
        'PaginatorDoc': PaginatorDoc
    }
}
</script>

<style scoped>
.p-button.p-button-icon-only {
    border-radius: 0;
}

.image-gallery {
    text-align: center;
    padding: 1em;
}
</style>