<template>
  <div class="grid grid-cols-2 gap-4">

    <div>
      <AisCard header="Click header to expand/collapse"
               footer="Test Footer"
               :collapsible="true"
      >Click on the header to expand/collapse the body and footer.</AisCard>
    </div>

    <div>
      <AisCard footer="Test Footer"
               :collapsible="true"
               :default-open="false"
               @click="handleClick"
      >
        <template #header="{ open }">
          <div class="flex justify-between items-center">
            Click header to expand/collapse
            <AisIcon :icon="open ? 'caret-up' : 'caret-down'"/>
          </div>
        </template>

        Click on the header to expand/collapse the body and footer.
      </AisCard>
    </div>


  </div>
</template>

<script setup>
  import AisCard from "@/components/card/AisCard.vue";
  import AisIcon from "@/components/icon/AisIcon.vue";

  const handleClick = (e) => { console.log(`header.click: open=[${e}]`) }
</script>
