<!-- https://github.com/inertiajs/inertia-laravel/issues/56 -->
<script setup>
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue';
import { computed } from 'vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import BaseButton from '@/Components/BaseButton.vue';
import { mdiChartTimelineVariant, mdiGithub } from '@mdi/js';

const props = defineProps({
	status: {
		type: Number,
		default: null,
	},
	message: {
		type: String,
		default: "",
	},
});

const title = computed(() => {
	return {
		503: '503: Service Unavailable',
		500: '500: Server Error',
		404: '404: Page Not Found',
		403: '404: Forbidden',
		401: '401: Unauthorized',
	}[props.status];
});

const description = computed(() => {
	return {
		503: 'Sorry, we are doing some maintenance. Please check back soon.',
		500: 'Whoops, something went wrong on our servers.',
		404: 'Sorry, the page you are looking for could not be found.',
		403: 'Sorry, you are forbidden from accessing this page.',
		401: 'Sorry, you are forbidden from accessing this page.',
	}[props.status];
});
// export default {
//     // layout: LayoutAuthenticated,
// 	props: {
// 		status: Number,
// 	},
// 	computed: {
// 		title() {
// 			return {
// 				503: '503: Service Unavailable',
// 				500: '500: Server Error',
// 				404: '404: Page Not Found',
// 				403: '404: Forbidden',
// 				401: '404: Forbidden',
// 			}[this.status];
// 		},
// 		description() {
// 			return {
// 				503: 'Sorry, we are doing some maintenance. Please check back soon.',
// 				500: 'Whoops, something went wrong on our servers.',
// 				404: 'Sorry, the page you are looking for could not be found.',
// 				403: 'Sorry, you are forbidden from accessing this page.',
// 				401: 'Sorry, you are forbidden from accessing this page.',
// 			}[this.status];
// 		},
// 	},
// };
</script>

<template>
	<LayoutAuthenticated>
		<SectionMain>
			<SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Error" main>
				<BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" :icon="mdiGithub"
					label="Star on Gitea" color="contrast" rounded-full small />
			</SectionTitleLineWithButton>
		<h1>{{ title }}</h1>
		<div>{{ props.message }}</div>
		</SectionMain>
	</LayoutAuthenticated>
</template>