<template>
  <form method="post"
    :action="Admin.subscribe_form && Admin.subscribe_form.form.action || '/subscribe/'"
    :id="Admin.subscribe_form && Admin.subscribe_form.form.id"
    :class="Admin.subscribe_form && Admin.subscribe_form.form.class"
  >
    <div class="form-group">
      <input
        :class="Admin.subscribe_form && Admin.subscribe_form.email_input.class || 'subscribe-email'"
        type="email"
        :name="Admin.subscribe_form && Admin.subscribe_form.email_input.name || 'email'"
        :placeholder=placeholder
      />
      <div
        v-if="Admin.subscribe_form && Admin.subscribe_form.honeypot"
        style="position:absolute; left: -200vw;"
        aria-hidden="true"
      >
        <input
          :name="Admin.subscribe_form && Admin.subscribe_form.honeypot.name || 'nothing'"
        />
      </div>
      <div v-if="Admin.subscribe_form && Admin.subscribe_form.hidden_toggles">
        <input
          v-for="field in Admin.subscribe_form.hidden_toggles"
          type="hidden"
          :name="field.name"
          :value="field.value || 'true'"
          :id="field.id || null"
        />
      </div>
    </div>

    <button id="" class="" type="submit">
      <span>Subscribe</span>
    </button>
  </form>
</template>

<script>
  import Admin from "../../data/admin.yml";

  export default {
    props: {
      placeholder: {
        type: String,
        default: "youremail@example.com"
      }
    },
    computed: {
      Admin() {
        return Admin;
      }
    }
  }
</script>
