@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('title-' + lang)}">
            <label class="col-2 col-form-label">{{ __('main.title') }} (@{{ lang }})</label>
            <div class="col-10">
                <input  type="text" class="form-control" v-model="fData.title[lang]" :name="'title-' + lang" :id="'title-' + lang" :class="{'is-invalid' : errors.has('title-' + lang)}"  data-vv-as="{{ __('main.title') }}"  :placeholder="'{{ __('main.title') }} ' + '(' + lang + ')'">
                <div v-if="errors.has('title-' + lang)" class="invalid-feedback">@{{ errors.first('title-'+lang) }}</div>
            </div>
        </div>
        <div class="form-group row" :class="{'validated' : errors.has('image')}">
            <label class="col-2 col-form-label">{{ __('main.image') }}</label>
            <div class="col-lg-10">
                <div class="kt-avatar kt-avatar--outline" id="kt_user_avatar_4">
                    <div class="kt-avatar__holder" :style="'background-image:url({{asset('/'.'storage')}}/'+fData.image+')'"></div>
                    <label class="kt-avatar__upload" data-toggle="kt-tooltip" data-original-title="{{trans('main.image')}}">
                        <i class="fa fa-pen"></i>
                        <input id='image' type="file" name="image" class="form-control" :class="{'is-invalid' : errors.has('image')}" data-vv-as="{{ __('main.image') }}" ref="image" placeholder="{{ __('main.image') }}" accept=".png, .jpg, .jpeg">
                    </label>
                </div>
                <span class="form-text text-muted">{{ __('main.image') }}</span>
                <span class="form-text text-muted">{{ __('main.allowed_extensions') }}: .png, .jpg, .jpeg, .svg</span>
            </div>
        </div>
    </div>
</div>