<script setup>
import PageTitle from "@/components/global/PageTitle.vue";
import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import DepartmentSubPageWrapper from "@/views/dashboards/superUserDashboard/department/DepartmentSubPageWrapper.vue";
import { setDepartment, department, departmentId } from "@/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue";
import { useRouter } from 'vue-router'
import {ref} from "vue";
import { list, setEndpoint, loadList, setOrder} from "@/components/pagination/paginatedList.vue";
import DepartmentCategoriesTable from "@/components/displays/superuser/tables/departmentCategoriesTable.vue";

// Get the department from the route
const router = useRouter()
setDepartment(parseInt(router.currentRoute.value.params.departmentId));

// Set the endpoint
setEndpoint(SessionUser.objects.department_categories.meta.endpoint + `?id=${departmentId.value}`, false);
// Set the order
setOrder("category_id", "asc");
// Load the list
loadList();
</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
    <DepartmentSubPageWrapper>
      <template #title>
        <PageTitle title="Department" :subtitle="SessionUser.objects.department_categories.meta.title">
          <template #buttons>
            <button class="button is-dark" @click="SessionUser.objects.department_categories.functions.showCreateObjectFormDepartment(departmentId, loadList)">
              <span class="icon">
                <i class="fas fa-plus"></i>
              </span>
              <span>Tilføj {{ SessionUser.objects.department_categories.meta.labels.single }}</span>
            </button>
          </template>
        </PageTitle>
      </template>
      <div>
        <DepartmentCategoriesTable :objects="list" />
      </div>
    </DepartmentSubPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>