<script setup>
import Navbar from "@/components/common/Navbar.vue";
import NavTab from "@/components/common/NavTab.vue";

const props = defineProps(["ctx", "activeTab"])
</script>

<template>
	<Navbar :active-tab="activeTab">
		<template #tabs>
			<NavTab href=".?type=available" :active="ctx.type == 'available'">
				<template #name>
					有效套餐({{ ctx.countAvailable }})
				</template>
			</NavTab>
			<NavTab href=".?type=expiring7" :active="ctx.type == 'expiring7'">
				<template #name>
					7天内过期(<span v-if="ctx.countExpiring7 > 0" class="red">{{ ctx.countExpiring7 }}</span><span v-else>0</span>)
				</template>
			</NavTab>
			<NavTab href=".?type=expiring30" :active="ctx.type == 'expiring30'">
				<template #name>
					30天内过期(<span v-if="ctx.countExpiring30 > 0" class="red">{{ ctx.countExpiring30 }}</span><span v-else>0</span>)
				</template>
			</NavTab>
			<NavTab href=".?type=expired" :active="ctx.type == 'expired'">
				<template #name>
					过期套餐<span class="red">({{ ctx.countExpired }})</span>
				</template>
			</NavTab>
			<NavTab separator></NavTab>
			<NavTab href=".buy" value="buy" name="新购套餐" action-cart></NavTab>
		</template>
	</Navbar>
</template>

<style scoped>

</style>