<script setup>
import { q } from "#imports";
const emits = defineEmits(["submit"]);
defineProps({
  mail_driver: { type: String, required: true, default: "mail" },
  mail_host: { type: String, required: true },
  mail_port: { type: String, required: true },
  mail_username: { type: String, required: true },
  mail_password: { type: String, required: true },
  mail_encryption: { type: String, required: true },
  mail_from: { type: String, required: true },
  mail_from_name: { type: String, required: true },
  mail_reply_to: { type: String, required: true },
  mail_reply_to_name: { type: String, required: true }
});
</script>

<template>
    <FormKit type="l-form" :bordered="false" :value="$props" @submit="$emit('submit', $event)" #default="{ value }">

        <FormKit type="l-select" label="Mail Driver" name="mail_driver" :options="[
  {
    label: 'Mail',
    value: 'mail'
  },
  { label: 'SMTP', value: 'smtp' },
  { label: 'Sendmail', value: 'sendmail' },
  { label: 'Qmail', value: 'qmail' },
  { label: 'Gmail', value: 'gmail' }
]" validation="required"></FormKit>

        <template v-if="value.mail_driver === 'gmail'">
            <div class="col-12">
                <q-banner class="bg-info text-white" rounded>
                    <div class="text-weight-bold q-mb-xs">How to create an App Password</div>
                    <ol class="q-pl-md q-my-none">
                        <li>Enable 2-Step Verification in your Google Account Security settings.</li>
                        <li>Go to the <a href="https://myaccount.google.com/apppasswords" target="_blank" class="text-white" style="text-decoration: underline;">Google App Passwords page</a>.</li>
                        <li>Select app and device, or choose Other (Custom name), then click Generate.</li>
                        <li>Copy the 16-character password and paste it below.</li>
                    </ol>
                </q-banner>
            </div>
            <FormKit type="l-input" label="Gmail Address" name="mail_username" validation="required|email"></FormKit>
            <FormKit type="l-input" label="App Password" name="mail_password" validation="required" :attrs="{ type: 'password' }"></FormKit>
        </template>

        <template v-else>

            <FormKit type="l-input" label="From Address" name="mail_from" validation="email"></FormKit>
            <FormKit type="l-input" label="From Name" name="mail_from_name"></FormKit>
            <FormKit type="l-input" label="Reply To Address" name="mail_reply_to" validation="email">
            </FormKit>
            <FormKit type="l-input" label="Reply To Name" name="mail_reply_to_name"></FormKit>

            <template v-if="value.mail_driver === 'smtp'">
                <FormKit type="l-input" label="SMTP Host" name="mail_host"></FormKit>
                <FormKit type="l-input" label="SMTP Port" name="mail_port"></FormKit>
                <FormKit type="l-input" label="SMTP Username" name="mail_username"></FormKit>
                <FormKit type="l-input" label="SMTP Password" name="mail_password" :attrs="{ type: 'password' }"></FormKit>

                <FormKit type="l-select" label="SMTP Encryption" name="mail_encryption" :options="[
  { label: 'None', value: '' },
  { label: 'SSL', value: 'ssl' },
  { label: 'TLS', value: 'tls' }
]"></FormKit>
            </template>

        </template>

    </FormKit>
</template>
