<template>
  <div class="resource">
    <p class="grid-element" @click="() => showViewPopup = true">{{ secret.metadata.name }}</p>
    <p class="grid-element">{{ secret.metadata.namespace }}</p>
    <p class="grid-element">{{ calcAge(secret.metadata.creationTimestamp) }}</p>
    <p class="grid-element">{{ secret.type }}</p>
    <p class="grid-element"><span v-if="secret.data">{{ Object.keys(secret.data).length }}</span><span v-else>-</span></p>
    <div class="grid-element action-buttons">
        <ActionButton>edit</ActionButton>
        <ActionButton>delete</ActionButton>
    </div>
    <SecretViewPopup :secret="secret" v-if="showViewPopup" @close="() => showViewPopup = false"></SecretViewPopup>
  </div>
</template>

<script setup lang="ts">
import { calcAge } from '~/classes/Pod';
import type { Secret } from '~/classes/Secret';
import SecretViewPopup from "~/components/secrets/view/SecretViewPopup.vue";

defineProps<{
    secret: Secret
}>();

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

<style scoped>

</style>