<script setup>
import { q, m, notify } from "#imports";
const { my } = await q({
  my: {
    username: true,
    email: true,
    first_name: true,
    last_name: true
  }
});
const onSubmit = async (data, form) => {
  return await m("updateMy", {
    data: {
      email: data.email,
      first_name: data.first_name,
      last_name: data.last_name
    }
  }).then(() => {
    notify("Your profile has been updated");
    reset(form, data);
  });
};
</script>

<template>
    <FormKit type="l-form" :value="my" :bordered="false" @submit="onSubmit">
        <FormKit type="l-input" label="Username" name="username" readonly></FormKit>
        <FormKit type="l-input" label="Email" name="email" validation="required|email"></FormKit>
        <FormKit type="l-input" label="First name" name="first_name" validation="required"></FormKit>
        <FormKit type="l-input" label="Last name" name="last_name"></FormKit>
    </FormKit>
</template>
