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

import ViktorRefAlpha from "@/assets/viktor-ref-SFW-alpha.png?w=400&webp&quality=100&imagetools";
import ViktorFront from "@/assets/viktor-front-SFW-alpha.png?w=400&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>{{ $route.meta.title }}</h1>
    <h2>Artwork</h2>
  </section>
  <AttributionTable :attributions="attributions" />
  <section>
    <h2>Other</h2>
  </section>
  <table>
    <thead>
      <tr>
        <th>Type</th>
        <th>Source</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Icons</td>
        <td>
          <a
            href="https://fontawesome.com/license/free"
            target="_blank"
            rel="noopener noreferrer"
          >
            Font Awesome
          </a>
        </td>
      </tr>
      <tr>
        <td>Heading Font</td>
        <td>
          <a
            href="https://github.com/MichalSahar/Secular"
            target="_blank"
            rel="noopener noreferrer"
          >
            Secular One
          </a>
          by
          <a
            href="https://github.com/MichalSahar"
            target="_blank"
            rel="noopener noreferrer"
          >
            Michal Sahar
          </a>
        </td>
      </tr>
      <tr>
        <td>Copy Font</td>
        <td>
          <a
            href="https://antonkoovit.com/typefaces/arvo"
            target="_blank"
            rel="noopener noreferrer"
          >
            Arvo
          </a>
          by
          <a
            href="https://antonkoovit.com/"
            target="_blank"
            rel="noopener noreferrer"
          >
            Anton Koovit
          </a>
        </td>
      </tr>
      <tr>
        <td>Background</td>
        <td>
          Layered Waves from
          <a
            href="https://haikei.app/"
            target="_blank"
            rel="noopener noreferrer"
          >
            Haikei
          </a>
          by
          <a
            href="https://zcreativelabs.com/"
            target="_blank"
            rel="noopener noreferrer"
          >
            z creative labs
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style lang="scss"></style>
