<template>
    <div>
        <p class="grid-element pointer" v-if="pod.metadata" @click="() => showViewPopup = true">{{ pod.metadata.name }}</p>
        <p class="grid-element" v-if="pod.metadata">{{ pod.metadata.namespace }}</p>
        <p class="grid-element no-wrap" v-if="pod.metadata">{{ calcAge(pod.metadata.creationTimestamp) }}</p>
        <p class="grid-element" v-if="pod.spec">{{ pod.spec.nodeName }}</p>
        <p class="grid-element">{{ pod.spec.containers.length }}</p>
        <div class="grid-element">
            <PhaseComponent v-if="pod.status" :phase="pod.status.phase"></PhaseComponent>
        </div>
        <div class="grid-element action-buttons">
            <ActionButton @click="showLogPopup = true">text_snippet</ActionButton>
            <ActionButton>open_in_full</ActionButton>
            <ActionButton @click="showDeletePopup = true" v-if="hasAnyRole(getUser(), ['admin', 'maintainer'])">delete</ActionButton>
        </div>
        <PodDeletePopup v-if="showDeletePopup" :pod="pod" @close="showDeletePopup = false"></PodDeletePopup>
        <LogPopup v-if="showLogPopup" :pod="pod" @close="showLogPopup = false"></LogPopup>
        <PodViewPopup v-if="showViewPopup" :pod="pod" @close="showViewPopup = false"></PodViewPopup>
    </div>
</template>

<script setup lang="ts">
import type { Pod } from '~/classes/Pod';
import { calcAge } from '~/classes/Pod';
import { hasAnyRole } from '~/classes/User';
import PodDeletePopup from './view/PodDeletePopup.vue';

const props = defineProps<{
    pod: Pod
}>();

const showDeletePopup = ref(false);
const showLogPopup = ref(false);
const showViewPopup = ref(false);
</script>