<template>

<div>
  <div class="Vlt-form__element" v-bind:class="{ 'Vlt-form__element--error': hasError }">
    <div v-for="(question, index) in step.questions" class="radio-button Vlt-radio">
      <label>
        <span class="Vlt-radio__button">
          <input required="required" type="radio" :value=index v-model="answer">
          <span class="Vlt-radio__icon"></span>
        </span>
        {{question}}
      </label>
    </div>

    <small v-if="hasError"class="Vlt-form__element__error">This field is required</small>
    <button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--tertiary Vlt-modal__cancel" v-on:click="reset">Cancel</button>
    <button v-show="lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary Vlt-modal__cancel" v-on:click="reset">Close</button>
    <button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary" v-on:click="validate">Continue</button>
  </div>
</div>

</template> <script>

import eventHub from '../eventHub';

export default {

props: ['step', 'lastStep'],
data: function() {
  return {
    answer: '',
    hasError: false
  };
},
methods: {
  resetFields: function() {
    this.answer = '';
    this.hasError = false;
  },
  reset: function() {
    eventHub.$emit('reset-modal');
  },
  validate: function() {
    if (this.$el.querySelector('input[type="radio"]:checked') !== null) {
      this.hasError = false;
      eventHub.$emit('next-step', this.answer);
      return false;
    } else {
      this.hasError = true;
    }
  }
},
mounted: function() {
  eventHub.$on('reset-modal', this.resetFields);
}

} </script> <style scoped> .radio-button {

margin-bottom: 11px;

} .Vlt-form__element {

@media only screen and (min-width: 576px) {
  width: 450px;
};

} </style>