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

import { format } from 'date-fns';

defineProps({
	user: {
		type: Object,
		default: () => mockUser,
	},
	address: {
		type: String,
		default: 'http://localhost:5100',
	},
	ip: {
		type: String,
		default: '127.0.0.1',
	},
	country: {
		type: String,
		default: 'Unknown',
	},
	timestamp: {
		type: Date,
		default: () => new Date(),
	},
});
</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>Your traxxx password has been changed</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>

				<Heading
					as="h3"
					style="margin-top: 30px;"
				>Your traxxx password was changed.</Heading>

				<Text>Device used to change your password:</Text>

				<table
					align="center"
					width="100%"
					border="0"
					cellpadding="0"
					cellspacing="0"
					role="presentation"
					style="font-size: 14px;"
				>
					<tbody>
						<tr>
							<td style="padding: 4px 8px 4px 0;">IP:</td>
							<td style="padding: 4px 0;">{{ ip }}</td>
						</tr>
						<tr>
							<td style="padding: 4px 8px 4px 0;">Country:</td>
							<td style="padding: 4px 0;">{{ country }}</td>
						</tr>
						<tr>
							<td style="padding: 4px 8px 4px 0;">Timestamp:</td>
							<td style="padding: 4px 0;">{{ format(timestamp, 'yyyy-MM-dd hh:mm:ss') }}</td>
						</tr>
					</tbody>
				</table>

				<Text style="font-size: 16px; margin: 20px 0;">If this change was made by you, you can ignore this e-mail. If this was not you, please <a
					href="mailto:account@traxxx.me"
					style="color: #f65596; text-decoration: none;"
				>contact us</a> immediately.</Text>
			</Container>
		</Body>
	</Html>
</template>
