<div class="js-vue-environment">
    <patient-attributes :attributes="{{ attributes|json_encode }}"
                       :routes="{{ routes|json_encode }}"
                       inline-template
    >
        <div :class="{'formLoading' : loading}" class="newForm">
            <div v-show="edit">
                <div v-for="(attribute, name) in attributes"
                     class="row"
                >
                    <label :for="'attribute_' + name"
                           class="formLabel"
                           v-show="!(attribute.type === 'checkbox' && !attribute.variations)"
                    >
                        <span v-html="attribute.name"></span>
                        <span class="formRequired"
                              v-if="attribute.required"
                        >*</span>
                    </label>

                    <div class="inputWrap">
                        <template v-if="attribute.type === 'text'">
                            <input type="text"
                                   :id="'attribute_' + name"
                                   v-model="values[name]"
                            >
                        </template>
                        <template v-if="attribute.type === 'textarea'">
                            <textarea type="text"
                                      :id="'attribute_' + name"
                                      class="patientAttributesTextarea"
                            ></textarea>
                        </template>
                        <template v-if="attribute.type === 'number'">
                            <input type="number"
                                   :id="'attribute_' + name"
                                   v-model="values[name]"
                            >
                        </template>
                        <template v-if="attribute.type === 'date'">
                            <input type="text"
                                   class="datepicker short"
                                   :id="'attribute_' + name"
                                   placeholder="DD/MM/YYYY"
                            >
                        </template>
                        <template v-if="attribute.type === 'datetime'">
                            <input type="text"
                                   class="datepicker short"
                                   :id="'attribute_' + name"
                                   placeholder="DD/MM/YYYY"
                            >
                            <input type="text"
                                   class="short"
                                   placeholder="HH:MM"
                                   :id="'attribute_' + name + '_time'"
                                   v-model="values[name + '_time']"
                            >
                        </template>
                        <template v-if="attribute.type === 'checkbox'">
                            <template v-if="attribute.variations">
                                <div style="display: inline-block">
                                    <div v-for="(variation, index) in attribute.variations">
                                        <input type="checkbox"
                                               :id="'variation_' + name + '_' + index"
                                               :value="variation"
                                               v-model="values[name]"
                                        >
                                        <label v-html="variation"
                                               :for="'variation_' + name + '_' + index"
                                        ></label>
                                    </div>
                                </div>
                            </template>
                            <template v-else>
                                <input type="checkbox"
                                       :id="'attribute_' + name"
                                       :true-value="1"
                                       :false-value="0"
                                       v-model="values[name]"
                                >
                                <label v-html="attribute.name"
                                       :for="'attribute_' + name"
                                ></label>
                            </template>
                        </template>
                        <template v-if="attribute.type === 'radio'">
                            <div style="display: inline-block">
                                <div v-for="(variation, index) in attribute.variations">
                                    <input type="radio"
                                           :id="'variation_' + name + '_' + index"
                                           :value="variation"
                                           v-model="values[name]"
                                    >
                                    <label v-html="variation"
                                           :for="'variation_' + name + '_' + index"
                                           style="width: 80%"
                                    ></label>
                                </div>
                            </div>
                        </template>
                        <template v-if="attribute.type === 'select'">
                            <div>
                                <select :id="'variation_' + name"
                                        v-model="values[name]"
                                >
                                    <option v-for="(variation, index) in attribute.variations"
                                            v-html="variation"
                                            :value="variation"
                                    ></option>
                                </select>
                            </div>
                        </template>
                        <div v-if="errors[name]"
                             class="validationMessage"
                        >
                            <span v-html="errors[name]"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div v-if="errors['general']"
                         class="validationMessage"
                    >
                        <span v-html="errors['general']"></span>
                    </div>
                    <div class="success"
                         v-if="success"
                    >
                        <span v-html="success"></span>
                    </div>
                </div>
                <div class="row btn-section">
                    <input type="button" class="btn button" value="Save" @click="store">
                    <input type="button"
                           class="btn button"
                           value="Cancel"
                           id="btn_cancel"
                           @click="toggleEdit(false)"
                    >
                </div>
            </div>
            <div v-show="!edit">
                <div class="row">
                    <table class="detailsTable">
                        <tr v-for="(attribute, name) in attributes">
                            <td class="fieldName" v-html="attribute.name"></td>
                            <td class="fieldValue" v-html="getValue(name)"></td>
                        </tr>
                    </table>
                </div>
                <div class="row btn-section">
                    <input type="button" class="btn button" value="Edit" @click="toggleEdit(true)">
                </div>
            </div>
        </div>
    </patient-attributes>
</div>