<template>
  <header>
    <div class="nsfw-bar">
      <div class="nsfw-bar__content">
        <div>
          If you wish to see NSFW content on this page flip this switch.
        </div>
        <nsfw-switch
          id="nsfw-switch-top"
          v-model="$parent.nsfw"
          @change="$parent.showWarning()"
        />
      </div>
    </div>

    <div class="header flex flex--row flex--wrap flex--center flex--center-v">
      <div class="header__image-container col col-m-6 col-3">
        <img
          class="header__image"
          src="@img/sebin-smug-icon.png"
          alt="Sebin Avatar"
        />
      </div>
      <div class="header__headings col col-m-12 col-7">
        <h1 class="header__main-heading">{{ mainHeading }}</h1>
        <h2 class="header__sub-heading">{{ subHeading }}</h2>
      </div>
    </div>

    <ref-navbar :navlinks="navlinks" />
  </header>
</template>

<script>
import NsfwSwitch from "@components/NsfwSwitch.vue";
import RefNavbar from "@components/Navbar.vue";

export default {
  props: {
    mainHeading: String,
    subHeading: String
  },
  data() {
    return {
      navlinks: [
        { href: "#general", label: "General", nsfw: false },
        { href: "#anatomy", label: "Anatomy", nsfw: false },
        { href: "#wings", label: "Wings", nsfw: false },
        { href: "#head", label: "Head", nsfw: false },
        { href: "#upperbody", label: "Upper Body", nsfw: false },
        { href: "#penis", label: "Penis", nsfw: true },
        { href: "#clothes", label: "Clothing Styles", nsfw: false },
        { href: "#abilities", label: "Abilities", nsfw: false }
      ]
    };
  },
  components: {
    NsfwSwitch,
    RefNavbar
  }
};
</script>

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

.header {
  max-width: 40em;
  margin: 1em auto;

  &__image {
    width: 100%;
    border-radius: 100%;
    border: 0.375em solid #fff;
    box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
  }

  &__main-heading,
  &__sub-heading {
    font-family: "Exo", sans-serif;
    margin: 1rem 0;
    text-align: center;
  }

  &__main-heading {
    font-size: 2.125em;
    font-weight: 900;
    font-style: italic;

    @media (min-width: 35em) {
      font-size: 2.75em;
    }
  }

  &__sub-heading {
    font-size: 1em;
    font-weight: 300;
    font-style: italic;
  }
}

.nsfw-bar {
  background-color: $bg-color-light;
  padding: 0.5em;

  &__content {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    max-width: 40rem;
    margin: auto;

    div {
      flex: 1 1 auto;
      text-align: center;
    }

    label {
      flex: 0 0 5em;
    }
  }
}
</style>
