<template>
    <Table v-if="groups != null" columns="1fr" :show-footer="groups.length === 0">
        <HeaderRow>
            <HeaderCell>Group ID</HeaderCell>
        </HeaderRow>
        <ContentRow style="cursor: pointer" v-for="group in groups" @click="useRouter().push('/groups/' + group.id)">
            <ContentCell>{{group.groupId}}</ContentCell>
        </ContentRow>
        <template #footer>
            <div class="center">
                <p>No Groups found.</p>
            </div>
        </template>
    </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>