<script setup>
import { reactive } from "vue";
import { m } from "#imports";
import { listRoles } from "@hostlink/light";
import { useRouter } from "vue-router";
const obj = reactive({
  roles: []
});
let roles = await listRoles();
roles = roles.map((role) => {
  return {
    label: role.name,
    value: role.name
  };
});
const router = useRouter();
const onSave = async () => {
  await m("addPermissionRoles", {
    value: obj.value,
    roles: obj.roles
  });
  router.push(`/Permission`);
};
</script>

<template>
    <l-page>
        <l-form @submit="onSave">

            <l-input label="Permission name" v-model="obj.value" required class="col-12"></l-input>

            <l-field label="Roles" stack-label>
                <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
                </q-option-group>
            </l-field>

        </l-form>

    </l-page>
</template>
