<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const message = computed(() => {
  const m = route.query.message;
  return typeof m === "string" && m.length ? m : "";
});
</script>

<template>
    <section class="animate-fadein animate-duration-300 animate-ease-in landing-container mx-auto min-h-[75vh] lg:min-h-screen flex flex-col items-center justify-center">
        <div
            class="w-[15rem] aspect-square max-w-full rounded-3xl border border-surface bg-surface-100 dark:bg-surface-800 flex items-center justify-center"
            aria-hidden="true"
        >
            <i class="pi pi-lock text-6xl text-surface-400" />
        </div>
        <h1 class="title-h5 lg:title-h1 mt-8">Access Denied</h1>
        <p v-if="message" class="body-small lg:body-large mt-2 lg:mt-4 text-center max-w-md">
          {{ message }}
        </p>
        <p v-else class="body-small lg:body-large mt-2 lg:mt-4">You don’t have the permissions to access this page</p>
        <router-link
            :to="{ name: 'dashboard' }"
            class="body-button bg-violet-600 w-fit mt-8 hover:bg-violet-500 px-4"
        >Go to Dashboard</router-link>
    </section>
</template>
