@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 class="form-group row" :class="{'validated' : errors.has('name')}">
            <label class="col-2 col-form-label required">{{ __('main.name') }}</label>
            <div class="col-10">
                <input  type="text" class="form-control" v-model="fData.name" :name="'name'" :id="'name'" :class="{'is-invalid' : errors.has('name')}" v-validate="'required'"   data-vv-as="{{ __('main.name') }}"  :placeholder="'{{ __('main.name') }}'">
                <div v-if="errors.has('name')" class="invalid-feedback">@{{ errors.first('name') }}</div>
            </div>
        </div>
        <div class="form-group row" :class="{'validated' : errors.has('description')}">
            <label class="col-2 col-form-label required">{{ __('main.description') }}</label>
            <div class="col-10">
                <textarea :name="'description'" v-model="fData.description" id="description" class="form-control" cols="30" rows="10"></textarea>
                <div v-if="errors.has('description')" class="invalid-feedback">@{{ errors.first('description') }}</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>