<template>
  <PopupTemplate :heading="StringUtils.format('%s/%s', secret.metadata.namespace, secret.metadata.name)" @close="emits('close')">
      <div class="content-l">
          <h3>General</h3>
          <div class="content-m">
              <h3>Secret</h3>
              <p class="tile-m">{{ secret.metadata.namespace }}/{{ secret.metadata.name }}</p>
          </div>
          <h3>Data</h3>
          <div class="content-m">
              <UiMask class="tile-m" v-if="secret.data" v-for="[key, value] in Object.entries(secret.data)" :enabled="true" :prefix="key" :value="base64.decode(value)"></UiMask>
          </div>
      </div>
  </PopupTemplate>
</template>

<script setup lang="ts">
import type {Secret} from "~/classes/Secret";
import UiMask from "~/components/ui/UiMask.vue";
import base64 from 'base-64';

defineProps<{
    secret: Secret
}>();

const emits = defineEmits<{
    (e: 'close'): void
}>()

onMounted(() => {
    document.addEventListener('keydown', (event) => {
        if(event.key === 'Escape') 
        {
            emits('close');
        }
    });
})

defineExpose({ open });
</script>