<template>
  <div v-if="row.create_date" class="timestamps">
    <div v-popover:left="getTimestampDetails(row)">
      {{t('ui.created')}} {{moment(row.create_date).fromNow()}}
    </div>
  </div>
</template>

<script>
import { useI18n } from 'vue-i18n'
import moment from 'moment'

export default {
  setup: () => {
    const {t} = useI18n()
    return {t, moment}
  },
  props: {
    row: {
      type: Object,
      required: true
    },
  },
  methods: {
    getTimestampDetails: function (row) {
      return `<div class="text-nowrap">
                <div class="row">
                  <div class="col-sm-4"><b>${this.t('ui.created_on')}:</b></div>
                  <div class="col-sm-8">${this.moment(row.create_date).format('YYYY-MM-DD HH:mm:ss')}</div>
                </div>
                <div class="row">
                  <div class="col-sm-4"><b>${this.t('ui.created_by')}:</b></div>
                  <div class="col-sm-8">${row.create_username}</div>
                </div>
                <div class="row">
                  <div class="col-sm-4"><b>${this.t('ui.modified_on')}:</b></div>
                  <div class="col-sm-8">${this.moment(row.mod_date).format('YYYY-MM-DD HH:mm:ss')}</div>
                </div>
                <div class="row">
                  <div class="col-sm-4"><b>${this.t('ui.modified_by')}:</b></div>
                  <div class="col-sm-8">${row.mod_username}</div>
                </div>
              </div>`
    },
  }
}
</script>
