<template>
  <div id="app">
    <div class="siteHeader">
      <!-- This section gets pushed to the left side-->
      <div class="siteHeader__section">
        <div class="siteHeader__item siteHeaderLogo">
          <a href="/">
            <img
              class="logo"
              src="https://res.cloudinary.com/eventbree/image/upload/w_150/v1562833611/Icons/Tedbree%20Social/Logo_TEds_2222-02.png"
              alt="SVG Repo"
            >
          </a>
        </div>
      </div>
      <!-- This section gets pushed to the right side-->
      <div class="siteHeader__section">
        <div class="button outline">
          <span>Sign Up</span>
        </div>
      </div>
    </div>

    <div class="centeredPrompt">
      <div class="centeredPrompt__item centeredPromptDetails">QUESTION 2/3</div>
      <div class="centeredPrompt__item centeredPromptLabel">Which Channels Should We Manage?</div>

      <div class="centeredPrompt__item centeredPromptDetails">
        <div class="form-wizard">
          <EbImageCheck
            name="social"
            id="facebook"
            type="checkbox"
            image="https://res.cloudinary.com/eventbree/image/upload/v1562787590/Icons/FACEBOOK.png"
            alt="Facebook"
            v-model="form.social.channels.facebook"
          />

          <!-- without-checkmark -->
          <EbImageCheck
            name="social"
            id="pinterest"
            type="checkbox"
            image="https://res.cloudinary.com/eventbree/image/upload/v1562787590/Icons/PINTEREST.png"
            alt="Pinterest"
            v-model="form.social.channels.pinterest"
          />

          <EbImageCheck
            name="social"
            id="instagram"
            type="checkbox"
            image="https://res.cloudinary.com/eventbree/image/upload/v1562787590/Icons/INSTAGRAM.png"
            alt="Instagram"
            v-model="form.social.channels.instagram"
          />

          <EbImageCheck
            name="social"
            id="twitter"
            type="checkbox"
            image="https://res.cloudinary.com/eventbree/image/upload/v1562836378/Icons/TWITTER.png"
            alt="Twitter"
            v-model="form.social.channels.twitter"
          />

          <EbImageCheck
            name="social"
            id="linkedin"
            type="checkbox"
            image="https://res.cloudinary.com/eventbree/image/upload/v1562787590/Icons/LINKEDIN.png"
            alt="LinkedIn"
            v-model="form.social.channels.linkedin"
          />
        </div>
      </div>
    </div>
    <div class="formFooter">
      <div class="formFooter__section">
        <div class="formFooter__item button">&larr;&nbsp;&nbsp;Previous</div>
        <div class="formFooter__item amount">£{{amount}} +VAT</div>
        <div class="formFooter__item button block">
          <span>Next</span>
          <span>&nbsp;&nbsp;&rarr;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EbImageCheck from "./components/ImageCheck";

export default {
  name: "Home",
  components: {
    EbImageCheck
  },
  data() {
    return {
      form: {
        social: {
          channels: {
            facebook: false,
            linkedin: false,
            instagram: false,
            pinterest: false,
            twitter: false
          }
        }
      }
    };
  },
  computed: {
    amount() {
      let amount = 0;
      amount += this.form.social.channels.facebook ? 100 : 0;
      amount += this.form.social.channels.pinterest ? 100 : 0;
      amount += this.form.social.channels.linkedin ? 100 : 0;
      amount += this.form.social.channels.twitter ? 100 : 0;
      amount += this.form.social.channels.instagram ? 100 : 0;
      return amount;
    }
  }
};
</script>

<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");

#app {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 40px auto 0 auto;
  width: 1200px;
}

body {
  background: #F6F8FC;
}

.centeredPrompt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  padding: 10px;
}

.centeredPrompt__item + .centeredPrompt__item {
  margin-top: 5px;
}

.centeredPromptLabel {
  color: #202020;
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  padding-bottom: 40px;
}

.centeredPromptDetails {
  color: #86969C;
  font-size: 12px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 500;
}

.form-wizard {
  display: flex;
  width: 1180px;
  margin-top: 20px;
  align-content: center;
  justify-content: space-evenly;
}

.formFooter {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  padding: 100px;
  text-transform: uppercase;
  font-size: 12px;
}

.formFooter__section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.formFooter__item + .formFooter__item {
  margin-left: 50px;
}

.amount {
  /* margin: 0 100px; */
  font-size: 32px;
}

.formFooterFeedback {
  color: #86969C;
  font-size: 12px;
  line-height: 0;
}

.block {
  background: blue;
  font-weight: 900;
  color: #fff;
  padding: 15px;
  width: 120px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
}

.outline {
  border: 1px solid #cdc;
  font-weight: 600;
  color: #202020;
  padding: 15px;
  width: 120px;
  font-size: 12px;
  text-transform: uppercase;
  border-radius: 4px;
}

.button--clear {
  color: #16A2D7;
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

.siteHeader {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.siteHeader__section {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.siteHeader__item {
  padding: 5px 15px;
  font-size: 12px;
}

.siteHeader__item + .siteHeader__item {
  margin-left: 5px;
}

.siteHeader__item.is-site-header-item-selected {
  color: #FFFFFF;
  background-color: #415F69;
  border-radius: 4px;
}

.siteHeaderLogo {
  font-size: 20px;
  line-height: 0;
  color: white;
}

.siteHeaderButton {
  cursor: pointer;
  color: #D9E9EF;
}
</style>
