<template>
    <div>
        <p class="grid-element pointer" v-if="pod.metadata" @click="usePopup().open(PodViewPopup, props.pod)">{{ 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>
        <p class="grid-element">{{ pod.status.containerStatuses.map(s => s.restartCount).reduce((total, value) => total = total + value) }}</p>
        <div class="grid-element">
            <PhaseComponent v-if="pod.status" :phase="pod.status.phase"></PhaseComponent>
        </div>
        <div class="grid-element action-buttons">
            <ActionButton @click="usePopup().open(PodLogPopup, props.pod)">text_snippet</ActionButton>
            <ActionButton @click="usePopup().open(PodDeletePopup, props.pod)">delete</ActionButton>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Pod } from '~/classes/Pod';
import { calcAge } from '~/classes/Pod';
import PodDeletePopup from './view/PodDeletePopup.vue';
import PodLogPopup from "~/components/pod/view/PodLogPopup.vue";
import PodViewPopup from "~/components/pod/view/PodViewPopup.vue";
import {usePopup} from "~/components/popup/Popup";

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