<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">
    <div :class="'head ' + data.slug" :style="'background: ' + data.gradient">
      <div class="concept">
        <img class="logo unselectable" :src="'/img/products/' + data.slug + '/logo.png'" :alt="data.project + ' logo'" />
        <h1 v-html="data.concept"></h1>
        <div class="meta">
          <NuxtLink v-if="data.live" :to="data.url" target="_BLANK" >See live version <span class="icon-arrow-right"></span></NuxtLink>
          <label class="unselectable" >Stack: </label>
          <p class="stack">{{ data.stack }}</p>
        </div>
      </div>
      <img class="showcase" :src="'/img/products/' + data.slug + '/showcase.png'" :alt="data.project + ' showcase'" />
    </div>

    <ContentDoc class="content center" />
  </div>
</template>