<script setup lang="ts">
import TableHeader from '~/components/parts/TableHeader.vue';
import { useSeo } from '~/composables/seo';

const slug = useRoute().params.slug;
const { locale } = useI18n();

const { data: post } = await useAsyncData(`art-${slug}`, () => 
  queryCollection(`art`).path(`/art/${locale.value}/${slug}`).first()
, {watch: [locale]})

useSeo({
  title: post.value?.title || '',
  description: `Art piece: ${post.value?.title || ''} by Aran Roig`,
  canonicalUrl: `/art/${locale.value}/${slug}`,
  structuredData: post.value ? {
    '@context': 'https://schema.org',
    '@type': 'CreativeWork',
    name: post.value.title,
    description: `Art piece by Aran Roig titled "${post.value.title}"`,
    author: {
      '@type': 'Person',
      name: 'Aran Roig'
    },
    datePublished: post.value.date,
    image: post.value.thumb ? `${post.value.thumb.startsWith('http') ? '' : 'https://aranroig.com'}${post.value.thumb}` : undefined,
    creativeWorkTheme: {
      '@type': 'Thing',
      name: 'Digital Art'
    }
  } : undefined,
  ogImage: post.value?.thumb
});
</script>

<template>
  <div class="no-sprite">
      <TableHeader></TableHeader>
    </div>
  <div class="extended-container">
    <h1 v-if="post" class="art-title">{{ post.title }}</h1>
    <ContentRenderer v-if="post" :value="post" class="art" />
  </div>
</template>

<style lang="scss">
.extended-container {
    width: 100%;
    margin: auto;
    margin-top: 32px;
}

.art {
    h2 {
        a {
            text-decoration: none;
            color: var(--color-text);
        }
    }

    img {
        margin: auto;
        display: block;
        max-height: 77vh;
        max-width: 100%;
    }
}

.art-title {
  font-family: 'Hurmit', monospace;
  font-size: 1.8rem;
  color: var(--color-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

@media screen and (max-width: 600px) {
    .extended-container {
        margin-top: 16px;
    }

    .art img {
        max-height: 50vh;
    }

    .art-title {
        font-size: 1.4rem;
    }
}

.no-sprite .undertable-wrapper {
  display: none;
}
</style>