<script setup>
import { useRoute, navigateTo } from "#imports";
const route = useRoute();
const attemptedPath = route.query.path || route.fullPath;
const retry = async () => {
  await navigateTo(attemptedPath, { replace: true });
};
</script>

<template>
  <l-page class="q-pa-md">
    <q-banner class="bg-negative text-white">
      <template v-slot:avatar>
        <q-icon name="sym_o_error" />
      </template>
      <div class="text-h6">Page not found</div>
      <div v-if="attemptedPath && attemptedPath !== '/'">
        The requested page was not found or you do not have permission to access it:
        <code>{{ attemptedPath }}</code>
      </div>
      <div v-else>
        The requested page was not found or you do not have permission to access it.
      </div>
    </q-banner>
    <div class="q-mt-md q-gutter-sm">
      <q-btn color="primary" icon="sym_o_home" label="Home" to="/" />
      <q-btn v-if="attemptedPath && attemptedPath !== '/'" color="secondary" icon="sym_o_refresh" label="Retry" @click="retry" />
    </div>
  </l-page>
</template>
