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

defineProps(['objects']);
import { ref } from 'vue';
import { departments, getDepartments, isLoading, getDepartmentName} from "@/components/pagination/departmentTabs.vue";

// Get the departments (If the departments are not already loaded)
if (departments.value.length === 0) {
  getDepartments();
}



import { showEditUserForm } from "@/components/forms/superUser/editUserForm.vue";
import { SessionUser } from "@/components/session/token/SessionUser.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>Rolle</th>
        <th class="has-text-right">Handlinger</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="user in objects" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.display_name }}</td>
        <td>{{ user.group_id }}</td>
        <td>
          <div class="buttons is-float-right">
            <!-- Settings wheel -->
            <ActionSettingsWheelButton
            >
              <template #actions>
                <ActionSettingsWheelItem
                    @click="showEditUserForm(user.id, user.customer_number, user.display_name, user.group_id)"
                    icon="fas fa-user-edit"
                    label="Rediger"
                />
                <ActionSettingsWheelItem
                    @click="SessionUser.superUser.intimidate.intimidateUser(user.id)"
                    icon="fas fa-user-shield"
                    label="Log ind som bruger"
                    :disabled="user.group_id === 1"
                />
              </template>
            </ActionSettingsWheelButton>
          </div>
        </td>
      </tr>
      </tbody>
    </table>

</template>

<style scoped>

</style>