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

<template>
  <section>
    <h1>{{ $route.name }}</h1>

    <p>
      Since Sebin is a fire dragon there's a myriad of abilities he has at his
      disposal to defend himself.
    </p>
  </section>

  <section>
    <h2>Attacks</h2>
  </section>

  <AttackList>
    <AttackItem>
      <!-- max 2000px -->
      <template #image>
        <picture>
          <source
            srcset="
              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
            alt="Sebin Fire Breath"
            loading="lazy"
          />
        </picture>
      </template>
      <template #name>Fire Breath</template>
      <template #desc>
        Like most fire dragons, Sebin can breathe fire. In order to do this, he
        takes a deep breath to enrich the oxygen in his lungs with gases, which,
        together with special glands in his mouth, produce a combustible
        mixture. The resulting jet of fire, reaching several hundred degrees
        Celsius, spreads out on its way to its target, scorching everything in
        its path.
      </template>
    </AttackItem>

    <AttackItem>
      <!-- max 2000px -->
      <template #image>
        <picture>
          <source
            srcset="
              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
            alt="Sebin Fire Breath"
            loading="lazy"
          />
        </picture>
      </template>
      <template #name>Flame Toss</template>
      <template #desc>
        By spitting fire into his hands, Sebin can form it into a ball and use
        it as a projectile. His scales are fireproof and can withstand the high
        temperatures. Due to their high concentration, the projectiles explode
        upon impact. By combining two fireballs the explosion radius increases
        dramatically.
      </template>
    </AttackItem>

    <AttackItem>
      <!-- max 2000px -->
      <template #image>
        <picture>
          <source
            srcset="
              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
            alt="Sebin Kindled Fist"
            loading="lazy"
          />
        </picture>
      </template>
      <template #name>Kindled Fist</template>
      <template #desc>
        Apart from throwing projectiles, Sebin can also use the fireballs to
        wrap his fists in fire. This allows him to inflict severe burns on his
        opponent with each blow. In addition, he can release the fire from his
        fists with aimed blows and hurl it at his opponents.
      </template>
    </AttackItem>

    <AttackItem>
      <!-- max 2000px -->
      <template #image>
        <picture>
          <source
            srcset="
              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
            alt="Sebin Burning Twister"
            loading="lazy"
          />
        </picture>
      </template>
      <template #name>Burning Twister</template>
      <template #desc>
        A technique used in aerial combat, Sebin uses his fire breath to engulf
        his body in flames while spinning to become a fire tornado that singes
        opponents.
      </template>
    </AttackItem>
  </AttackList>
</template>

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