<template>
    <div class="content-l" v-if="group">
        <h1>Group: {{group.groupId}}</h1>
        <ArtifactList :artifacts="group.artifacts"></ArtifactList>
        <div class="content-m">
            <h2>Danger Zone</h2>
            <div>
                <UiButton class="delete-button" @click="del(group)">Delete</UiButton>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {Group} from "~/components/group/Group";
import {useDelete} from "~/utils/HttpUtils";

const group: Ref<Group | undefined> = ref();

onMounted(() => {
    const id = useRoute().params.group_id as string;
    Group.getById(id, (_group: Group) => {
        group.value = _group;
    })
})

function del(group: Group)
{
    useDelete("/api/groups/" + group.id, () => {
        useRouter().push("/groups");
    })
}
</script>

<style scoped>
.delete-button {
    background-color: var(--danger-color);
}
</style>