<template>
    <form>
        <div class="row">
            <div class="col-md-6">
                <!--Label: Prefix, Attributes: prefix-->
                <div class="form-group">
                    <label for="prefix" class=" col-form-label">Prefix</label>
                    <div class="">
                        <input type="text" class="form-control" id="prefix"
                               v-model="prefix"
                               name="prefix"
                               :class="{ 'is-invalid' : errors.prefix }" autocomplete="off">
                        <div class="invalid-feedback" v-if="errors.prefix">
                            <strong>{{ errors.prefix.toString() }}</strong>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <!--Label: First Name, Attributes: firstname-->
                <div class="form-group">
                    <label for="firstname" class=" col-form-label">First Name</label>
                    <div class="">
                        <input type="text" class="form-control" id="firstname"
                               v-model="firstname"
                               name="firstname"
                               :class="{ 'is-invalid' : errors.firstname }" autocomplete="off">
                        <div class="invalid-feedback" v-if="errors.firstname">
                            <strong>{{ errors.firstname.toString() }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!--Label: Middle Name, Attributes: middlename-->
            <div class="form-group col-md-6">
                <label for="middlename" class="col-form-label">Middle Name</label>
                <div class="">
                    <input type="text" class="form-control" id="middlename"
                           v-model="middlename"
                           name="middlename"
                           :class="{ 'is-invalid' : errors.middlename }" autocomplete="off">
                    <div class="invalid-feedback" v-if="errors.middlename">
                        <strong>{{ errors.middlename.toString() }}</strong>
                    </div>
                </div>
            </div>
            <div class="row"><!--Label: Personal Number, Attributes: phonenumber-->
                <div class="form-group col-md-6">
                    <label for="phonenumber" class=" col-form-label">Personal Number</label>
                    <div class="">
                        <input type="text" class="form-control" id="phonenumber"
                               v-model="phonenumber"
                               name="phonenumber"
                               :class="{ 'is-invalid' : errors.phonenumber }" autocomplete="off">
                        <div class="invalid-feedback" v-if="errors.phonenumber">
                            <strong>{{ errors.phonenumber.toString() }}</strong>
                        </div>
                    </div>
                </div>
                <!--Label: KRA PIN, Attributes: krapin-->
                <div class="form-group col-md-6">
                    <label for="krapin" class=" col-form-label">KRA PIN</label>
                    <div class="">
                        <input type="text" class="form-control" id="krapin"
                               v-model="krapin"
                               name="krapin"
                               :class="{ 'is-invalid' : errors.krapin }" autocomplete="off">
                        <div class="invalid-feedback" v-if="errors.krapin">
                            <strong>{{ errors.krapin.toString() }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</template>

<script>
    export default {
        name: "createEmployee",
        data() {
            return {
                errors: '',
                prefix: '',
                firstname: '',
                middlename: '',
                phonenumber: '',
                krapin: '',
            }
        },
    }
</script>

<style scoped>

</style>