<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import { ref, onMounted } from 'vue';
import { TableView } from '@cloudron/pankow';
import { prettyDate, prettyLongDate } from '@cloudron/pankow/utils';
import { eventlogSource, eventlogDetails } from '../../utils.js';
import AppsModel from '../../models/AppsModel.js';

const appsModel = AppsModel.create();

const props = defineProps([ 'app' ]);
const busy = ref(true);
const columns = ref({
  time: {
    label: t('eventlog.time'),
    width: '120px',
    sort: false,
  },
  source: {
    label: t('eventlog.source'),
    sort: false,
  },
  details: {
    label: t('eventlog.details'),
    sort: false,
  }
});

const events = ref([]);

onMounted(async () => {
  const [error, result] = await appsModel.getEvents(props.app.id);
  if (error) return console.error(error);

  events.value = result;
  busy.value = false;
});

</script>

<template>
  <div>
    <TableView :columns="columns" :model="events" :busy="busy">
      <template #time="event"><span v-tooltip="prettyLongDate(event.creationTime)">{{ prettyDate(event.creationTime) }}</span></template>
      <template #source="event">{{ eventlogSource(event, app) }}</template>
      <template #details="event"><div v-html="eventlogDetails(event)"></div></template>
    </TableView>
  </div>
</template>
