<script setup lang="ts">
import { inject } from "vue";
import { isWarnKey, nsfwKey, showModalKey } from "@/keys";
import type { ColorDict } from "@/interfaces";
import { tailLength, wingspan, penis, colors } from "@/sebin";
import { toImperial, toFahrenheit } from "@/helpers";
import RefToggle from "@/components/RefToggle.vue";
import RefModal from "@/components/RefModal.vue";
import RefGallery from "@/components/RefGallery.vue";
import RefFigure from "@/components/RefFigure.vue";
import ColorTable from "@/components/ColorTable.vue";
import DataTable from "@/components/DataTable.vue";
import QuickFacts from "@/components/QuickFacts.vue";

const sebinColors: ColorDict[] = [
  { name: "Scales", value: colors.scalesPrimary },
  { name: "Chest, Wings (front)", value: colors.scalesSecondary },
  { name: "Hair", value: colors.hairPrimary },
  { name: "Hair Streaks (optional)", value: colors.hairSecondary },
  { name: "Eyes", value: colors.eyes },
  { name: "Facial Spikes", value: colors.eyebrows },
  { name: "Horns/Claws/Nipples", value: colors.horns },
  { name: "Tail Spikes", value: colors.tailspikes },
];

const sebinPenisHeadings = ["Key", "Value"];
const sebinPenisData = [
  ["Shape", penis.shape],
  ["Type", penis.type],
  ["Special Traits", penis.special],
  ["Color", colors.penis],
  ["Length", `${penis.size} cm (${toImperial(penis.size)})`],
  ["Girth", `${penis.girth} cm (${toImperial(penis.girth)})`],
];

const isNsfw = inject<boolean>(nsfwKey, false);
const isWarn = inject<boolean>(isWarnKey, false);
const showModal = inject<Function>(showModalKey, Function);
</script>

