<template>
    <PopupTemplate ref="base" @close="emits('close')" :heading="StringUtils.format('%s/%s', ingress.metadata.namespace, ingress.metadata.name)">
        <div class="col-2">
            <div class="content-l">
                <h2>General</h2>
                <div class="content-m">
                    <h3>Ingress Class Name</h3>
                    <p class="tile-m">{{ ingress.spec.ingressClassName }}</p>
                </div>
                <h2>TLS</h2>
                <div class="content-m" v-for="tls in ingress.spec.tls">
                    <h3>Host(s): {{ tls.hosts.join(", ") }}</h3>
                    <p class="tile-m">Secret Name: {{ tls.secretName }}</p>
                </div>
            </div>
            <div class="content-l">
                <h2>Routes</h2>
                <div class="content-m" v-for="rule in ingress.spec.rules">
                    <h3>Host: {{ rule.host }}</h3>
                        <div class="tile-m" v-for="path in rule.http.paths">
                        <p>[{{ path.pathType }}] {{ path.path }}</p>
                    </div>
                </div>
            </div>
        </div>
    </PopupTemplate>
</template>

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

const base = ref();

defineProps<{
    ingress: Ingress
}>();

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

function open()
{
    base.value.open();
}

defineExpose({
    open
});
</script>