<script setup>
  const { path } = useRoute()

  // https://content.nuxtjs.org/guide/displaying/querying#with-useasyncdata
  const { data, error } = await useAsyncData(`content-${path}`, () => {
    return queryContent().where({ _path: path, public: true }).findOne()
  })

  // https://nuxt.com/docs/api/utils/create-error#createerror
  if (error.value) {
    showError(
      createError({
        statusCode: 404,
        statusMessage: 'Not Found',
      })
    )
  }
</script>

<template>
  <div class="project" :id="data.slug">
    <img class="hero" :src="'/img/project/' + data.slug + '/' + data.thumbnail" alt >
    <h1>{{ data.project }}</h1>
    <h2>{{ data.concept}}</h2>
    <hr />
    <label ><span className="icon-calendar"></span>Year of Completion</label>
    <p>{{ data.completed}}</p>
    <label ><span className="icon-layers"></span>Technology Stack</label>
    <p>{{ data.stack}}</p>
    <div v-if="data.live">
      <label ><span className="icon-link"></span>Live Site</label>
      <NuxtLink :to="data.url" target="_BLANK" >Check out the live product</NuxtLink>
    </div>
    <hr />
  </div>
  <ContentDoc class="content" />
</template>