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

import ViktorRefAlpha from '@/assets/viktor-ref-SFW-alpha.png?w=400&format=webp&quality=100&imagetools'
import ViktorFront from '@/assets/viktor-front-SFW-alpha.png?w=400&format=webp&quality=100&imagetools'

const attributions = [
  {
    artwork: ViktorRefAlpha,
    artist: 'sabertoofs',
    links: {
      furaffinity: 'https://www.furaffinity.net/user/sabertoofs',
      twitter: 'https://twitter.com/sabertoofs'
    }
  },
  {
    artwork: ViktorFront,
    artist: 'sabertoofs',
    links: {
      furaffinity: 'https://www.furaffinity.net/user/sabertoofs',
      twitter: 'https://twitter.com/sabertoofs'
    }
  }
]
</script>

<template>
  <article>
    <section>
      <h1>{{ $t(`${$route.meta.title}`) }}</h1>
      <h2>{{ $t('attributions.artwork.heading') }}</h2>
    </section>
    <AttributionTable :attributions="attributions" />
    <section>
      <h2>{{ $t('attributions.other.heading') }}</h2>
    </section>
    <table>
      <thead>
        <tr>
          <th>{{ $t('attributions.other.headings[0]') }}</th>
          <th>{{ $t('attributions.other.headings[1]') }}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{ $t('attributions.other.icons[0]') }}</td>
          <td>
            <a
              href="https://fontawesome.com/license/free"
              target="_blank"
              rel="noopener noreferrer"
            >
              Font Awesome
            </a>
          </td>
        </tr>
        <tr>
          <td>{{ $t('attributions.other.headingFont[0]') }}</td>
          <td>
            <a
              href="https://github.com/MichalSahar/Secular"
              target="_blank"
              rel="noopener noreferrer"
            >
              Secular One
            </a>
            {{ $t('attributions.other.headingFont[1]') }}
            <a href="https://github.com/MichalSahar" target="_blank" rel="noopener noreferrer">
              Michal Sahar
            </a>
          </td>
        </tr>
        <tr>
          <td>{{ $t('attributions.other.copyFont[0]') }}</td>
          <td>
            <a
              href="https://antonkoovit.com/typefaces/arvo"
              target="_blank"
              rel="noopener noreferrer"
            >
              Arvo
            </a>
            {{ $t('attributions.other.copyFont[1]') }}
            <a href="https://antonkoovit.com/" target="_blank" rel="noopener noreferrer">
              Anton Koovit
            </a>
          </td>
        </tr>
        <tr>
          <td>{{ $t('attributions.other.background[0]') }}</td>
          <td>
            {{ $t('attributions.other.background[1][0]') }}
            <a href="https://haikei.app/" target="_blank" rel="noopener noreferrer">Haikei</a>
            {{ $t('attributions.other.background[1][1]') }}
            <a href="https://zcreativelabs.com/" target="_blank" rel="noopener noreferrer">
              z creative labs
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </article>
</template>
