<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>
        <th>Produkter</th>
        <th class="has-text-right">Handlinger</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="category in objects" :key="category.id">
        <td>{{ category.category.id }}</td>
        <!-- Category id -->
        <EditableTableColumn
            :object="category"
            :loadList="loadList"
            column="id"
            :parse-function="(value) => category.category.name"
        />
        <!-- Description -->
        <EditableTableColumn
            :object="category"
            :loadList="loadList"
            column="description"
        />
        <!-- Products -->
        <td>
          <button class="button is-small is-dark" @click="SessionUser.objects.products.functions.showCategoryProducts(category.category.id)">
            <span class="icon">
              <i class="fas fa-list"></i>
            </span>
            <span>{{ category.category.meta.product_count }} produkter</span>
          </button>
        </td>
        <!-- Actions -->
        <td>
          <div class="buttons is-float-right">
            <!-- Settings wheel -->
            <div class="dropdown is-right is-hoverable">
              <div class="dropdown-trigger">
                <button class="button is-small is-dark" aria-haspopup="true" aria-controls="dropdown-menu">
                  <span class="icon">
                    <i class="fas fa-cog"></i>
                  </span>
                </button>
              </div>
              <div class="dropdown-menu" id="dropdown-menu" role="menu">
                <div class="dropdown-content">
                  <!-- Delete category link -->
                  <a class="dropdown-item has-text-danger" @click="SessionUser.objects.department_categories.functions.showDeleteObjectForm(category.id, loadList)">
                    <span class="icon">
                      <i class="fas fa-trash"></i>
                    </span>
                    <span class="ml-1">Fjern kategori</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <!-- If the list is empty -->
      <tr v-if="objects.length === 0">
        <td colspan="5">Ingen kategorier fundet</td>
      </tr>
      <!-- Show a count of the total number of categories -->
      <tr>
        <td colspan="5">Viser {{ objects.length }} katagorier</td>
      </tr>
      </tbody>
    </table>
</template>

<style scoped>

</style>