<template>
  <div class="aura-table-wrapper">
    <table ref="tableEl" class="aura-table">
      <colgroup>
        <col width="0" />
      </colgroup>
      <thead class="tw-sticky tw-top-0 tw-bg-white">
        <tr>
          <th></th>
          <th>{{ t('show.fields.name') }}</th>
          <th>{{ t('show.fields.updatedAt') }}</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="show in shows.items" :key="show.id">
          <ShowListTableRow :show="show" class="tw-transition hover:tw-bg-gray-50" />
        </template>
      </tbody>
    </table>

    <slot name="footer" />
  </div>
</template>

<script setup lang="ts">
import { PaginatedListResult } from '@rokoli/bnb/drf'
import { Show } from '@/types'
import { useI18n } from '@/i18n'
import ShowListTableRow from './ShowListTableRow.vue'

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

defineProps<{
  shows: PaginatedListResult<Show>
}>()
const { t } = useI18n()
</script>