<template>
    <TableComponent :loading="ingresses == null" v-for="ingresses in [repo.get().value]">
        <div class="resource-container ingress-container">
        <div class="header">
            <p>Name</p>
            <p>Namespace</p>
            <p>Ingress Class Name</p>
            <p>Rules</p>
            <p>Actions</p>
        </div>
        <IngressComponent :ingress="ingress" v-for="ingress, index in ingresses" class="resource" :class="{ even: index % 2 }"></IngressComponent>
    </div>
    </TableComponent>
</template>

<script setup lang="ts">
import type { Ingress } from '~/classes/Ingress';
import { ResourceRepo } from '~/classes/repo/ResourceRepo';

const repo = ResourceRepo.init<Ingress>();
onMounted(() => {
    repo.listen("ingresses");    
});
onUnmounted(() => {
    repo.clear();
});
</script>

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