<template>
  <div class="datatable-bottom">
      <div class="datatable-info">
        Showing {{ startIndex + 1 }} to {{ endIndex }} of {{ filteredRows.length }} entries
      </div>
      <nav class="datatable-pagination">
        <ul class="datatable-pagination-list">
          <li :class="{'datatable-disabled': currentPage === 1}" @click="changePage(currentPage - 1)">
            <button class="datatable-pagination-list-item-link">‹</button>
          </li>
          <li v-for="page in totalPages" 
              :key="page"
              :class="{'datatable-active': currentPage === page}">
            <button class="datatable-pagination-list-item-link" @click="changePage(page)">
              {{ page }}
            </button>
          </li>
          <li :class="{'datatable-disabled': currentPage === totalPages}" @click="changePage(currentPage + 1)">
            <button class="datatable-pagination-list-item-link">›</button>
          </li>
        </ul>
      </nav>
    </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1
    };
  },
  computed: {
    filteredRows() {
      if (!this.searchQuery) return this.rows;
      return this.rows.filter(row =>
        Object.values(row).some(val =>
          String(val).toLowerCase().includes(this.searchQuery.toLowerCase())
        )
      );
    },
    totalPages() {
      return Math.ceil(this.filteredRows.length / this.perPage);
    },
    startIndex() {
      return (this.currentPage - 1) * this.perPage;
    },
    endIndex() {
      return Math.min(this.currentPage * this.perPage, this.filteredRows.length);
    },
    paginatedRows() {
      return this.filteredRows.slice(this.startIndex, this.endIndex);
    }
  },
  methods: {
    changePage(page) {
      if (page < 1 || page > this.totalPages) return;
      this.currentPage = page;
    }
  }
};
</script>

<style scoped>
/* Add your styles here */
</style>
