<script setup>
import { m, q } from "#imports";
import { collect } from "collect.js";
const { app } = await q({
  app: {
    permissions: true
  }
});
app.permissions = app.permissions.filter((permission) => permission != "*");
const g = collect(app.permissions).groupBy((permission) => permission.split(".")[0]).all();
const x = Object.keys(g).map((module) => {
  return {
    module,
    permissions: collect(g[module]).map((permission) => {
      return {
        label: permission,
        value: permission
      };
    }).all()
  };
});
const onSubmit = () => {
};
</script>

<template>
    <l-page>

        <form-kit type="l-form" @submit="onSubmit" :value="{
            permissions: []
        }" #default="{ value }">
            <form-kit type="l-input" name="name" label="Name" validation="required" />
            <q-separator />

            <l-row>
                <l-col md="3" v-for="module in x" :key="module.module">

                    <q-list>
                        <q-item dense>
                            <q-item-section>
                                <q-item-label>
                                    {{ module.module }}
                                </q-item-label>
                            </q-item-section>
                        </q-item>
                        <q-separator />
                        <q-option-group dense :options="module.permissions" type="checkbox"
                            v-model="value.permissions" />
                    </q-list>

                </l-col>
            </l-row>

        </form-kit>

    </l-page>
</template>
