<patient-bp-track :routes="routes"
                  :events="events"
                  :parent="component"
                  :initial-records="(bootstrap && bootstrap.bp) ? bootstrap.bp : []"
                  :today="(bootstrap && bootstrap.todayDate) ? bootstrap.todayDate : null"
                  inline-template
>
    <div :class="{'formLoading' : loading}">
        <div class="cardTitle">
            <h3>
                BP 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="'bpTrackDate' + parent"
                       class="formLabel"
                >
                    Date Provided
                    <span class="formRequired">*</span>
                </label>
                <div class="inputWrap">
                    <input type="text"
                           class="datepicker short"
                           :id="'bpTrackDate' + 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"
                 :class="{'errorWrap showError' : errors.low}"
            >
                <label for="bpLow"
                       class="formLabel"
                >
                    Low
                    <span class="formRequired">*</span>
                </label>
                <div class="inputWrap">
                    <input type="number"
                           class="short"
                           id="bpLow"
                           autocomplete="off"
                           v-model="record.low"
                    >
                </div>
                <div class="validationMessage"
                     v-if="errors.low"
                     v-html="errors.low"
                ></div>
            </div>
            <div class="row"
                 :class="{'errorWrap showError' : errors.high}"
            >
                <label for="bpHigh"
                       class="formLabel"
                >
                    High
                    <span class="formRequired">*</span>
                </label>
                <div class="inputWrap">
                    <input type="number"
                           class="short"
                           id="bpHigh"
                           autocomplete="off"
                           v-model="record.high"
                    >
                </div>
                <div class="validationMessage"
                     v-if="errors.high"
                     v-html="errors.high"
                ></div>
            </div>
            <div class="row"
                 :class="{'errorWrap showError' : errors.heart_rate}"
            >
                <label for="bpHeartRate"
                       class="formLabel"
                >
                    Heart Rate
                    <span class="formRequired">*</span>
                </label>
                <div class="inputWrap">
                    <input type="number"
                           class="short"
                           id="bpHeartRate"
                           autocomplete="off"
                           v-model="record.heart_rate"
                    >
                </div>
                <div class="validationMessage"
                     v-if="errors.heart_rate"
                     v-html="errors.heart_rate"
                ></div>
            </div>
            <div class="row"
                 :class="{'errorWrap showError' : errors.file}"
            >
                <label :for="'bpFile' + parent"
                       class="formLabel"
                >
                    File
                    <span class="formRequired">*</span>
                </label>
                <div class="inputWrap">
                    <input type="file"
                           class="short"
                           :id="'bpFile' + parent"
                           autocomplete="off"
                    >
                </div>
                <div class="validationMessage"
                     v-if="errors.file"
                     v-html="errors.file"
                ></div>
            </div>
            <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-show="!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>Blood pressure</th>
                        <th>Heart rate</th>
                        <th>File</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.low"></span> /
                            <span v-html="record.high"></span>
                        </td>
                        <td v-html="record.heart_rate"></td>
                        <td>
                            <i class="fa fa-image mtcOverlay bpTrackImage"
                               v-if="record.fileURL"
                               :href="record.fileURL"
                               data-is-image="1"
                            ></i>
                        </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 BP 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-bp-track>
