<template>
  <apbd-accrodion>
    <template #items="{parent_id}">
      <apbd-accrodion-item :parent-id="parent_id" v-for="(data,index) in sampleData" :is-show="false" :key="index">
        <template v-slot:header-full>
          <div class="w-100">
            <div class="p-1  d-flex justify-content-between">
              {{ data.title ? data.title : this.$translateGettext('New Field') }}
            </div>
          </div>
        </template>
        <template v-slot:body>
          <p class="m-0">{{ data.des }}</p>
        </template>
      </apbd-accrodion-item>
    </template>
  </apbd-accrodion>
</template>

<script>
import ApbdAccrodion from "@/components/ApbdAccrodion.vue";
import ApbdAccrodionItem from "@/components/ApbdAccrodionItem.vue";

export default {
  name: "TestAccrodion",
  components: {ApbdAccrodionItem, ApbdAccrodion},
  data() {
    return {
      sampleData: [{title: 'Title 1', des: 'Description 1'}, {
        title: 'Title 2',
        des: 'Description 2'
      }, {title: 'Title 3', des: 'Description 3'}]
    }
  }
}
</script>

<style scoped lang="scss">

</style>