<template>
  <div>
    <div class="mb-5 grid grid-cols-2 gap-4">
      <div>
        <AisCard>
          <template #header>
            <AisIcon icon="users" />&nbsp;
            <b>Contact List</b>
          </template>

<!--          <template #body>-->
            This is the body of the card.
<!--          </template>-->

          <template #footer>
            <div class="text-blue-600">
              <AisIcon icon="info" />&nbsp;
              Footer slot content
            </div>
          </template>
        </AisCard>
      </div>
      <div>
        <AisCard footer-class="text-cyan-600">
          <template #header>
            <AisIcon :icon="faFile" />&nbsp;
            <b>Attachments</b>
          </template>

<!--          <template #body>-->
            This is the body of the card.
<!--          </template>-->

          <template #footer>
            <AisIcon icon="info" />&nbsp;
            Footer slot content
          </template>
        </AisCard>
      </div>
    </div>
  </div>
</template>

<script setup>
  import AisCard from "@/components/card/AisCard.vue";
  import AisIcon from "@/components/icon/AisIcon.vue";
  import { faFile } from '@fortawesome/free-regular-svg-icons'
  import { library } from '@fortawesome/fontawesome-svg-core'
  library.add( faFile )
</script>
