<script setup>
import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";

defineProps(['objects']);
import { ref } from 'vue';
import { loadList } from "@/components/pagination/paginatedList.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const redirect = (path) => {
  window.location = path;
}

</script>

<template>
    <table class="table is-fullwidth">
      <thead>
      <tr>
        <th>ID</th>
        <th>Navn</th>
        <th>Beskrivelse</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="category in objects" :key="category.id">
        <td>{{ category.id }}</td>
        <!-- Name -->
        <EditableTableColumn
            :object="category"
            :loadList="loadList"
            :editFunction="SessionUser.objects.categories.showEditObjectFieldForm"
            column="name"
        />
        <!-- Description -->
        <EditableTableColumn
            :object="category"
            :loadList="loadList"
            :editFunction="SessionUser.objects.categories.showEditObjectFieldForm"
            column="description"
        />
      </tr>
      <!-- If the list is empty -->
      <tr v-if="objects.length === 0">
        <td colspan="4">Ingen kategorier fundet</td>
      </tr>
      <!-- Show a count of the total number of categories -->
      <tr>
        <td colspan="4">Viser {{ objects.length }} katagorier</td>
      </tr>
      </tbody>
    </table>
</template>

<style scoped>

</style>