<script setup lang="ts">
import RefImage from '@/components/RefImage.vue'
import ColorTable from '@/components/ColorTable.vue'

const colors = [
  { name: 'data.colors.front', value: '#e7c7b1' },
  { name: 'data.colors.limbs', value: '#493428' },
  { name: 'data.colors.back', value: '#422322' },
  { name: 'data.colors.spine', value: '#341c1c' },
  { name: 'data.colors.tissue', value: '#6bb9db' },
  { name: 'data.colors.spikes', value: '#f8ebdd' },
  { name: 'data.colors.eyesPrimary', value: '#a7eef1' },
  { name: 'data.colors.eyesSecondary', value: '#6dabd1' }
]
</script>

<template>
  <article>
    <section>
      <h1>{{ $t(`${$route.meta.title}`) }}</h1>
    </section>

    <RefImage dropshadow>
      <template v-if="$route.query.nsfw">
        <source
          srcset="
            @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
          "
          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
          type="image/avif"
        />
        <source
          srcset="
            @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
          "
          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
          type="image/webp"
        />
        <img
          srcset="
            @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
          "
          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
          alt="Viktor Ref by sabertoofs"
          loading="lazy"
        />
      </template>

      <template v-else>
        <source
          srcset="
            @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
          "
          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
          type="image/avif"
        />
        <source
          srcset="
            @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
          "
          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
          type="image/webp"
        />
        <img
          srcset="
            @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
          "
          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
          :alt="`${$t('anatomy.images.back.caption')} by sabertoofs`"
          loading="lazy"
        />
      </template>

      <template #caption>
        {{ $t('anatomy.images.back.caption') }} &copy;
        <a href="http://twitter.com/sabertoofs">sabertoofs</a>
      </template>
    </RefImage>

    <ColorTable :colors="colors"></ColorTable>

    <section>
      <p v-for="(p, i) in $tm('anatomy.paragraphs[0]')" :key="i">{{ p }}</p>
    </section>

    <RefImage dropshadow>
      <template v-if="$route.query.nsfw">
        <source
          srcset="
            @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
          "
          sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
          type="image/avif"
        />
        <source
          srcset="
            @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
          "
          sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
          type="image/webp"
        />
        <img
          srcset="
            @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
          "
          sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
          alt="Viktor frontal shot by sabertoofs"
          loading="lazy"
        />
      </template>

      <template v-else>
        <source
          srcset="
            @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
          "
          sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
          type="image/avif"
        />
        <source
          srcset="
            @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
          "
          sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
          type="image/webp"
        />
        <img
          srcset="
            @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
          "
          sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
          :alt="`${$t('anatomy.images.front.caption')} by sabertoofs`"
          loading="lazy"
        />
      </template>

      <template #caption>
        {{ $t('anatomy.images.front.caption') }} &copy;
        <a href="http://twitter.com/sabertoofs">sabertoofs</a>
      </template>
    </RefImage>

    <section>
      <p v-for="(p, i) in $tm('anatomy.paragraphs[1]')" :key="i">{{ p }}</p>
    </section>
  </article>
</template>
