<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import NotFoundBox from "@/components/common/NotFoundBox.vue";
import LabelOn from "@/components/common/LabelOn.vue";
import ListTable from "@/components/common/ListTable.vue";
import TColumn from "@/components/ui/TColumn.vue";
import Navbar from "@/components/common/Navbar.vue";
import NavTab from "@/components/common/NavTab.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<Navbar>
		<template #tabs>
			<NavTab href="/ns/domains/groups" :active="true" name="分组列表"></NavTab>
			<NavTab separator></NavTab>
			<NavTab static @click.prevent="ctx.createGroup" name="创建分组" action-create></NavTab>
		</template>
	</Navbar>

	<NotFoundBox v-if="ctx.groups.length == 0">暂时还没有分组。</NotFoundBox>

	<div v-if="ctx.groups.length > 0">
		<ListTable :items="ctx.groups">
			<TColumn header="分组名称" class="name-column">
				<template #body="{data: group}">
					<a href="" @click.prevent="ctx.updateGroup(group.id)">{{ group.name }}
						<i class="icon expand small"></i></a>
				</template>
			</TColumn>
			<TColumn header="状态" class="fixed-status-column">
				<template #body="{data: group}">
					<LabelOn :v-is-on="group.isOn"></LabelOn>
				</template>
			</TColumn>
			<TColumn header="操作" class="two op">
				<template #body="{data: group}">
					<a href="" @click.prevent="ctx.updateGroup(group.id)">修改</a> &nbsp;
					<a href="" @click.prevent="ctx.deleteGroup(group.id)">删除</a>
				</template>
			</TColumn>
		</ListTable>
	</div>
</template>

<style lang="postcss" scoped>
</style>