<template>
    <form @submit.prevent="submit">
        <div class="form-group row">
          <div class="col-md-12">
            <label for="name">Language</label>
            <input type="text" class="form-control" name="language" id="language" v-model="fields.language" placeholder="Enter language..."/>
            <div v-if="errors && errors.language" class="text-danger">{{ errors.language[0] }}</div>
          </div>
          
          <div class="col-md-12">
            <label for="name">Cue</label>
            <input type="text" class="form-control" name="cue" id="cue" v-model="fields.cue" placeholder="Enter cue e.g Yes/Ndio..."/>
            <div v-if="errors && errors.cue" class="text-danger">{{ errors.cue[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/language/update',
      'text': 'Language added succesfully',
      'redirect': '',
      fields: {
        id: this.data.id,
        language: this.data.language,
        cue: this.data.cue
      }
    }
  },
  mounted() {
    this.fields.id= this.data.id;
    this.fields.language= this.data.language;
    this.fields.cue= this.data.cue;
  }
}

</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>