<template>
	<div class="sticky top-0 z-10 shrink-0">
		<Header>
			<Breadcrumbs :items="[{ label: '首页', route: { name: 'Home' } }]" />
			<Dropdown
				:options="[
					{ label: '站点', route: { name: 'New Site' } },
					{ label: '发布组', route: { name: 'New Release Group' } }
				]"
			>
				<Button
					variant="solid"
					label="新建"
					:disabled="!$team.pg?.payment_mode"
				>
					<template #suffix>
						<i-lucide-chevron-down class="h-4 w-4 text-gray-300" />
					</template>
				</Button>
			</Dropdown>
		</Header>
	</div>
	<div class="p-5" v-if="$team?.pg">
		<Onboarding v-if="!$team.pg?.onboarding.complete" />
		<HomeSummary v-else />
	</div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
import Header from '../components/Header.vue';
import HomeSummary from '../components/HomeSummary.vue';

export default {
	name: 'Home',
	components: {
		Header,
		HomeSummary,
		Onboarding: defineAsyncComponent(() =>
			import('../components/Onboarding.vue')
		)
	}
};
</script>