<template>
    <Header />
    <div class="error-page">
      <h1 v-if="error.statusCode === 404">Erreur 404</h1>
      <p v-if="error.statusCode === 404">La page {{ error.url }} n'existe pas</p>
      <NuxtImg 
            v-if="global.error_img"
            :src="img(global.error_img)" 
            :alt="global.error_img_title"
            format="webp"
            placeholder
            lazy
            sizes="sm:100vw" />
    </div>
</template>
  
<script>
  export default {
    setup() {
        const { getItems } = useDirectusItems();
        const { getThumbnail : img } = useDirectusFiles();

        const global = ref([]);
        onMounted(async () => {
            const items = await getItems({ collection: "global" });
            global.value = items;
        });

        provide('globalData', global);

        return {
            global,
            img
        }

    },
    props: {
      error: Object
    }
  }
</script>
  
<style scoped>
  .error-page {
    text-align: center;
    margin: 3rem auto;
  }

  h1 {
    margin-bottom: 1rem;
  }

  img {
      width: 60vw;
      margin: auto;
      margin-top: 5rem;
  }
</style>
  