<template>
  <div class="d-flex align-items-center flex-column justify-content-center vh-75 text-center">
    <b-img :src="notFoundEmoji" center class="p-md-4 vh-25 mb-3 mb-md-0" />
    <div class="px-3">
      <h4>{{ $t('App.PageNotFound.Title') }}</h4>
      <p class="text-black-50">{{ $t('App.PageNotFound.HelpText') }}</p>
    </div>
  </div>
</template>

<script>
import NotFoundEmoji from '@/assets/img/404-emoji.svg'
export default {
  name: 'TheNotFoundPage',
  metaInfo: {
    title: 'Page not found',
    meta: [
      {
        name: 'description',
        content: 'Page not found',
      },
    ],
  },
  data() {
    return {
      notFoundEmoji: NotFoundEmoji,
    }
  },
}
</script>
