<script setup>
import { reactive } from "vue";
import { q } from "#imports";
const obj = reactive({
  username: null,
  password: null,
  first_name: null,
  last_name: null,
  email: null,
  phone: null,
  addr1: null,
  addr2: null,
  addr3: null,
  join_date: (/* @__PURE__ */ new Date()).toISOString().substring(0, 10),
  //YYYY-MM-DD (today)
  expiry_date: null,
  status: 0,
  language: "en",
  default_page: null,
  roles: ["Users"]
});
let { system, listRole } = await q({
  system: {
    passwordPolicy: true
  },
  listRole: {
    name: true
  }
});
const roles = listRole.map((role) => {
  return {
    label: role.name,
    value: role.name
  };
});
const options = [
  { label: "Active", value: 0 },
  { label: "Inactive", value: 1 }
];
const { app } = await q({
  app: { languages: true }
});
const languages = app.languages.map((lang) => {
  return {
    label: lang.name,
    value: lang.value
  };
});
</script>

<template>
    <l-page>

        <FormKit type="l-form" :value="obj">
            <l-row class="col">
                <l-col md="6">
                    <FormKit type="l-input" label="Username" name="username" validation="required" />
                    <FormKit type="l-input" label="Password" name="password" :validation="system.passwordPolicy"
                        input-type="password" autocomplete="new-password" />
                    <FormKit type="l-input" label="First name" name="first_name" validation="required" />
                    <FormKit type="l-input" label="Last name" name="last_name" />
                    <FormKit type="l-input" label="Email" name="email" validation="required|email" />
                </l-col>

                <l-col md="6">
                    <FormKit type="l-input" label="Phone" name="phone" />
                    <FormKit type="l-input" label="Address1" name="addr1" />
                    <FormKit type="l-input" label="Address2" name="addr2" />
                    <FormKit type="l-input" label="Address3" name="addr3" />
                </l-col>

                <l-col>
                    <FormKit type="l-date-picker" label="Join date" name="join_date" validation="required" />
                    <FormKit type="l-date-picker" label="Expiry date" name="expiry_date" />
                    <FormKit type="l-select" label="Status" name="status" :options="options" validation="required" />
                    <FormKit type="l-select" label="Language" name="language" :options="languages"
                        validation="required" />
                    <FormKit type="l-input" label="Default page" name="default_page" />

                    <FormKit type="l-option-group" label="Roles" name="roles" :options="roles ?? []" />
                </l-col>
            </l-row>

        </FormKit>

    </l-page>
</template>
