<template>
    <PopupTemplate :heading="StringUtils.format('%s/%s', deployment.metadata.namespace, deployment.metadata.name)" @close="emits('close')">
        <div class="content-l">
            <h2>General</h2>
            <div class="content-m">
                <h3>Deployment</h3>
                <p class="tile-m">{{ deployment.metadata.namespace }}/{{ deployment.metadata.name }}</p>
            </div>
            <div class="col-4">
                <div class="content-m">
                    <h3>Desired Replicas</h3>
                    <p class="tile-m">{{ deployment.spec.replicas }}</p>
                </div>
                <div class="content-m">
                    <h3>Current Replicas</h3>
                    <p class="tile-m">{{ deployment.status.replicas }}</p>
                </div>
                <div class="content-m">
                    <h3>Available Replicas</h3>
                    <p class="tile-m">{{ deployment.status.availableReplicas }}</p>
                </div>
                <div class="content-m">
                    <h3>Ready Replicas</h3>
                    <p class="tile-m">{{ deployment.status.readyReplicas }}</p>
                </div>
            </div>
            <div class="content-m">
                <h3>Annotations (<span v-if="deployment.metadata.annotations">{{ Object.keys(deployment.metadata.annotations).length }}</span><span v-else>0</span>)</h3>
                <div class="left-center" v-if="deployment.metadata.annotations">
                    <div class="content-m">
                        <p class="tile-m" v-for="[key, value] in Object.entries(deployment.metadata.annotations)"><span>{{ key }}:</span>&nbsp;<span style="overflow-wrap:anywhere; white-space: normal; width: 100%;">{{ value }}</span></p>
                    </div>
                </div>
            </div>
            <div class="content-m">
                <h3>Labels (<span v-if="deployment.metadata.labels">{{ Object.keys(deployment.metadata.labels).length }}</span><span v-else>0</span>)</h3>
                <div class="content-m" v-if="deployment.metadata.labels">
                    <p class="tile-m" v-for="[key, value] in Object.entries(deployment.metadata.labels)"><span>{{ key }}:</span>&nbsp;<span>{{ value }}</span></p>
                </div>
            </div>
        </div>
    </PopupTemplate>
</template>

<script setup lang="ts">
import PopupTemplate from "~/components/popup/PopupTemplate.vue";
import type { Deployment } from "~/classes/Deployment";

defineProps<{
    deployment: Deployment
}>()

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

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

<style scoped>

</style>