<template>
	<div>
		<!-- NOTE No need for translating this! -->

		<div class="completion-box shade-0--bg">
			<div class="completion-box__title">
				Congratulations!
			</div>
			<div class="completion-box__body">
				You've successfully created your account.<br>
				<template v-if="$store.state.config.verification">
					Please check your inbox for a verification email.
				</template>
				<template v-else>
					Press the button below to get started.
				</template>
			</div>
			<spacer />
			<w-button
				bg-color="accent-1"
				color="white"
				class="completion-box__button"
				route="/"
			>
				Continue to homepage
			</w-button>
		</div>
	</div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
	layout: 'landing',
});
</script>

<style lang="scss">
.completion-box {
	@include glow(rgba(185, 185, 185, 0.8));
	@include rounded('2xl');
	@include padding(8, x);
	@include padding(4, y);

	@include dark {
		@include glow(rgba(0, 0, 0, 0.6));
	}

	height: 14rem;
	text-align: center;
	flex-direction: column;
	display: flex;

	&__title {
		@include font-weight(bold);
		@include font-size('2xl');
		@include padding(4, t);
		@include padding(2, b);
	}

	&__body {
		@include font-size('base');
	}

	&__button {
		@include margin(2, b);
	}
}
</style>