<patient-weight-track :routes="routes"
                      :events="events"
                      :parent="component"
               inline-template
>
    <div :class="{'formLoading' : loading}">
        <div class="cardTitle">
            <h3>
                Weight Track
            </h3>
            <div class="actions">
                <i class="fa fa-plus" @click="addRecord"></i>
            </div>
        </div>
        <div v-show="add" class="newForm">
            <div class="row"
                 :class="{'errorWrap showError' : errors.date_provided}"
            >
                <label :for="'weightTrackDate' + parent"
                       class="formLabel"
                >
                    Date Provided
                    <span class="formRequired">*</span>
                </label>
                <div class="inputWrap">
                    <input type="text"
                           class="datepicker short"
                           :id="'weightTrackDate' + parent"
                           placeholder="DD/MM/YYYY"
                           autocomplete="off"
                    >
                </div>
                <div class="validationMessage"
                     v-if="errors.date_provided"
                     v-html="errors.date_provided"
                ></div>
            </div>
            <div class="row">
                <label for=""
                       class="formLabel"
                >
                    System
                </label>
                <div>
                    <input type="radio"
                           id="systemMetric"
                           value="1"
                           v-model="record.metric"
                    >
                    <label for="systemMetric">
                        Metric
                    </label>
                </div>
                <div>
                    <input type="radio"
                           id="systemImperial"
                           value="0"
                           v-model="record.metric"
                    >
                    <label for="systemImperial">
                        Imperial
                    </label>
                </div>
            </div>
            <template v-if="record.metric == 1">
                <div class="row"
                     :class="{'errorWrap showError' : errors.height}"
                >
                    <label for="heightCm"
                           class="formLabel"
                    >
                        Height
                        <span class="formRequired">*</span>
                    </label>
                    <div class="inputWrap">
                        <input type="number"
                               class="short"
                               id="heightCm"
                               autocomplete="off"
                               v-model="record.heightCm"
                        >
                        <label for="heightCm"
                               class="formLabel"
                        >
                            cm
                        </label>
                    </div>
                    <div class="validationMessage"
                         v-if="errors.height"
                         v-html="errors.height"
                    ></div>
                </div>
                <div class="row"
                     :class="{'errorWrap showError' : errors.weight}"
                >
                    <label for="weightKg"
                           class="formLabel"
                    >
                        Weight
                        <span class="formRequired">*</span>
                    </label>
                    <div class="inputWrap">
                        <input type="number"
                               class="short"
                               id="weightKg"
                               autocomplete="off"
                               v-model="record.weightKg"
                        >
                        <label for="weightKg"
                               class="formLabel"
                        >
                            kg
                        </label>
                    </div>
                    <div class="validationMessage"
                         v-if="errors.weight"
                         v-html="errors.weight"
                    ></div>
                </div>
            </template>
            <template v-else>
                <div class="row"
                     :class="{'errorWrap showError' : errors.height}"
                >
                    <label for="heightFt"
                           class="formLabel"
                    >
                        Height
                        <span class="formRequired">*</span>
                    </label>
                    <div class="inputWrap">
                        <input type="number"
                               class="short"
                               id="heightFt"
                               autocomplete="off"
                               v-model="record.heightFt"
                        >
                        <label for="heightFt"
                               class="formLabel"
                        >
                            ft
                        </label>
                        <input type="number"
                               class="short"
                               id="heightIn"
                               autocomplete="off"
                               v-model="record.heightIn"
                        >
                        <label for="heightIn"
                               class="formLabel"
                        >
                            in
                        </label>
                    </div>
                    <div class="validationMessage"
                         v-if="errors.height"
                         v-html="errors.height"
                    ></div>
                </div>
                <div class="row"
                     :class="{'errorWrap showError' : errors.weight}"
                >
                    <label for="weightKg"
                           class="formLabel"
                    >
                        Weight
                        <span class="formRequired">*</span>
                    </label>
                    <div class="inputWrap">
                        <input type="number"
                               class="short"
                               id="weightSt"
                               autocomplete="off"
                               v-model="record.weightSt"
                        >
                        <label for="weightSt"
                               class="formLabel"
                        >
                            st
                        </label>
                        <input type="number"
                               class="short"
                               id="weightLb"
                               autocomplete="off"
                               v-model="record.weightLb"
                        >
                        <label for="weightLb"
                               class="formLabel"
                        >
                            lb
                        </label>
                    </div>
                    <div class="validationMessage"
                         v-if="errors.weight"
                         v-html="errors.weight"
                    ></div>
                </div>
            </template>
            <div class="row">
                <div v-if="errors['general']"
                     class="validationMessage"
                >
                    <span v-html="errors['general']"></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="cancel"
                >
            </div>
        </div>
        <template v-if="!add">
            <div class="row">
                <div class="success"
                     v-if="success"
                >
                    <span v-html="success"></span>
                </div>
            </div>
            <div class="recordsList" v-if="records.length">
                <table class="detailsTable">
                    <tr>
                        <th>Date</th>
                        <th>Weight (kg)</th>
                        <th>BMI</th>
                        <th>Time span</th>
                        <th></th>
                    </tr>
                    <tr v-for="(record, index) in records" v-if="showingAll || index + 1 <= display">
                        <td v-html="record.date_provided"></td>
                        <td>
                            <span v-html="record.weight"></span>
                            <span v-if="index < records.length - 1"
                                  class="smallText"
                            >
                                <span v-if="record.weight_diff > 0"
                                      class="red"
                                >
                                    (+<span v-html="record.weight_diff"></span>)
                                </span>
                                <span v-else-if="record.weight_diff < 0"
                                      class="green"
                                >
                                    (<span v-html="record.weight_diff"></span>)
                                </span>
                                <span v-else
                                      class="grey"
                                >
                                    (+/- 0)
                                </span>
                            </span>
                        </td>
                        <td>
                            <span v-html="record.bmi"></span>
                            <span v-if="index < records.length - 1"
                                      class="smallText"
                            >
                                <span v-if="record.bmi_diff > 0"
                                      class="red"
                                >
                                    (+<span v-html="record.bmi_diff"></span>)
                                </span>
                                <span v-else-if="record.bmi_diff < 0"
                                      class="green"
                                >
                                    (<span v-html="record.bmi_diff"></span>)
                                </span>
                                <span v-else
                                      class="grey"
                                >
                                    (+/- 0)
                                </span>
                            </span>
                        </td>
                        <td>
                            <span v-if="record.time_span > 0" v-html="record.time_span + ' days'"></span>
                            <span v-else>-</span>
                        </td>
                        <td>
                            <div v-if="deleteIndex == index"
                                 class="red pointer"
                                 @click="deleteRecord(record.id)"
                            >
                                Confirm Deletion
                            </div>
                            <div class="actions" v-else>
                                <i class="fa fa-trash red deleteIcon"
                                   @click="showConfirmDeletion(index)"
                                ></i>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <p class="textMuted" v-else>
                <em>No weight track for this patient</em>
            </p>
            <div class="loadMore" v-if="canShowAll">
                <a href="#" @click.prevent="showAll">
                    Show all... (<span v-html="display"></span> of <span v-html="records.length"></span>)
                </a>
            </div>
        </template>
    </div>
</patient-weight-track>