<template>
  <PopupTemplate size="SMALL" heading="Delete Pod">
    <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" @click="usePopup().close()">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';
import { usePopup } from "~/components/popup/Popup";

const pod = usePopup().data() as Pod;

const loading = ref(false);
function del()
{
    loading.value = true;
    const metadata: Metadata = pod.metadata;
    deletePod(metadata.namespace, metadata.name, () => {
        usePopup().close();
    });
}
</script>

<style scoped>

</style>
