<template>
  <f7-page name="about" no-swipeback login-screen>
    <f7-navbar title="Be A Moderator" back-link="Back"></f7-navbar>
    <f7-block>
      <p><b>Be Our Moderator.</b></p>
    </f7-block>

    <f7-block>
      <p>
        Do you have over 500 followers in your Twitter and Instagram Pages?<br />
        If Yes, please complete the form below to be selected as our Moderator.
      </p>
    </f7-block>

    <div class="align-center">
      <f7-list no-hairlines-md>
        <f7-list-input
          :value="twitter"
          @input="twitter = $event.target.value"
          label="Your Twitter Handle"
          type="text"
          placeholder="Your Twitter Handle"
          clear-button
          required
        ></f7-list-input>

        <f7-list-input
          :value="instagram"
          @input="instagram = $event.target.value"
          label="Your Instagram IG"
          type="text"
          placeholder="Your Instagram IG"
          clear-button
          required
        ></f7-list-input>
      </f7-list>
    </div>

    <div>
      <f7-block>
        <f7-button fill @click="registerModerator">Submit</f7-button>
      </f7-block>
    </div>
  </f7-page>
</template>
<script>
import {
  f7Page,
  f7LoginScreenTitle,
  f7List,
  f7ListItem,
  f7ListButton,
  f7BlockFooter,
  f7ListInput,
} from "framework7-vue";

export default {
  components: {
    f7Page,
    f7LoginScreenTitle,
    f7List,
    f7ListItem,
    f7ListButton,
    f7BlockFooter,
    f7ListInput,
  },
  data() {
    return {
      twitter: null,
      instagram: null,
    };
  },

  methods: {
    registerModerator() {
      var payload = {};
      if (this.twitter != null && this.instagram != null) {
        payload.twitter = this.twitter;
        payload.instagram = this.instagram;
        //console.log("payload", JSON.stringify(payload));
        this.$store.dispatch("processModerator", payload);
        this.$store.commit(
          "setAlertMessage",
          "Your Form received and Email sent to you. Please check your email."
        );
        this.twitter = null;
        this.instagram = null;
      } else {
        this.$store.commit(
          "setAlertMessage",
          "Please provide your Twitter and Instagram details"
        );
      }
    },
    created() {},
  },
};
</script>
<style scoped>
.wrapper {
  text-align: center;
}
</style>