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

<template>
  <main>
    <CharacterList>
      <CharacterItem class="viktor" href="/viktor/">
        <template #image>
          <picture>
            <source
              srcset="
                @/assets/viktor-portrait.png?w=250;500&avif&quality=75&srcset
              "
              type="image/avif"
              sizes="(min-width: 70em) 500px, 250px"
            />
            <source
              srcset="
                @/assets/viktor-portrait.png?w=250;500&webp&quality=100&srcset
              "
              type="image/webp"
              sizes="(min-width: 70em) 500px, 250px"
            />
            <img
              srcset="@/assets/viktor-portrait.png?w=250;500&png&srcset"
              alt="Viktor Portrait"
            />
          </picture>
        </template>

        <template #name>Viktor Kraastav</template>
        <template #species>Ankylosaurus</template>
      </CharacterItem>

      <CharacterItem class="sebin" href="/sebin/">
        <template #image>
          <picture>
            <source
              srcset="
                @/assets/sebin-portrait.png?w=250;500&avif&quality=75&srcset
              "
              type="image/avif"
              sizes="(min-width: 70em) 500px, 250px"
            />
            <source
              srcset="
                @/assets/sebin-portrait.png?w=250;500&webp&quality=100&srcset
              "
              type="image/webp"
              sizes="(min-width: 70em) 500px, 250px"
            />
            <img
              srcset="@/assets/sebin-portrait.png?w=250;500&png&srcset"
              alt="Sebin Portrait"
            />
          </picture>
        </template>

        <template #name>Sebin Nyshkim</template>
        <template #species>Anthro Dragon (main)</template>
      </CharacterItem>

      <CharacterItem class="jarek" href="/jarek/">
        <template #image>
          <picture>
            <source
              srcset="
                @/assets/jarek-portrait.png?w=250;500&avif&quality=75&srcset
              "
              type="image/avif"
              sizes="(min-width: 70em) 500px, 250px"
            />
            <source
              srcset="
                @/assets/jarek-portrait.png?w=250;500&webp&quality=100&srcset
              "
              type="image/webp"
              sizes="(min-width: 70em) 500px, 250px"
            />
            <img
              srcset="@/assets/jarek-portrait.png?w=250;500&png&srcset"
              alt="Jarek Portrait"
            />
          </picture>
        </template>

        <template #name>Jarek Vakhtang</template>
        <template #species>Krondir</template>
      </CharacterItem>
    </CharacterList>
  </main>
</template>

<style lang="scss">
.sebin {
  font-family: "Exo", sans-serif;
  font-style: italic;

  &:before {
    background: var(--background--sebin);
  }

  &:after {
    background: url(@/assets/subtle-prism.svg);
    mix-blend-mode: multiply;
  }
}

.viktor {
  font-family: "Secular One", serif;

  &:before {
    background: var(--background--viktor);
  }

  &:after {
    top: unset;

    background: var(--background-image--viktor) no-repeat center bottom;
    background-size: cover;

    height: var(--background-height-base--viktor);

    z-index: 0;
  }

  &:hover:after {
    height: var(--background-height-hover--viktor);
  }

  a {
    color: var(--color-text--viktor);
  }

  img {
    background: var(--image-background--viktor);
  }
}

.jarek {
  font-family: "Rubik Dirt", sans-serif;

  &:before {
    background: var(--background--jarek);
  }
}
</style>
