<script setup>
import { q, m } from "#imports";
import { useQuasar } from "quasar";
const $q = useQuasar();
const props = defineProps({
  mode: { type: String, required: true, default: "dev" },
  custom_field_models: { type: String, required: true, default: "" }
});
const emit = defineEmits(["submit"]);
const processedMode = props.mode !== "prod" ? "dev" : "prod";
const processedCustomFieldModels = props.custom_field_models ? props.custom_field_models.split(",") : [];
const onSubmit = async (d) => {
  emit("submit", d);
};
</script>

<template>
    <FormKit type="l-form" :bordered="false" :value="{
  mode: processedMode,
  custom_field_models: processedCustomFieldModels
}" @submit="onSubmit">

        <form-kit type="l-select" name="custom_field_models" label="Custom Field Model" use-input use-chips multiple
            hide-dropdown-icon input-debounce="0" new-value-mode="add-unique" />

        <FormKit label="Mode" type="l-select" :options="[
  { label: 'Production', value: 'prod' },
  { label: 'Development', value: 'dev' }
]" name="mode" validation="required">

        </FormKit>

    </FormKit>
</template>
