<script setup>
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import FormModelPopup from 'components/FormModelPopup.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';

const router = useRouter();
const { t } = useI18n();
</script>
<template>
    <FormModelPopup
        :title="t('Create role')"
        ref="formModelPopupRef"
        url-create="VnRoles"
        model="VnRole"
        :form-initial-data="{}"
        @on-data-saved="
            (_, { id }) => router.push({ name: 'RoleBasicData', params: { id } })
        "
    >
        <template #form-inputs="{ data }">
            <VnRow>
                <div class="col">
                    <VnInput v-model="data.name" :label="t('role.card.name')" />
                </div>
            </VnRow>
            <VnRow>
                <div class="col">
                    <VnInput
                        v-model="data.description"
                        :label="t('role.card.description')"
                    />
                </div>
            </VnRow>
        </template>
    </FormModelPopup>
</template>

<i18n>
    es:
        Create role: Crear role
</i18n>