<template>
  <RefModal v-show="isWarn">
    <template #heading>
      ⚠️⚠️⚠️<br />
      Whoa, Nelly!
    </template>

    <template #message>
      By enabling NSFW mode you confirm that you are of legal age to view adult
      content.
    </template>

    <template #yes>Yes, show me the goods 👀</template>
    <template #no>NO, STAHP 😱</template>
  </RefModal>

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

  <RefFigure id="sebin-fullbody-ref" dropshadow>
    <!-- max 3360px -->
    <template #img>
      <picture v-if="isNsfw">
        <source
          srcset="
            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&avif&quality=75&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 2240px,
                 (min-width: 100em) 1920px,
                 (min-width: 90em) 1600px,
                 (min-width: 80em) 1440px,
                 (min-width: 67.5em) 1280px,
                 (min-width: 45em) 1080px,
                 (min-width: 30em) 720px,
                 480px"
          type="image/avif"
        />
        <source
          srcset="
            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&webp&quality=100&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 2240px,
                 (min-width: 100em) 1920px,
                 (min-width: 90em) 1600px,
                 (min-width: 80em) 1440px,
                 (min-width: 67.5em) 1280px,
                 (min-width: 45em) 1080px,
                 (min-width: 30em) 720px,
                 480px"
          type="image/webp"
        />
        <img
          srcset="
            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&png&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 2240px,
                 (min-width: 100em) 1920px,
                 (min-width: 90em) 1600px,
                 (min-width: 80em) 1440px,
                 (min-width: 67.5em) 1280px,
                 (min-width: 45em) 1080px,
                 (min-width: 30em) 720px,
                 480px"
          alt="Sebin Full Body Ref"
          loading="lazy"
        />
      </picture>
      <picture v-else>
        <source
          srcset="
            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&avif&quality=75&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 2240px,
                 (min-width: 100em) 1920px,
                 (min-width: 90em) 1600px,
                 (min-width: 80em) 1440px,
                 (min-width: 67.5em) 1280px,
                 (min-width: 45em) 1080px,
                 (min-width: 30em) 720px,
                 480px"
          type="image/avif"
        />
        <source
          srcset="
            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&webp&quality=100&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 2240px,
                 (min-width: 100em) 1920px,
                 (min-width: 90em) 1600px,
                 (min-width: 80em) 1440px,
                 (min-width: 67.5em) 1280px,
                 (min-width: 45em) 1080px,
                 (min-width: 30em) 720px,
                 480px"
          type="image/webp"
        />
        <img
          srcset="
            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&png&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 2240px,
                 (min-width: 100em) 1920px,
                 (min-width: 90em) 1600px,
                 (min-width: 80em) 1440px,
                 (min-width: 67.5em) 1280px,
                 (min-width: 45em) 1080px,
                 (min-width: 30em) 720px,
                 480px"
          alt="Sebin Full Body Ref"
          loading="lazy"
        />
      </picture>
    </template>

    <template #caption>
      <RefToggle
        id="sebin-fullbody-ref"
        v-model="isNsfw"
        @click.prevent="showModal()"
      >
        <template #off>😇</template>
        <template #on>😈</template>
      </RefToggle>

      <div>Sebin Full Body Reference</div>
    </template>

    <template #copyright>
      <a href="https://twitter.com/Sr_Draftgon">draftgon</a>
    </template>
  </RefFigure>

  <section>
    <ColorTable :colors="sebinColors" />

    <QuickFacts>
      <ul class="col-2">
        <li>Bipedal plantigrade</li>
        <li>Red and yellow scales</li>
        <li>Yellow scales under chin, torso, underside of tail</li>
        <li>Athletic to body builder physique</li>
        <li>Sharp, black claws on fingers and toes</li>
        <li>Brown blunt spikes running over back and top-side of tail</li>
        <li>
          Tail about {{ tailLength / 100 }} meter ({{ toImperial(tailLength) }})
          in length
        </li>
      </ul>
    </QuickFacts>

    <p>
      As the offspring of a union between human and dragon, Sebin is a bipedal
      plantigrade. The majority of his body is covered in red scales. A strip of
      yellow scales runs from the underside of his jaw, extending down his chest
      through his legs to the underside of the tip of his tail. The scales on
      his chest are characterized by a special toughness to better protect vital
      organs. He also has an athletic to muscular physique that he continuously
      tends to keep in shape. Finger and toe tips are armed with sharp, black
      claws, which serve him equally as tools and weapons. Brown spines run from
      head to spine to tip of tail, though they are too blunt to pose a risk of
      injury. His tail is about
      {{ tailLength / 100 }} meters ({{ toImperial(tailLength) }}) in length.
    </p>
  </section>

  <section>
    <h2>Wings</h2>

    <QuickFacts>
      <ul class="col-2">
        <li>
          Wingspan {{ wingspan / 100 }} meters ({{ toImperial(wingspan) }})
        </li>
        <li>Closed when on the ground</li>
        <li>Function like a second pair of arms</li>
        <li>Pointy talon on end of "hand"</li>
      </ul>
    </QuickFacts>

    <p>
      Sebin's wings have a span of about {{ wingspan / 100 }} meters ({{
        toImperial(wingspan)
      }}). They function very much like a second pair of arms: two
      interconnected limbs that form a bendable arm, at the end of which sits a
      hand-like structure, adorned with a talon in exchange for a thumb, with a
      sturdy membrane stretched between its long fingers. On solid ground, he
      keeps his wings closed so as not to accidentally bump into anything with
      them. Sebin also pays a lot of attention to his wings when working out, so
      that they can keep carrying him reliably through the air. Though, he only
      travels short to medium distances through the air before he has to take a
      rest - as long as the airspace in the area has been declared open for wing
      bearers.
    </p>
  </section>

  <section>
    <h2>Head</h2>
  </section>

  <RefFigure id="sebin-expressions" dropshadow>
    <!-- max 2702px -->
    <template #img>
      <picture>
        <source
          srcset="
            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&avif&quality=75&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 2240px,
                 (min-width: 100em) 1920px,
                 (min-width: 90em) 1600px,
                 (min-width: 80em) 1440px,
                 (min-width: 67.5em) 1280px,
                 (min-width: 45em) 1080px,
                 (min-width: 30em) 720px,
                 480px"
          type="image/avif"
        />
        <source
          srcset="
            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&webp&quality=100&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 2240px,
                 (min-width: 100em) 1920px,
                 (min-width: 90em) 1600px,
                 (min-width: 80em) 1440px,
                 (min-width: 67.5em) 1280px,
                 (min-width: 45em) 1080px,
                 (min-width: 30em) 720px,
                 480px"
          type="image/webp"
        />
        <img
          srcset="
            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&png&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 2240px,
                 (min-width: 100em) 1920px,
                 (min-width: 90em) 1600px,
                 (min-width: 80em) 1440px,
                 (min-width: 67.5em) 1280px,
                 (min-width: 45em) 1080px,
                 (min-width: 30em) 720px,
                 480px"
          alt="Sebin's Expressions"
          loading="lazy"
        />
      </picture>
    </template>
    <template #caption>Sebin's Expressions</template>
    <template #copyright>
      <a href="https://twitter.com/Sr_Draftgon">draftgon</a>
    </template>
  </RefFigure>

  <section>
    <QuickFacts>
      <ul class="col-2">
        <li>Round pupils, green iris</li>
        <li>Yellow spikes for eyebrows</li>
        <li>Yellow spikes on cheeks</li>
        <li>Black horns with slight curve downwards</li>
        <li>Blue, medium long hair</li>
        <li>Long, pointy, movable ears</li>
        <li>Very sharp teeth</li>
        <li>Tongue with pointy tip</li>
      </ul>
    </QuickFacts>

    <p>
      Despite what one might expect with reptilians, Sebin's pupils are rounded
      instead of slit-shaped. Yellow spikes running above his eyelids serve as
      eyebrows. These spikes are also found along his jaw bone. Two pointed,
      slightly curved, black horns protrude from his head. He usually wears his
      medium-length, blue hair loose. His long, pointed ears are very flexible,
      allowing him to hear sounds around him without having to turn his head.
      They are also used for non-verbal communication, to express emotions
      through body language. His hearing perceives a wider range of frequencies,
      making it superior to that of a human. His jaws are equipped with
      razor-sharp teeth that effortlessly sink into anything he manages to bite,
      be it nourishment or adversaries. Embedded between them lies his tongue,
      which is typically pointed for reptilians. Glands in his throat produce a
      mixture which he uses to spit fire, which can reach up to around 100 °C
      ({{ toFahrenheit(100) }} °F).
    </p>
  </section>

  <section>
    <h2>Upper Body</h2>

    <QuickFacts>
      <ul class="col-2">
        <li>Strong upper body</li>
        <li>Big pecs</li>
        <li>Defined abs</li>
        <li>Black nipples</li>
        <li>
          Any muscle mass from athletic to body builder is fine, with a
          preference towards body builder
        </li>
      </ul>
    </QuickFacts>

    <p>
      At the age of 17, Sebin gradually began to keep his body in shape on a
      regular basis. His favorite exercises include weightlifting (with both
      dumbbells and barbells), lat pulldown, leg press and cable curls. He works
      out three days a week with one day off between training days, rotating the
      body regions he trains each day.
    </p>
  </section>

  <RefFigure id="sebin-upper-body-ref" polaroidBorder>
    <!-- max 3617px -->
    <template #img>
      <picture>
        <source
          srcset="
            @/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&avif&quality=75&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
          type="image/avif"
        />
        <source
          srcset="
            @/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&webp&quality=100&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
          type="image/webp"
        />
        <img
          srcset="
            @/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&jpg&quality=95&withoutEnlargement&srcset
          "
          sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
          alt="Sebin's upper body closeup"
          loading="lazy"
        />
      </picture>
    </template>
    <template #caption>Sebin's upper body closeup</template>
    <template #copyright>
      <a href="https://twitter.com/NidtheDragon">NidtheDragon</a>
    </template>
  </RefFigure>

  <section>
    <p>
      Sebin is very concerned with an even distribution of muscle mass, but pays
      particular attention to his back, chest and arms. A strong chest with
      strong arms helps to throw fire projectiles as far as possible. A strong
      back guarantees a longer stay in the air.
    </p>
  </section>

  <section>
    <h2>Additional Muscle References</h2>
  </section>

  <RefGallery>
    <RefFigure id="sebin-muscle-ref12" polaroidBorder>
      <!-- max 1964px -->
      <template #img>
        <picture>
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&jpg&quality=95&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
            alt="Sebin flexing"
            loading="lazy"
          />
        </picture>
      </template>
      <template #caption>Sebin flexing</template>
      <template #copyright>
        <a href="https://twitter.com/KidRhinoBoy">Chirros</a>
      </template>
    </RefFigure>
    <RefFigure id="sebin-muscle-ref1" polaroidBorder nsfw>
      <!-- max 2480px -->
      <template #img>
        <picture>
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
            alt="Sebin beckons"
            loading="lazy"
          />
        </picture>
      </template>
      <template #caption>Sebin beckons</template>
      <template #copyright>
        <a href="https://twitter.com/GrisserArt">Grisser</a>
      </template>
    </RefFigure>
    <RefFigure id="sebin-muscle-ref2" polaroidBorder>
      <!-- max 2953px -->
      <template #img>
        <picture>
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&jpg&quality=95&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
            alt="Sebin jamming out to some tunes"
            loading="lazy"
          />
        </picture>
      </template>
      <template #caption>Sebin jamming out to some tunes</template>
      <template #copyright>
        <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
      </template>
    </RefFigure>
    <RefFigure id="sebin-muscle-ref3" polaroidBorder>
      <!-- max 4961px -->
      <template #img>
        <picture>
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
            alt="Sebin flexing"
            loading="lazy"
          />
        </picture>
      </template>
      <template #caption>Sebin flexing</template>
      <template #copyright>
        <a href="https://www.furaffinity.net/user/Marsel-Defender">
          Marsel-Defender
        </a>
      </template>
    </RefFigure>
    <RefFigure id="sebin-muscle-ref4" polaroidBorder nsfw>
      <!-- max 3000px -->
      <template #img>
        <picture>
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&jpg&quality=95&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
            alt="Sebin soaping up"
            loading="lazy"
          />
        </picture>
      </template>
      <template #caption>Sebin soaping up</template>
      <template #copyright>
        <a href="https://twitter.com/O_reowoof">(o)reo</a>
      </template>
    </RefFigure>
    <RefFigure id="sebin-muscle-ref5" polaroidBorder nsfw>
      <!-- max 2000px -->
      <template #img>
        <picture>
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&jpg&quality=95&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
            alt="Sebin bulging out"
            loading="lazy"
          />
        </picture>
      </template>
      <template #caption>Sebin bulging out</template>
      <template #copyright>
        <a href="https://www.furaffinity.net/user/sexmuffin">SexMuffin</a>
      </template>
    </RefFigure>
    <RefFigure id="sebin-muscle-ref6" polaroidBorder nsfw>
      <!-- max 1500px -->
      <template #img>
        <picture>
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&jpg&quality=95&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
            alt="Sebin showing you his rings"
            loading="lazy"
          />
        </picture>
      </template>
      <template #caption>Sebin showing you his rings</template>
      <template #copyright>
        <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
      </template>
    </RefFigure>
    <RefFigure id="sebin-muscle-ref7" polaroidBorder>
      <!-- max 1240px -->
      <template #img>
        <picture>
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 995px, 415px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 992px, 415px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&jpg&quality=95&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 992px, 415px"
            alt="Sebin ready to throw down"
            loading="lazy"
          />
        </picture>
      </template>
      <template #caption>Sebin ready to throw down</template>
      <template #copyright>
        <a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
      </template>
    </RefFigure>
    <RefFigure id="sebin-muscle-ref8" polaroidBorder>
      <!-- max 1245px -->
      <template #img>
        <picture>
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&jpg&quality=95&withoutEnlargement&srcset
            "
            sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
            alt="Sebin looking aloof (but chill)"
            loading="lazy"
          />
        </picture>
      </template>
      <template #caption>Sebin looking aloof (but chill)</template>
      <template #copyright>
        <a href="https://twitter.com/UsurpThem">Usurp</a>
      </template>
    </RefFigure>
    <RefFigure id="sebin-muscle-ref9" polaroidBorder>
      <!-- max 2550px -->
      <template #img>
        <picture>
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&jpg&quality=95&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
            alt="Sebin getting out of the pool"
            loading="lazy"
          />
        </picture>
      </template>
      <template #caption>Sebin getting out of the pool</template>
      <template #copyright>
        <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
      </template>
    </RefFigure>
    <RefFigure id="sebin-muscle-ref10" polaroidBorder nsfw>
      <!-- max 2421px -->
      <template #img>
        <picture>
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&jpg&quality=95&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
            alt="Sebin getting frisky on the train"
            loading="lazy"
          />
        </picture>
      </template>
      <template #caption> Sebin getting frisky on the train </template>
      <template #copyright>
        <a href="https://twitter.com/Wintech3112">Winty</a>
      </template>
    </RefFigure>
    <RefFigure id="sebin-muscle-ref11" polaroidBorder>
      <!-- max 3184px -->
      <template #img>
        <picture>
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&avif&quality=75&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&webp&quality=100&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
            type="image/webp"
          />
          <img
            srcset="
              @/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&png&withoutEnlargement&srcset
            "
            sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
            alt="Sebin getting ready to lift"
            loading="lazy"
          />
        </picture>
      </template>
      <template #caption>Sebin getting ready to lift</template>
      <template #copyright>
        <a href="https://twitter.com/EdaMonstr"> Eda </a>
      </template>
    </RefFigure>
  </RefGallery>

  <template v-if="isNsfw">
    <section>
      <h2>Penis</h2>
    </section>

    <RefFigure id="sebin-penis-ref" dropshadow>
      <!-- max 1155px -->
      <template #img>
        <picture>
          <source
            srcset="
              @/assets/refs/sebin-ref-penis.png?w=480;720;0&avif&quality=75&srcset
            "
            sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
            type="image/avif"
          />
          <source
            srcset="
              @/assets/refs/sebin-ref-penis.png?w=480;720;0&webp&quality=100&srcset
            "
            sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
            type="image/webp"
          />
          <img
            srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&png&srcset"
            sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
            alt="Sebin's manly parts"
            loading="lazy"
          />
        </picture>
      </template>
      <template #caption>
        <label>Sebin's manly parts</label>
      </template>
      <template #copyright>
        <a href="https://twitter.com/Sr_Draftgon">draftgon</a>
      </template>
    </RefFigure>

    <section>
      <DataTable :headings="sebinPenisHeadings" :data="sebinPenisData" />

      <QuickFacts>
        <ul class="col-2">
          <li>Human-shaped with ridges</li>
          <li>Ring-like sheath surrounding shaft</li>
          <li>
            Extends from sheath when erect, lives inside sheath when not erect
          </li>
          <li>External balls</li>
        </ul>
      </QuickFacts>

      <p>
        Despite his reptilian appearance, Sebin has nipples, a feature of the
        human side of his family. Furthermore, his external testicles represent
        another humanized feature. Where relatives of his ilk possess a slit in
        which the penis lies protectively, Sebin possesses a pouch-like sheath
        from which the tip of the penis protrudes slightly. The shape of his
        shaft is predominantly humanoid, but it is surrounded by ridges and has
        no equivalent of a foreskin. When aroused, the coal-black shaft swells
        and pushes out of the sheath until fully erect, the sheath wrapping
        around the root of the shaft like a ring. However, he can also push it
        out in a flaccid state, e.g. when needing to pass water.
      </p>
    </section>
  </template>

  <template v-else>
    <section>
      <h2>But, wait! There's more...</h2>

      <p>
        Sebin like you haven't seen him yet! Flip the switch to reveal his
        naughty secrets. If you dare...! Don't say I didn't warn you!!
      </p>

      <p>
        <RefToggle
          id="sebin-manly-bits"
          v-model="isNsfw"
          @click.prevent="showModal()"
        >
          <template #off>😇</template>
          <template #on>😈</template>
        </RefToggle>
      </p>
    </section>
  </template>
</template>

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