<template>
    <Table columns="1fr">
        <HeaderRow>
            <HeaderCell>Group ID</HeaderCell>
        </HeaderRow>
        <ContentRow v-for="group in groups">
            <ContentCell>{{group.groupId}}</ContentCell>
        </ContentRow>
    </Table>
</template>

<script setup lang="ts">
import Table from "~/components/ui/table/Table.vue";
import HeaderCell from "~/components/ui/table/HeaderCell.vue";
import HeaderRow from "~/components/ui/table/HeaderRow.vue";
import ContentRow from "~/components/ui/table/ContentRow.vue";
import ContentCell from "~/components/ui/table/ContentCell.vue";
import {Group} from "~/components/group/Group";

const groups: Ref<Group[] | undefined> = ref(undefined);

onMounted(() => {
    Group.get((_groups) => {
        groups.value = _groups;
    })
})
</script>

<style scoped>

</style>