<script setup>
import {
	Body,
	Button,
	Container,
	Heading,
	Html,
	Img,
	Preview,
	Text,
} from '@vue-email/components';

import config from 'config';

defineProps({
	user: {
		type: Object,
		default: () => mockUser,
	},
	verifyUrl: {
		type: String,
		default: 'http://localhost:5100/verify?userId=0&token=00000000000000000000000000000000',
	},
	trigger: {
		type: String,
		default: 'change',
	},
	address: {
		type: String,
		default: 'http://localhost:5100',
	},
});
</script>

<script>
// defineProps' default factory (above, in <script setup>) references this. It must live in a plain
// <script> block: Vue's compiler forbids defineProps from referencing variables declared inside
// <script setup> itself, since that block gets hoisted out of the setup() function.
const mockUser = {
	id: 1,
	username: 'DebuggingLibrarian',
	email: 'debug@alerts.traxxx.me',
};
</script>

<template>
	<Html>
		<Body style="font-family: sans-serif;">
			<Preview>Please verify your traxxx e-mail address</Preview>

			<Container>
				<Img
					:src="`${address}/img/logo.png`"
					width="150"
					alt="traxxx"
					style="margin: 15px auto 25px auto;"
				/>

				<Heading
					as="h3"
					style="color: #f65596; margin: 0 auto 0 auto;"
				>Hi, {{ user.username }}</Heading>

				<Text>
					<strong>You requested to {{ trigger === 'verify' ? 'verify' : 'change' }} the e-mail address for your traxxx account.</strong>
					<br>
					Please confirm your e-mail address by clicking the button below:
				</Text>

				<Button
					:href="verifyUrl"
					target="_blank"
					style="background: #f65596; color: #fff; font-size: 16px; padding: 1rem 1.5rem; border-radius: .5rem; margin: 1rem 0;"
				><strong>Verify e-mail address</strong></Button>

				<Text style="font-size: 16px; margin: 20px 0;">
					The link will expire in {{ config.auth.emailTokenExpiry }} minutes, or when you request an(other) e-mail change or verification. If you did not request this {{ trigger === 'verify' ? 'verification' : 'change' }}, you can safely ignore this e-mail.</Text>
			</Container>
		</Body>
	</Html>
</template>
