<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';

import { useArrayData } from 'src/composables/useArrayData';

const router = useRouter();
const { t } = useI18n();
const arrayData = useArrayData('AliasCreate');
const { store } = arrayData;

const defaultInitialData = {
    alias: null,
    description: null,
};

const onDataSaved = ({ id }) => {
    router.push({ name: 'AliasBasicData', params: { id } });
    store.data = null;
};
</script>

<template>
    <FormModelPopup
        :title="t('Create alias')"
        ref="formModelPopupRef"
        url-create="MailAliases"
        model="AliasCreate"
        :form-initial-data="defaultInitialData"
        @on-data-saved="onDataSaved"
    >
        <template #form-inputs="{ data }">
            <VnRow>
                <div class="col">
                    <VnInput v-model="data.alias" :label="t('mailAlias.name')" />
                </div>
            </VnRow>
            <VnRow>
                <div class="col">
                    <VnInput
                        v-model="data.description"
                        :label="t('mailAlias.description')"
                    />
                </div>
            </VnRow>
        </template>
    </FormModelPopup>
</template>

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