<template>
  <div class="overflow-hidden overflow-x-auto relative">
    <table
      v-if="resources.length > 0"
      class="w-full divide-y divide-gray-100 dark:divide-gray-700"
      data-testid="resource-table"
    >
      <table-header
        :resource-name="resourceName"
        :fields="fields"
      />
      <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
        <table-row
          v-for="(resource, index) in resources"
          @actionExecuted="$emit('actionExecuted')"
          :testId="`${resourceName}-items-${index}`"
          :key="`${resource.id.value}-items-${index}`"
          :resource="resource"
          :resource-name="resourceName"
        />
      </tbody>
    </table>
  </div>
</template>

<script>
import TableHeader from './TableHeader.vue'
import TableRow from './TableRow.vue'

export default {
  components: {
    'table-header': TableHeader,
    'table-row': TableRow,
  },

  props: {
    resourceName: { default: null },
    resources: { default: [] },
    singularName: { type: String, required: true },
  },

  computed: {
    /**
     * Get all of the available fields for the resources.
     */
    fields() {
      if (this.resources) {
        return this.resources[0].fields
      }
    },
  },

  methods: {
    
  }
}
</script>
