<script setup>

import DepartmentModulesDisplay from "@/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue";
import { ref, watch } from 'vue';
import { getDepartmentName, getDepartmentDescription, isLoading, getDepartments, departments, departmentExists } from "@/components/pagination/departmentTabs.vue";
import {useRouter} from "vue-router";
import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";

const router = useRouter();
const departmentId = ref(parseInt(router.currentRoute.value.params.departmentId));
</script>
<template>
  <DepartmentDashboardPageWrapper
      :title="getDepartmentName(departmentId)"
      :subtitle="getDepartmentDescription(departmentId)"
  >
    <template #default>
      <DepartmentModulesDisplay v-if="departmentId && !isLoading && departmentExists(departmentId)" class="my-3"></DepartmentModulesDisplay>
    </template>
  </DepartmentDashboardPageWrapper>
</template>

<style scoped>

</style>