<template>
  <nsfw-warning v-show="$root.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>
  </nsfw-warning>

  <prose>
    <h2>Anatomy</h2>

    <ref-figure>
      <template #img>
        <img
          v-if="$root.nsfw"
          src="@/assets/refs/sebin-ref-body-NSFW.png"
          alt="Sebin Full Body Ref"
        />
        <img
          v-else
          src="@/assets/refs/sebin-ref-body-SFW.png"
          alt="Sebin Full Body Ref"
        />
      </template>
      <template #caption>
        <nsfw-switch
          id="nsfw-switch"
          v-model="$root.nsfw"
          @change="$root.showWarning()"
        />

        <div>Sebin Full Body Reference</div>
      </template>
      <template #copyright>
        <a href="https://twitter.com/draftgon">draftgon</a>
      </template>
    </ref-figure>

    <data-table class="prose" :dataset="getSebinData.colors" />

    <quick-facts>
      <ul>
        <li>Bipedal plantigrade</li>
        <li>
          Red scales, yellow chest-plates running from underneath chin, over
          torso, between legs, underside of tail
        </li>
        <li>Athletic to body builder physique</li>
        <li>Sharp, black claws on fingers and toes</li>
        <li>Brown spikes running over back and top-side of tail</li>
        <li>Tail about 1 meter in length</li>
      </ul>
    </quick-facts>

    <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 one meter in length.
    </p>

    <h3>Wings</h3>

    <quick-facts>
      <ul>
        <li>Wingspan 3-4 meters (9 ft 10 in - 13 ft 1 in)</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>
    </quick-facts>

    <p>
      Sebin's wings have a span of about 3-4 meters (9 ft 10 in - 13 ft 1 in).
      They function very much like a second pair of arms: two interconnected
      limbs that form a bendable <em>arm</em>, at the end of which sits a
      <em>hand-like</em> structure, adorned with a talon in exchange for a
      <em>thumb</em>, with a sturdy membrane stretched between its long
      <em>fingers</em>. 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>

    <h3>Head</h3>
    <ref-figure>
      <template #img>
        <div>
          <img
            src="@/assets/refs/sebin-ref-expressions.png"
            alt="Sebin's Expressions"
          />
        </div>
      </template>
      <template #caption>
        <label>Sebin's Expressions</label>
      </template>
      <template #copyright>
        <a href="https://twitter.com/draftgon">draftgon</a>
      </template>
    </ref-figure>

    <quick-facts>
      <ul>
        <li>
          Round pupils, green iris. Yellow spikes on cheeks, as well as for
          eyebrows
        </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>
    </quick-facts>

    <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.
    </p>

    <h3>Upper Body</h3>
    <quick-facts>
      <ul>
        <li>Strong upper body, lush pecs, defined abs, black nipples</li>
        <li>
          Any muscle mass from athletic to body builder is fine, with a
          preference towards body builder
        </li>
      </ul>
    </quick-facts>

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

    <ref-figure polaroidBorder>
      <template #img>
        <img
          src="@/assets/refs/upper-body-ref.jpg"
          alt="Sebin's upper body closeup"
        />
      </template>
      <template #caption>Sebin's upper body closeup</template>
      <template #copyright>
        <a href="https://twitter.com/NidtheDragon">NidtheDragon</a>
      </template>
    </ref-figure>

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

    <h3>Additional Muscle References</h3>

    <ref-gallery>
      <ref-figure polaroidBorder>
        <template #img>
          <img
            src="@/assets/refs/muscle/muscle-ref12.jpg"
            alt="Sebin flexing"
          />
        </template>
        <template #caption>Sebin flexing</template>
        <template #copyright>
          <a href="https://twitter.com/KidRhinoBoy">Chirros</a>
        </template>
      </ref-figure>

      <ref-figure polaroidBorder nsfw id="nsfw-switch-grisser">
        <template #img>
          <img src="@/assets/refs/muscle/muscle-ref1.jpg" alt="Sebin beckons" />
        </template>
        <template #caption>Sebin beckons</template>
        <template #copyright>
          <a href="https://twitter.com/GrisserArt">Grisser</a>
        </template>
      </ref-figure>

      <ref-figure polaroidBorder>
        <template #img>
          <img
            src="@/assets/refs/muscle/muscle-ref2.jpg"
            alt="Sebin jamming out to some tunes"
          />
        </template>
        <template #caption>Sebin jamming out to some tunes</template>
        <template #copyright>
          <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
        </template>
      </ref-figure>

      <ref-figure polaroidBorder>
        <template #img>
          <img src="@/assets/refs/muscle/muscle-ref3.jpg" alt="Sebin flexing" />
        </template>
        <template #caption>Sebin flexing</template>
        <template #copyright>
          <a href="https://www.furaffinity.net/user/Marsel-Defender">
            Marsel-Defender
          </a>
        </template>
      </ref-figure>

      <ref-figure polaroidBorder>
        <template #img>
          <img
            src="@/assets/refs/muscle/muscle-ref4.png"
            alt="Sebin giving you the bedroom eyes"
          />
        </template>
        <template #caption>Sebin giving you the bedroom eyes</template>
        <template #copyright>
          <a href="https://www.furaffinity.net/user/sirboburto">SirBoburto</a>
        </template>
      </ref-figure>

      <ref-figure polaroidBorder>
        <template #img>
          <img
            src="@/assets/refs/muscle/muscle-ref5.jpg"
            alt="Sebin bulging out"
          />
        </template>
        <template #caption>Sebin bulging out</template>
        <template #copyright>
          <a href="https://twitter.com/MuskyMuffin">SexMuffin</a>
        </template>
      </ref-figure>

      <ref-figure polaroidBorder nsfw id="nsfw-switch-knuxlight">
        <template #img>
          <img
            src="@/assets/refs/muscle/muscle-ref6.jpg"
            alt="Sebin showing you his rings"
          />
        </template>
        <template #caption>Sebin showing you his rings</template>
        <template #copyright>
          <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
        </template>
      </ref-figure>

      <ref-figure polaroidBorder>
        <template #img>
          <img
            src="@/assets/refs/muscle/muscle-ref7.jpg"
            alt="Sebin ready to throw down"
          />
        </template>
        <template #caption>Sebin ready to throw down</template>
        <template #copyright>
          <a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
        </template>
      </ref-figure>

      <ref-figure polaroidBorder>
        <template #img>
          <img
            src="@/assets/refs/muscle/muscle-ref8.jpg"
            alt="Sebin being high and mighty"
          />
        </template>
        <template #caption>Sebin being high and mighty</template>
        <template #copyright>
          <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
        </template>
      </ref-figure>

      <ref-figure polaroidBorder>
        <template #img>
          <img
            src="@/assets/refs/muscle/muscle-ref9.jpg"
            alt="Sebin getting out of the pool"
          />
        </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>
      </ref-figure>

      <ref-figure polaroidBorder>
        <template #img>
          <img
            src="@/assets/refs/muscle/muscle-ref10.jpg"
            alt="Sebin sporting the construction worker look"
          />
        </template>
        <template #caption>
          Sebin sporting the construction worker look
        </template>
        <template #copyright>
          <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
        </template>
      </ref-figure>

      <ref-figure polaroidBorder>
        <template #img>
          <img
            src="@/assets/refs/muscle/muscle-ref11.jpg"
            alt="Sebin lifting weights"
          />
        </template>
        <template #caption>Sebin lifting weights</template>
        <template #copyright>
          <a href="https://www.furaffinity.net/user/Marsel-Defender">
            Marsel-Defender
          </a>
        </template>
      </ref-figure>
    </ref-gallery>

    <template v-if="$root.nsfw">
      <h3>Penis</h3>
      <ref-figure>
        <template #img>
          <div>
            <img
              src="@/assets/refs/sebin-ref-penis.png"
              alt="Sebin's manly parts"
            />
          </div>
        </template>
        <template #caption>
          <label>Sebin's manly parts</label>
        </template>
        <template #copyright>
          <a href="https://twitter.com/draftgon">draftgon</a>
        </template>
      </ref-figure>

      <data-table :dataset="getSebinData.penis" />

      <quick-facts>
        <ul>
          <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>
      </quick-facts>

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

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

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

      <nsfw-switch
        class="flex flex--row flex--nowrap flex--center"
        id="nsfw-switch-manlybits"
        v-model="$root.nsfw"
        @change="$root.showWarning()"
      />
    </template>
  </prose>
</template>

<script>
import Prose from "@/components/Prose.vue";
import NsfwSwitch from "@/components/NsfwSwitch.vue";
import NsfwWarning from "@/components/NsfwWarning.vue";
import RefFigure from "@/components/Figure.vue";
import QuickFacts from "@/components/QuickFacts.vue";
import DataTable from "@/components/DataTable.vue";
import RefGallery from "@/components/Gallery.vue";

import Sebin from "@/mixins/Sebin.js";
import Helper from "@/mixins/Helper.js";

export default {
  components: {
    Prose,
    NsfwSwitch,
    NsfwWarning,
    RefFigure,
    QuickFacts,
    DataTable,
    RefGallery,
  },
  mixins: [Sebin, Helper],
};
</script>

<style lang="scss">
@import "@/scss/_variables.scss";

.figure {
  &__border {
    position: relative;
  }

  .nsfw-switch {
    font-size: 1em;
    font-style: normal;
  }
}
</style>
