<template>
    <div class="resource-container secret-container">
        <div class="header">
            <div class="left-center">
                <p>Name</p>
                <UiButton icon="add" class="extra-small" reverse @click="() => secretAddComponent.open()">Add</UiButton>
            </div>
            <p>Namespace</p>
            <p>Alter</p>
            <p>Aktionen</p>
        </div>
        <SecretComponent v-for="secret, index in secrets" :secret="secret" class="resource" :class="{ even: index % 2 }"></SecretComponent>
        <SecretAddComponent ref="secretAddComponent"></SecretAddComponent>
    </div>
</template>

<script setup lang="ts">
import { ResourceRepo } from '~/classes/ResourceRepo';
import type { Secret } from '~/classes/Secret';
import SecretComponent from '~/components/secrets/SecretComponent.vue';
import SecretAddComponent from '~/components/secrets/SecretAddComponent.vue';

const secrets = ResourceRepo.init<Secret>().load("secrets").get();

const secretAddComponent = ref();
</script>

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