<template>
	<div>
		<div
			class="mx-auto max-w-2xl rounded-lg border-0 px-2 py-8 sm:border sm:p-8 space-y-8 mt-10"
		>
			<div class="prose prose-sm max-w-none">
				<h1 class="text-2xl font-semibold">Bench Groups</h1>
				<p class="text-p-base">
					With Bench groups, you get more control. You can choose which apps to
					add, which apps to update, which region to deploy to and more.
				</p>
			</div>
			<div class="space-y-3">
				<h2 class="text-sm font-semibold tracking-wide text-gray-700">
					Features
				</h2>
				<ul class="space-y-2">
					<li v-for="f in features" :key="f" class="flex items-center gap-2">
						<GreenCheckIcon class="h-4 w-4 shrink-0" />
						<span class="text-sm text-gray-700">{{ f }}</span>
					</li>
				</ul>
				<div>
					<Link
						href="https://docs.framework.jingrow.com/cloud/what-are-benches-and-bench-groups"
						target="_blank"
						class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-700"
						>Read more →</Link
					>
				</div>
				<div v-if="!onboardingComplete" class="pt-2">
					<p class="text-sm text-gray-700">
						Finish onboarding to start using Bench Groups.
					</p>
					<Button
						:route="{ name: 'Welcome' }"
						label="Continue Onboarding"
						class="mt-3"
					/>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Link from '@/components/Link.vue';

export default {
	name: 'EnableBenchGroups',
	components: { Link },
	data() {
		return {
			features: [
				'Containerised deployments',
				'Custom app deployment',
				'Access to 150+ marketplace apps',
				'Multi-environment (e.g. Staging, Production)',
				'Server scripts',
				'SSH access',
				'Dedicated workers',
			],
		};
	},
	computed: {
		benchesEnabled() {
			return Boolean(this.$team.pg.benches_enabled);
		},
		onboardingComplete() {
			return Boolean(this.$team.pg.onboarding?.complete);
		},
	},
	mounted() {
		if (this.onboardingComplete && this.$team.pg.benches_enabled) {
			this.$router.push({ name: 'Release Group List' });
		}
	},
};
</script>
