<template>
  <div class="table-responsive mb-0">
    <b-table
      class="datatables"
      :items="tableData"
      :fields="fields"
      responsive="sm"
      :per-page="perPage"
      :current-page="currentPage"
      :sort-by.sync="sortBy"
      :sort-desc.sync="sortDesc"
      @filtered="onFiltered"
      :bordered="true"
      thead-class="table-light"
      :hover="true"
      :striped="false"
      :busy="loadingTemplates"
      :show-empty="true"
      sticky-header
    >
      <!-- Template for loader  -->
      <template #table-busy>
        <growing-loader></growing-loader>
      </template>
      <template #cell(image)="data">
        <img :src="data.item.image" alt class="avatar-sm" />
      </template>
      <template #cell(status)="data">
        <span
          :class="{
            badge: true,
            'bg-success': data.item.isActive === true,
            'bg-danger': data.item.isActive === false,
          }"
          >{{ data.item.isActive ? 'Active' : 'Pending' }}</span
        >
      </template>
      <template #cell(dateCreated)="data">
        {{ formattedDate(data.item.dateCreated) }}
      </template>
      <template #cell(action)="data">
        <b-button
          variant="success"
          class="ms-1"
          @click="$emit('selectedId', data.item.sid)"
          style="margin-right: 10px;"
          >Edit</b-button
        >
        <b-button
          variant="danger"
          class="me-1"
          @click="$emit('onDelete', data.item.sid)"
          ><i
            class="bx bx-loader bx-spin font-size-16 align-middle me-2"
            v-if="deleteTemplateID === data.item.sid && deletingTemplateLoading"
          ></i>
          Delete</b-button
        >
      </template>
    </b-table>
  </div>
</template>
<script>
import moment from 'moment';
import GrowingLoader from '../../../components/GrowingLoader.vue';
import { BTable,BButton} from 'bootstrap-vue-next'

export default {
  props: {
    loadingTemplates: {
      type: Boolean,
      required: true,
    },
    tableData: {
      type: Array,
      required: true,
    },
    deletingTemplateLoading: {
      type: Boolean,
      required: true,
    },
    deleteTemplateID: {},
  },
  data() {
    return {
      totalRows: 1,
      currentPage: 1,
      perPage: 5,
      pageOptions: [5, 10, 25, 50, 100],
      filter: null,
      filterOn: [],
      sortBy: 'createdOn',
      sortDesc: false,
      fields: [
        'image',
        {
          key: 'title',
          sortable: true,
        },
        {
          key: 'description',
          sortable: false,
        },
        'dateCreated',
        'status',
        'action',
      ],
    };
  },
  computed: {
    rows() {
      return this.tableData.length;
    },
  },
  methods: {
    formattedDate(v) {
      return moment(new Date(v)).format('L');
    },
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
  },
  components: {
    GrowingLoader,
    BTable,BButton
  },
};
</script>