<template>
    <div class="resource-container ingress-container">
        <div class="header">
            <p>Name</p>
            <p>Namespace</p>
        </div>
        <IngressComponent :ingress="ingress" v-for="ingress, index in ingresses" class="resource" :class="{ even: index % 2 }"></IngressComponent>
    </div>
</template>

<script setup lang="ts">
import type { Ingress } from '~/classes/Ingress';
import IngressComponent from '~/components/IngressComponent.vue';
import { getIngresses } from '~/requests/ingresses';

const ingresses: Ref<Ingress[] | undefined> = ref(undefined);

const namespace = computed(useNamespaceStore().getCurrentNamespace);

onMounted(() => {
    watch(namespace, (newNamespace) => {
        getIngresses(newNamespace?.metadata?.name, (_ingresses: Ingress[]) => {
            ingresses.value = _ingresses;
        });
    }, { immediate: true })
})
</script>

<style scoped>
.ingress-container {
    grid-template-columns: 1fr 1fr;
}
</style>