<?php

/**
 * Pagination.
 *
 * @since 3.0.0
 */

?>

<script type="text/x-template" id="tmpl-lp-pagination">
	<div class="pagination" v-if="total > 1">
		<form prevent.submit="">
			<button class="button first" :disabled="page == 1" v-if="total > 2 && page > 1 && page != 2"
					@click.prevent="previousFirstPage">«
			</button>
			<button class="button previous" :disabled="page == 1"
					@click.prevent="previousPage"><?php echo esc_html_x( 'Previous', 'page-navigation', 'learnpress' ); ?></button>
			<button class="button next" :disabled="page == total"
					@click.prevent="nextPage"><?php echo esc_html_x( 'Next', 'page-navigation', 'learnpress' ); ?></button>
			<button class="button last" :disabled="page == total"
					v-if="total > 2 && page < total && page != (total - 1)"
					@click.prevent="nextLastPage">»
			</button>
			<span class="index">{{page}} / {{total}}</span>
		</form>
	</div>
</script>

<script type="text/javascript">
	window.$Vue = window.$Vue || Vue;

	jQuery( function( $ ) {
		( function( $store ) {
			$Vue.component( 'lp-pagination', {
				template: '#tmpl-lp-pagination',
				props: ['total'],
				data: function () {
					return { page: 1 }
				},
				methods: {
					update: function() {
						this.$emit( 'update', this.page );
					},
					nextPage: function() {
						if ( this.page < this.total ) {
							this.page++;
							this.update();
						}
					},
					nextLastPage: function() {
						if ( this.page < this.total ) {
							this.page = this.total;
							this.update();
						}
					},
					previousPage: function() {
						if ( this.page > 1 ) {
							this.page--;
							this.update();
						}
					},
					previousFirstPage: function() {
						if ( this.page > 1 ) {
							this.page = 1;
							this.update();
						}
					}
				}
			});
		})( LP_Curriculum_Store );
	});
</script>