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

import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';

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

const filter = { where: { id: `${route.params.id}` } };
</script>

<template>
    <FormModel
        :filter="filter"
        :observe-form-changes="false"
        :url-update="`Clients/${route.params.id}/updateUser`"
        :url="'VnUsers/preview'"
        model="client"
    >
        <template #form="{ data }">
            <div
                v-for="(item, index) in data"
                :key="index"
                :class="{
                    'q-mb-md': index < data.length - 1,
                }"
            >
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <QCheckbox
                            :label="t('Enable web access')"
                            v-model="item.active"
                        />
                    </div>
                </VnRow>

                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <VnInput :label="t('User')" v-model="item.name" />
                    </div>
                    <div class="col">
                        <VnInput :label="t('Recovery email')" v-model="item.email">
                            <template #append>
                                <QIcon name="info" class="cursor-pointer">
                                    <QTooltip>{{
                                        t(
                                            'This email is used for user to regain access their account'
                                        )
                                    }}</QTooltip>
                                </QIcon>
                            </template>
                        </VnInput>
                    </div>
                </VnRow>
            </div>
        </template>
    </FormModel>
</template>

<i18n>
es:
    Enable web access: Habilitar acceso web
    User: Usuario
    Recovery email: Correo de recuperacion
    This email is used for user to regain access their account: Este correo electrónico se usa para que el usuario recupere el acceso a su cuenta
</i18n>
