<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";
import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.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>Tilladelser</th>
        <th class="has-text-right">Handlinger</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="object in objects" :key="object.id">
        <td>{{ object.id }}</td>
        <!-- Role name -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="name"
            :parse-function="(value) => object.name"
            :edit-function="SessionUser.objects.roles.showEditObjectFieldForm"
        />
        <!-- Description -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="description"
            :edit-function="SessionUser.objects.roles.showEditObjectFieldForm"
        />
        <!-- Permissions (Count) -->
        <td>{{ object.permissions.length }}</td>
        <!-- Actions -->
        <td>
          <div class="buttons is-float-right">
            <ActionSettingsWheelButton>
              <template #actions>
                <!-- Edit role -->
                <ActionSettingsWheelItem
                    label="Tilladelser"
                    icon="fas fa-key"
                    :click-action="() => redirect(`/superuser/roles/${object.id}`)"
                ></ActionSettingsWheelItem>
                <!-- Clone role -->
                <ActionSettingsWheelItem
                    label="Klon"
                    icon="fas fa-clone"
                    :click-action="() => SessionUser.objects.roles.functions.cloneObject(object.id).then(() => loadList())"
                ></ActionSettingsWheelItem>
              </template>
            </ActionSettingsWheelButton>
          </div>
        </td>
      </tr>
      <!-- If the list is empty -->
      <tr v-if="objects.length === 0">
        <td colspan="5">Ingen {{ SessionUser.objects.roles.meta.labels.multiple }} fundet</td>
      </tr>
      <!-- Show a count of the total number of categories -->
      <tr>
        <td colspan="5">Viser {{ objects.length }} {{ SessionUser.objects.roles.meta.labels.multiple }}</td>
      </tr>
      </tbody>
    </table>
</template>

<style scoped>

</style>