<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 row items-center justify-center fit">
        <MenuEmployee
            v-if="employee_roles.includes(auth_store.user?.role.toUpperCase() ?? 'GUEST')"
            class="col-xs-12 col-md-10 col-lg-7 col-xl-5"
            :class="$q.platform.is.mobile ? 'self-stretch' : ''"
        />
    </q-page>
</template>