<script setup>
const props = defineProps({
  items: {
    type: Array,
    default: [],
  },
});
</script>
<template>
  <!-- {{ props.items }} -->
  <!-- <h1>Coba</h1> -->
   <div class="overflow-x-auto" style="min-height: 300px">
  <!-- <v-card style="width: 100%" class="py-3 px-3"> -->
    <ListElement
      :default="props.items.menu"
      name="menu"
      add-text="+ module"
      :sort="true"
      wrapper-class="flex flex-col items-center gap-4"
      add-class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full"
    >
      <template #default="{ index }">
        <ObjectElement :name="index">
          <div class="vf-element-layout vf-col-12">
            <v-table style="min-width: 100%">
              <thead v-if="index === 0">
                <tr>
                  <th class="text-h6 ps-6">Module</th>
                  <!-- <th class="text-h6">Create</th>
                  <th class="text-h6">Update</th>
                  <th class="text-h6">Delete</th>
                  <th class="text-h6">Show</th> -->
                </tr>
              </thead>
              <tbody>
                <!-- <tr v-for="(item,index) in props.items.menu" :key="index" name="menu"> -->
                <tr>
                  <!-- <td>{{item}}</td> -->
                  <td>
                    <TextElement name="Module" placeholder="Module" :columns="{
                        container: 6,
                      }" />
                  </td>
                  <td>
                    <CheckboxElement
                      name="create"
                      text="create"
                      :columns="{
                        container: 6,
                      }"
                      trueValue="true"
                      falseValue="false"
                    />
                  </td>
                  <td>
                    <CheckboxElement
                      name="update"
                      text="update"
                      :columns="{
                        container: 6,
                      }"
                      trueValue="true"
                      falseValue="false"
                    />
                  </td>
                  <td>
                    <CheckboxElement
                      name="delete"
                      text="delete"
                      :columns="{
                        container: 6,
                      }"
                      trueValue="true"
                      falseValue="false"
                    />
                  </td>
                  <td>
                    <CheckboxElement
                      name="show"
                      text="show"
                      :columns="{
                        container: 6,
                      }"
                      trueValue="true"
                      falseValue="false"
                    />
                  </td>
                </tr>
              </tbody>
            </v-table>
          </div>
        </ObjectElement>
      </template>
    </ListElement>
  <!-- </v-card> -->
   </div>
</template>
