<template>
  <div class="pagination-inner-wrap">
    <div class="pagination-input-group mb-3 upload-key-group">
      <button
        :class="{'disabled-btn': meta.current_page === 1}"
        class="enstract-button eb-small button-pagination-radius-left text-center"
        @click.prevent="switched(meta.current_page - 1)"
      >
        <i class="fa fa-chevron-left"></i>
      </button>

      <span class="paginate-number"
        ><strong>{{ meta.current_page }}</strong>
         <span>of</span>
        <strong>{{ meta.last_page }}</strong></span
      >

      <button
        :class="{'disabled-btn': meta.current_page === meta.last_page}"
        class="enstract-button eb-small button-pagination-radius-right text-center"
        @click.prevent="switched(meta.current_page + 1)"
      >
        <i class="fa fa-chevron-right"></i>
      </button>
    </div>
  </div>
</template>
<script>
export default {
  props: ['meta'],
  methods: {
    switched (page) {

      if(page <= 0 || page > this.meta.last_page) {
        return
      }

      this.$emit('pagination:switched', page)
    }
  },
}
</script>
