<template>
  <div class="aura-table-scroller">
    <div ref="tableWrapperEl" class="aura-table-wrapper">
      <table class="aura-table">
        <thead>
          <slot name="thead">
            <tr>
              <slot name="header" />
            </tr>
          </slot>
        </thead>
        <tbody>
          <slot name="body">
            <template v-if="items">
              <tr v-for="(item, index) in items" :key="index">
                <slot :obj="item" :index="index" />
              </tr>
            </template>
          </slot>
        </tbody>
      </table>

      <slot class="footer">
        <template v-if="paginationData">
          <PaginationRange v-if="paginationData.count > 0" :pagination-data="paginationData" />
          <FormGroup
            v-if="itemsPerPage"
            v-slot="attrs"
            class="tw-ml-auto tw-m-0 tw-mr-9 last:tw-mr-0"
          >
            <label class="tw-flex tw-items-center tw-gap-3 tw-m-0">
              <span>{{ t('table.itemsPerPage') }}</span>
              <input
                v-model.lazy="itemsPerPage"
                type="number"
                min="1"
                step="1"
                v-bind="attrs"
                class="tw-w-[80px] tw-self-center"
              />
            </label>
          </FormGroup>
          <Pagination
            v-if="page"
            v-model="page"
            :items-per-page="itemsPerPage ?? paginationData.itemsPerPage"
            :count="paginationData.count"
          />
        </template>
      </slot>
    </div>
  </div>
</template>

<script lang="ts" setup generic="T">
import { ref } from 'vue'
import { PaginatedListResult } from '@rokoli/bnb/drf'
import Pagination from '@/components/generic/Pagination.vue'
import FormGroup from '@/components/generic/FormGroup.vue'
import PaginationRange from '@/components/generic/PaginationRange.vue'
import { useI18n } from '@/i18n'

defineOptions({ compatConfig: { MODE: 3 } })

const page = defineModel<number>('page', { required: false })
const itemsPerPage = defineModel<number>('itemsPerPage', { required: false })

defineProps<{
  items?: T[]
  paginationData?: Omit<PaginatedListResult<T>, 'items'>
}>()
const { t } = useI18n()
const tableWrapperEl = ref()
</script>