<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>
  <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>
</template>
