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

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

const { t } = useI18n();

const newAccountForm = reactive({
    supplierFk: null,
    travelFk: null,
    companyFk: null,
});
</script>

<template>
    <QPage>
        <VnSubToolbar> </VnSubToolbar>
        <pre>TODO <b>LDAP</b></pre>
        <FormModel
            url-create="Entries"
            model="account"
            :form-initial-data="newAccountForm"
        >
            <template #moreActions>
                <QBtnGroup push class="q-gutter-x-sm">
                    <QBtn round flat color="primary" :label="t('ldap.testConnection')">
                        <QTooltip>
                            {{ t('ldap.testConnection') }}
                        </QTooltip>
                    </QBtn>
                </QBtnGroup>
            </template>
            <template #form="{ data }">
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <QCheckbox
                            :label="t('ldap.enableSync')"
                            v-model="data.enableSync"
                        />
                    </div>
                </VnRow>
                <template v-if="data.enableSync">
                    <VnInput :label="t('ldap.server')" clearable v-model="data.server" />
                    <VnInput :label="t('ldap.rdn')" clearable v-model="data.rdn" />
                    <VnInput
                        :label="t('ldap.passwordAD')"
                        clearable
                        type="password"
                        v-model="data.passwordAD"
                    />
                    <VnInput :label="t('ldap.userDN')" clearable v-model="data.userDN" />
                    <VnInput
                        :label="t('ldap.groupDN')"
                        clearable
                        v-model="data.groupDN"
                    />
                </template>
            </template>
        </FormModel>
    </QPage>
</template>
