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

		<div class="completion-box shade-0--bg">
			

			<div class="completion-box__body">
				<template v-if="!$store.state.config.verification || $store.state.profile.isVerified">
					<div v-if="$store.state.profile.isVerified" class="completion-box__title">
						Email Verified
					</div>

					<div v-else class="completion-box__title">
						Account Created
					</div>

					<VindiSpacer />

					<w-button
						bg-color="primary"
						color="white"
						class="completion-box__button"
						route="/"
					>
						Get Started
					</w-button>
				</template>

				<template v-else-if="$store.state.config.verification">
					<div class="completion-box__title">
						Verification Required!
					</div>

					Your account has not been verified yet!<br>
					Please check your email for a verification link<br><br>

					<w-button
						@click="resendCode"
					>
						Resend Code
					</w-button>
				</template>
			</div>			
		</div>
	</div>
</template>

<script lang="ts">
import Vue from "vue";
import verifyAccount from '~/assets/query/profile/verifyAccount.gql';

export default Vue.extend({
	layout: 'landing',
	middleware: 'authenticated',

	methods: {
		async resendCode() {
			await this.$api.query(verifyAccount, {
				code: null
			});

			this.$waveui.notify({
				message: 'New code sent! Please check your email.',
				success: true,
			});
		},
	}
});
</script>

<style lang="scss">
.completion-box {
	@include glow(rgba(185, 185, 185, 0.8));
	@include rounded('2xl');
	@include padding(8, x);
	@include padding(6, 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(5, t);
	}
}
</style>