<template>
	<div class="page">
		<div v-if="is404">
			<h1>404 Not Found</h1>

			<p v-if="abortReason">{{ abortReason }}</p>
			<p v-else>This page could not be found.</p>
		</div>

		<div v-else>
			<h1>500 Internal Error</h1>
			<p>Something went wrong.</p>
		</div>
	</div>
</template>

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

defineProps({
	is404: {
		type: Boolean,
		default: false,
	},
});

const pageContext = inject('pageContext');
const { abortReason } = pageContext;
</script>

<style scoped>
.page {
	display: flex;
	justify-content: center;
	flex-grow: 1;
}
</style>