<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';

import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnSelect from 'src/components/common/VnSelect.vue';

const { t } = useI18n();
const route = useRoute();

const rolesOptions = ref([]);
const formModelRef = ref();
</script>
<template>
    <FetchData
        url="VnRoles"
        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
        auto-load
        @on-fetch="(data) => (rolesOptions = data)"
    />
    <FormModel
        ref="formModelRef"
        model="AccountPrivileges"
        :url="`VnUsers/${route.params.id}`"
        :url-create="`VnUsers/${route.params.id}/privileges`"
        auto-load
        @on-data-saved="formModelRef.fetch()"
    >
        <template #form="{ data }">
            <div class="q-gutter-y-sm">
                <QCheckbox
                    v-model="data.hasGrant"
                    :label="t('account.card.privileges.delegate')"
                />
                <VnSelect
                    :label="t('account.card.role')"
                    v-model="data.roleFk"
                    :options="rolesOptions"
                    option-value="id"
                    option-label="name"
                    hide-selected
                    :required="true"
                />
            </div>
        </template>
    </FormModel>
</template>
