<template>
  <SidebarTemplate>
    <div class="content-m">
        <NuxtLink class="namespace" to="/account/monitorings/nodes">Nodes</NuxtLink>
        <NuxtLink class="namespace" :to="'/account/monitorings/collections/' + collection.id" v-for="collection in collections">{{ collection.name }}</NuxtLink>
    </div>
    <UiButton icon="add" reverse>Add</UiButton>
  </SidebarTemplate>
</template>

<script setup lang="ts">
import { MonitoringCollection } from '~/classes/monitoring/MonitoringCollection';
import SidebarTemplate from './SidebarTemplate.vue';

const collections: Ref<MonitoringCollection[] | undefined> = ref(undefined);

onMounted(() => {
    MonitoringCollection.get((_collections: MonitoringCollection[]) => {
        collections.value = _collections;
    });
});
</script>

<style scoped>

</style>