<script setup>
import { inject } from 'vue';

import Admin from '#/components/admin/admin.vue';

const { pageProps } = inject('pageContext');

const {
	template,
	html,
	text,
	error,
} = pageProps;
</script>

<template>
	<Admin class="page">
		<div class="header">
			<h2 class="heading">{{ template }}</h2>
		</div>

		<p v-if="error" class="error">Failed to render template: {{ error }}</p>

		<template v-else>
			<iframe
				:srcdoc="html"
				class="frame"
				title="E-mail preview"
			/>

			<details v-if="text" class="text">
				<summary>Plain-text version</summary>
				<pre>{{ text }}</pre>
			</details>
		</template>
	</Admin>
</template>

<style scoped>
.header {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1rem;
}

.error {
	color: var(--warn);
	font-weight: bold;
}

.frame {
	width: 100%;
	min-height: 60rem;
	border: solid 1px var(--shadow-weak-30);
	border-radius: .5rem;
	background: #fff;
}

.text {
	margin-top: 1rem;

	pre {
		white-space: pre-wrap;
		padding: 1rem;
		background: var(--background-dark-20);
		border-radius: .5rem;
	}
}
</style>
