<template>
    <ContentRow>
        <ContentCell>
            <UiIcon v-if="event.type === EventType.UPLOAD">upload</UiIcon>
            <UiIcon v-if="event.type === EventType.DELETE">delete</UiIcon>
        </ContentCell>
        <ContentCell> {{ event.resource.groupId }}</ContentCell>
        <ContentCell>{{ event.resource.artifactId }}</ContentCell>
        <ContentCell>{{ event.resource.version }} <div class="release" v-if="!event.resource.isSnapshot">Release</div><div class="snapshot" v-if="event.resource.isSnapshot">Snapshot</div></ContentCell>
        <ContentCell>
            <p>{{ event.user.displayName }}</p>
        </ContentCell>
        <ContentCell>{{ Age.calc(event.timestamp) }}</ContentCell>
    </ContentRow>
</template>

<script setup lang="ts">
import ContentRow from "~/components/ui/table/ContentRow.vue";
import ContentCell from "~/components/ui/table/ContentCell.vue";
import {Event, EventType} from "~/components/events/Event";
import {Age} from "~/utils/Age";
import DisplayNameComponent from "~/components/auth/DisplayNameComponent.vue";
import {useUserStore} from "~/components/users/UserStore";

defineProps<{
    event: Event
}>()
</script>

<style scoped>
.release, .snapshot {
    font-size: 0.9rem;
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 2rem;
}
.release {
    background-color: var(--primary-color);
}
.snapshot {
    background-color: #656565;
}
</style>