<script>
	import { page } from "$app/stores";
</script>

<div class="mx-auto rounded-lg shadow border border-gray-300 max-w-2xl text-center divide-y">
	<div class="p-2">
		<img class="mx-auto mb-2" src="/img/error.png" alt="" />
		<h1 class="mb-1 text-xl font-bold">{$page.status == 404 ? "Page Not Found" : "Unexpected Error"}</h1>
		<p>The server ran into an error while processing your request.</p>
		<p>Please try again later, or report this incident to a Rowblox developer if it persists.</p>
	</div>
	<div class="py-4 px-2 text-lg text-black">
		<span class="mr-2 px-3 py-1 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200" onclick="javascript:history.back()"> Go Back </span>
		<a class="mr-2 px-3 py-1 rounded border-2 border-gray-500 shadow-lg hover:bg-gray-200" href="/"> Go Home </a>
	</div>
</div>
