<template>
    <div @click="() => podViewPopup.open()">
        <p class="grid-element" v-if="pod.metadata">{{ pod.metadata.name }}</p>
        <p class="grid-element" v-if="pod.metadata">{{ pod.metadata.namespace }}</p>
        <p class="grid-element" v-if="pod.metadata">{{ calcAge(pod.metadata.creationTimestamp) }}</p>
        <p class="grid-element" v-if="pod.spec">{{ pod.spec.nodeName }}</p>
        <div class="grid-element">
            <PhaseComponent v-if="pod.status" :phase="pod.status.phase"></PhaseComponent>
        </div>
        <div class="grid-element action-buttons">
            <ActionButton @click="() => logPopup.open()">text_snippet</ActionButton>
            <ActionButton>open_in_full</ActionButton>
            <ActionButton @click="() => deletePod(pod.metadata?.uid, () => {})" v-if="hasAnyRole(getUser(), ['admin', 'maintainer'])">delete</ActionButton>
        </div>
        <LogPopup :pod="pod" ref="logPopup"></LogPopup>
        <PodViewPopup :pod="pod" ref="podViewPopup"></PodViewPopup>
    </div>
</template>

<script setup lang="ts">
import type { Pod } from '~/classes/Pod';
import { calcAge } from '~/classes/Pod';
import { hasAnyRole } from '~/classes/User';
import { deletePod } from '~/requests/pod';

defineProps<{
    pod: Pod
}>();

const logPopup = ref();

const podViewPopup = ref();
</script>