<template>
  <ListElement name="communication">
    <template #default="{ index }">
      <ObjectElement :name="index">
        <GroupElement name="container2_2">
          <GroupElement name="column1" :columns="{
            container: 1,
          }">
            <ToggleElement name="preferred" :labels="{
              on: 'Aktif',
              off: 'Pasif',
            }" :default="true" size="lg" align="right" />
          </GroupElement>
          <GroupElement name="column2" :columns="{
            container: 11,
          }">
            <ListElement name="language" :controls="{
              add: false,
              remove: false,
            }">
              <template #default="{ index }">
                <ObjectElement :name="index">
                  <SelectElement name="text" :items="[
                    {
                      value: 'Indonesia',
                      label: 'Indonesia',
                    },
                    {
                      value: 'Inggris',
                      label: 'Inggris',
                    },
                    {
                      value: 'jawa',
                      label: 'Jawa',
                    },
                    {
                      value: 'Sunda',
                      label: 'Sunda',
                    },
                  ]" :search="true" :native="false" input-type="search" autocomplete="off" placeholder="Bahasa"
                    :create="true" :append-new-option="false" />
                </ObjectElement>
              </template>
            </ListElement>
          </GroupElement>
        </GroupElement>
      </ObjectElement>
    </template>
  </ListElement>
</template>

<script lang="ts" setup>

</script>

<style></style>
