<template>
  <div class="card email-grid-wrapper" @click="$emit('selectedId', data.sid)">
    <div class="card-body">
      <div class="email-grid d-flex align-items-end">
        <img class="email-grid-bg" :src="data.image" alt="" />

        <div class="px-4 py-3 email-grid-content">
          <ul class="list-inline mb-0">
            <li class="list-inline-item me-3">
              {{ data.title }}
            </li>
            <li class="list-inline-item me-3">
              <span
                class="badge"
                :class="{
                  'bg-success': data.isActive === true,
                  'bg-danger': data.isActive === false,
                }"
                >{{ data.isActive ? "Active" : "Pending" }}</span
              >
            </li>
            <li v-b-tooltip.hover.top class="list-inline-item me-3" title="Created Date">
              <i class="bx bx-calendar me-1"></i>
              {{ formattedDate }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import { BTooltip } from "bootstrap-vue-next";
export default {
  props: {
    data: {
      required: true,
      type: Object,
    },
  },
  computed: {
    formattedDate() {
      return moment(new Date(this.data.dateCreated)).format("L");
    },
  },
  directives: { "b-tooltip": BTooltip },
  components: {
    BTooltip,
  },
};
</script>