<template>
  <PopupTemplate size="SMALL" heading="Delete Pod" @close="emits('close')">
    <div class="content-l">
        <div class="content-m">
            <div class="tile-m">
                <h3>Namespace</h3>
                <p>{{ pod.metadata.namespace }}</p>
            </div>
            <div class="tile-m">
                <h3>Name</h3>
                <p>{{ pod.metadata.name }}</p>
            </div>
        </div>
        <div class="center">
            <UiButton :loading="loading" class="width-6rem hollow">Cancel</UiButton>
            <UiButton :loading="loading" class="width-6rem" icon="delete" reverse :onclick="() => del()">Delete</UiButton>
        </div>
    </div>
  </PopupTemplate>
</template>

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

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

const loading = ref(false);
function del()
{
    const metadata: Metadata = props.pod.metadata; 
    loading.value = true;
    deletePod(metadata.namespace, metadata.name, () => {
        emits('close');
    });
}

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

<style scoped>

</style>
