@include('backend.layout.globals.vue_validation')

<div class="kt-section kt-section--last" :class="{'kt-section--first': !(validation_errors.length > 0)}">
    <div class="kt-section__body">
        <div v-for="lang in $languages" class="form-group row" :class="{'validated' : errors.has('question-' + lang)}">
            <label class="col-3 col-form-label required">{{ __('main.question') }} (@{{ lang }})</label>
            <div class="col-9">
                <input  type="text" class="form-control" v-model="fData.question[lang]" :name="'question-' + lang" :id="'question-' + lang" :class="{'is-invalid' : errors.has('question-' + lang)}" v-validate="'required'"   data-vv-as="{{ __('main.question') }}"  :placeholder="'{{ __('main.question') }} ' + '(' + lang + ')'">
                <div v-if="errors.has('question-' + lang)" class="invalid-feedback">@{{ errors.first('question-'+lang) }}</div>
            </div>
        </div>
        <div class="form-group row validated" v-for="lang in $languages">
            <label class="col-3 col-form-label required">{{ __('main.answer') }} (@{{ lang }})</label>
            <div class="col-9">
                <quill-editor v-model="fData.answer[lang]" :name="'answer-' + lang" data-vv-as="{{ __('main.answer') }}" :form_errors="errors" :id="'answer-' + lang" v-validate="'required'" ref="myQuillEditor" :options="{}"></quill-editor>
                <span v-if="errors.has('answer-' + lang)" class="invalid-feedback">
                      @{{ errors.first('answer-' + lang) }}
                </span>
            </div>
        </div><!-- Description -->
    </div>
</div>