<template>
  <div class="th-page not-found-view">
    <section class="th-section not-found-panel">
      <i
        class="pi pi-compass"
        aria-hidden="true"
      />
      <h1>{{ t('notFound.title') }}</h1>
      <p>{{ t('notFound.message') }}</p>
      <RouterLink
        class="primary-link"
        :to="homePath"
      >
        {{ t('notFound.backHome') }}
      </RouterLink>
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { RouterLink } from 'vue-router'
import { useI18n } from 'vue-i18n'

import { useAuthStore } from '@/stores/authStore'
import { resolveAuthenticatedEntryPath } from '@/utils/authNavigation'

const { t } = useI18n()
const authStore = useAuthStore()
const homePath = computed(() => resolveAuthenticatedEntryPath(authStore.firstMenuPath))
</script>

<style scoped>
.not-found-view {
  max-width: 760px;
}

.not-found-panel {
  min-height: 360px;
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 56px 24px;
  text-align: center;
}

.not-found-panel i {
  color: var(--th-color-blue-600);
  font-size: 34px;
}

.not-found-panel h1,
.not-found-panel p {
  margin: 0;
}

.not-found-panel h1 {
  color: var(--th-color-slate-900);
  font-size: 24px;
}

.not-found-panel p {
  color: var(--th-color-slate-500);
  font-size: 14px;
}

.primary-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--th-radius-sm);
  background: var(--th-color-blue-600);
  color: var(--th-color-white);
  font-size: 13px;
  font-weight: 800;
  padding: 8px 14px;
  text-decoration: none;
}
</style>
