<script
    setup
    lang="ts"
>
    import MenuEmployee from 'src/modules/profile/components/employee/menu-employee.vue';
    import { useAuthStore } from 'src/stores/auth-store';
import { useEmployeeStore } from 'src/stores/employee-store';
import { onMounted } from 'vue';

    const auth_store = useAuthStore();
    const employee_store = useEmployeeStore();
    const employee_roles = ['SUPERVISOR', 'EMPLOYEE', 'ADMIN', 'HR', 'ACCOUNTING'];

    const is_employee = employee_roles.includes(auth_store.user?.role.toUpperCase() ?? 'GUEST');

    onMounted(async () => {
        if (is_employee) {
            await employee_store.getEmployeeDetails();
        }
    })
</script>

<template>
    <q-page class="bg-secondary column items-center justify-center">
        <MenuEmployee
            v-if="employee_roles.includes(auth_store.user?.role.toUpperCase() ?? 'GUEST')"
            class="col-sm-12 col-md-10 col-lg-9 col-xl-8"
        />
    </q-page>
</template>

<style scoped>
:deep(.q-field--standout.q-field--readonly .q-field__control:before) {
  border: none !important;
  background-color: transparent;
}
</style>