<template>
    <form @submit.prevent="submit">
        <div class="form-group row">
          <div class="col-md-12">
            <label for="name">Option</label>
            <input type="option" class="form-control" name="option" id="option" v-model="fields.option" placeholder="Enter option..."/>
            <div v-if="errors && errors.option" class="text-danger">{{ errors.option[0] }}</div>
          </div>
          <div class="col-md-12">
            <label for="name">Response</label>
            <textarea class="form-control" name="response" id="response" v-model="fields.response" placeholder="Type response..."></textarea>
            <div v-if="errors && errors.response" class="text-danger">{{ errors.response[0] }}</div>
          </div>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success btn-round">Save</button>
            <button type="reset" class="btn btn-danger btn-round">Clear</button>
        </div>          
    </form>
</template>

<script>
import FormMixin from '../shared/FormMixin';
import Multiselect from 'vue-multiselect';

// register globally
Vue.component('multiselect', Multiselect)


export default {
  mixins: [ FormMixin ],
  props: ['data'],
  components: { Multiselect },
  data() {
    return {
      'action': '/fc/options/update',
      'text': 'Option updated succesfully',
      'redirect': '',
      types: ['Open','Closed'],
      fields: {
        id:this.data.id,
        option:this.data.option,
        response:this.data.response,
      }
    }
  },
  mounted() {
    this.fields.id=this.data.id;
    this.fields.option=this.data.option;
    this.fields.response=this.data.response;
  }
}

</script>
<!--Add Multiselect CSS. Can be added as a static asset or inside a component. -->
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>