<script setup>
import pages401 from "@images/pages/401.png";
import miscMaskDark from "@images/pages/misc-mask-dark.png";
import miscMaskLight from "@images/pages/misc-mask-light.png";
import { useGenerateImageVariant } from "@core/composable/useGenerateImageVariant";
const homeUrl = import.meta.env.VITE_KM_HOME_URL;

definePage({
  alias: "/pages/misc/not-authorized",
  meta: {
    layout: "blank",
    public: true,
  },
});

const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark);
</script>

<template>
  <div class="misc-wrapper">
    <ErrorHeader
      status-code="401"
      title="您無權限! 🔐"
      description="您使用的登入憑證無法查看此頁面。請聯繫您的網站管理員。"
    />

    <VBtn class="mt-2 mb-10" :href="homeUrl"> Back Home </VBtn>

    <!-- 👉 Image -->
    <div class="misc-avatar w-100 text-center">
      <VImg
        :src="pages401"
        alt="Coming Soon"
        :max-width="170"
        class="mx-auto"
      />
    </div>

    <VImg :src="authThemeMask" class="misc-footer-img d-none d-md-block" />
  </div>
</template>

<style lang="scss">
@use "@core-scss/template/pages/misc.scss";
</style>
