<template>

    <section>

        <single-checkbox
            id="edit_address"
            label="The address is not quite right and I would like to edit it."
            v-model="checkbox_is_editable"
        ></single-checkbox>


        <fieldset :disabled="is_editable == 0">

            <div class="row fieldIcon iconAddress" :class="errors.practice_name ? 'errorWrap': ''">
                <div class="inputWrap">
                    <input
                            type="text"
                            id="practice_name"
                            placeholder="Practice Name"
                            v-model="formdata.practice_name"
                            @input="clearErrors()"
                    >
                    <div class="validationMessage" v-if="errors.practice_name" v-html="errors.practice_name"></div>
                </div><!-- .inputWrap -->
            </div><!-- .row -->


            <div class="row fieldIcon iconAddress" :class="errors.address_1 ? 'errorWrap': ''">
                <div class="inputWrap">
                    <input
                            type="text"
                            id="address_1"
                            placeholder="Address line 1"
                            v-model="formdata.address_1"
                            @input="clearErrors()"
                    >
                    <div class="validationMessage" v-if="errors.address_1" v-html="errors.address_1"></div>
                </div><!-- .inputWrap -->
            </div><!-- .row -->


            <div class="row fieldIcon iconAddress" :class="errors.address_2 ? 'errorWrap': ''">
                <div class="inputWrap">
                    <input
                            type="text"
                            id="address_2"
                            placeholder="Address line 2"
                            v-model="formdata.address_2"
                            @input="clearErrors()"
                    >
                    <div class="validationMessage" v-if="errors.address_2" v-html="errors.address_2"></div>
                </div><!-- .inputWrap -->
            </div><!-- .row -->

            
            <div class="formGrid">


                <div class="fieldLeft">
                    <div class="row fieldIcon iconAddress" :class="errors.city ? 'errorWrap': ''">
                        <div class="inputWrap">
                            <input
                                    type="text"
                                    id="city"
                                    placeholder="City"
                                    v-model="formdata.city"
                                    @input="clearErrors()"
                            >
                            <div class="validationMessage" v-if="errors.city" v-html="errors.city"></div>
                        </div><!-- .inputWrap -->
                    </div><!-- .row -->
                </div> <!-- .fieldLeft -->


                <div class="fieldRight">
                    <div class="row fieldIcon iconPostcode" :class="errors.postcode ? 'errorWrap': ''">
                        <div class="inputWrap">
                            <input
                                    type="text"
                                    id="postcode"
                                    placeholder="Postcode"
                                    v-model="formdata.postcode"
                                    @input="clearErrors()"
                            >
                            <div class="validationMessage" v-if="errors.postcode" v-html="errors.postcode"></div>
                        </div><!-- .inputWrap -->
                    </div><!-- .row -->
                </div> <!-- .fieldRight -->


            </div> <!-- .formGrid -->

        </fieldset>

    </section>

</template>


<script>

export default {

    props: {
        formdata: {
            default: function() {
                return {};
            },
        },
        errors: {
            default: function() {
                return {};
            },
        },
    },


    data: function() {
        return {
            checkbox_is_editable: 0,
        }
    },


    computed: {

        is_editable: function() {
            if (this.formdata.set_is_editable) {
                this.checkbox_is_editable = 1;
                this.formdata.set_is_editable = false;
            }

            return this.checkbox_is_editable;
        }

    },


    methods: {

        clearErrors: function() {
            this.$emit('clear-errors');
        },

    },

}

</script>
