@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 validated">
            <label class="col-2 col-form-label required">{{ __('main.name') }}</label>
            <input-component v-validate="'required'" v-model="fData.name" :name="'name'" input_type="text"   input_class="col-10" :form_errors="errors" :trans="'{{ __("main.name") }}'"></input-component>
        </div><!-- name -->

        <div class="form-group row validated">
            <label class="col-2 col-form-label required">{{ __('main.email') }}</label>
            <input-component v-validate="'required'" v-model="fData.email" :name="'email'" input_type="text"   input_class="col-10" :form_errors="errors" :trans="'{{ __("main.email") }}'"></input-component>
        </div><!-- email -->

        <div class="form-group row validated">
            <label class="col-2 col-form-label required">{{ __('main.phone') }}</label>
            <input-component v-validate="'required'" v-model="fData.phone" :name="'phone'" input_type="number"   input_class="col-10" :form_errors="errors" :trans="'{{ __("main.phone") }}'"></input-component>
        </div><!-- phone -->

        {{--
        <div class="form-group row" :class="{'validated' : errors.has('image')}">
            <label class="col-3 col-form-label">{{ __('main.image') }}</label>
            <div class="col-9">
                <input data-intro="add_user_image" data-description = "Add User Image" type="file" id="profile-image"
                :class="{'is-invalid' : errors.has('image')}" placeholder="{{ __('main.image') }}">
                <div v-if="errors.has('image')" class="invalid-feedback">@{{ errors.first('image') }}</div>
                <img :src="fData.image" width='150' class="d-block">
            </div>
        </div>
        --}}
        <div class="form-group row" :class="{'validated' : errors.has('password')}">
            <label class="col-2 col-form-label">{{ __('main.password') }}</label>
            <div class="col-10">
                <input   type="password" class="form-control" :class="{'is-invalid' : errors.has('password')}" v-validate="{{ $action == 'create' ? "'required'" : '' }}" ref="password" name="password" data-vv-as="{{ __('main.password') }}" v-model="fData.password" placeholder="{{ __('main.password') }}">
                <div v-if="errors.has('password')" class="invalid-feedback">@{{ errors.first('password') }}</div>
            </div>
        </div>
        <div class="form-group row" :class="{'validated' : errors.has('password_confirmation')}">
            <label class="col-2 col-form-label">{{ __('main.password_confirmation') }}</label>
            <div class="col-10">
                <input   type="password" class="form-control" :class="{'is-invalid' : errors.has('password_confirmation')}" v-validate="{{ $action == 'create' ? "'required|confirmed:password'" : '' }}" name="password_confirmation" data-vv-as="{{ __('main.password_confirmation') }}" v-model="fData.password_confirmation" placeholder="{{ __('main.password_confirmation') }}">
                <div v-if="errors.has('password_confirmation')" class="invalid-feedback">@{{ errors.first('password_confirmation') }}</div>
            </div>
        </div>
    </div>
</div>