<patient-files :routes="routes"
               :events="events"
               inline-template
>
    <div :class="{'formLoading' : loading}">
        <div class="cardTitle">
            <h3>
                Files
            </h3>
            <div class="actions">
                <i class="fa fa-plus" @click="editRecord"></i>
            </div>
        </div>
        <div class="filterBlock">
            <a href="#" @click.prevent="toggleFilter">
                Filter
                <i class="fa fa-filter smallText"></i>
            </a>
            <div v-show="filterOpen"
                 class="newForm"
            >
                <div style="display: inline-block">
                    <div v-for="(type, name) in types">
                        <input type="checkbox"
                               :id="'file_type_' + '_' + name"
                               :value="name"
                               v-model="filter.types"
                        >
                        <label v-html="type"
                               :for="'file_type_' + '_' + name"
                        ></label>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="editMode" class="newForm">
            <div class="row"
                 :class="{'errorWrap showError' : errors.date_provided}"
            >
                <label for="fileDate"
                       class="formLabel"
                >
                    Date Provided
                    <span class="formRequired">*</span>
                </label>
                <div class="inputWrap">
                    <input type="text"
                           class="datepicker short"
                           id="fileDate"
                           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.title}"
            >
                <label for="fileName"
                       class="formLabel"
                >
                    Name
                    <span class="formRequired">*</span>
                </label>
                <div class="inputWrap">
                    <input type="text"
                           id="fileName"
                           autocomplete="off"
                           v-model="record.title"
                    >
                </div>
                <div class="validationMessage"
                     v-if="errors.title"
                     v-html="errors.title"
                ></div>
            </div>
            <div class="row"
                 :class="{'errorWrap showError' : errors.type}"
            >
                <label for="fileType"
                       class="formLabel"
                >
                    Type
                    <span class="formRequired">*</span>
                </label>
                <div class="inputWrap">
                    <select id="fileType"
                            v-model="record.type"
                    >
                        <option v-for="(name, value) in types"
                                v-html="name"
                                :value="value"
                        ></option>
                    </select>
                </div>
                <div class="validationMessage"
                     v-if="errors.type"
                     v-html="errors.type"
                ></div>
            </div>
            <div class="row"
                 :class="{'errorWrap showError' : errors.file}"
            >
                <label for="bpFile"
                       class="formLabel"
                >
                    File
                    <span class="formRequired">*</span>
                </label>
                <div class="inputWrap">
                    <input type="file"
                           class="short"
                           id="patientFile"
                           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="!editMode">
            <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>Type</th>
                        <th>Name</th>
                        <th>Ext.</th>
                        <th>File</th>
                        <th></th>
                    </tr>
                    <tr v-for="(record, index) in filteredRecords" v-if="showRow(index)">
                        <td v-html="record.date_provided"></td>
                        <td v-html="typeName(record.type)"></td>
                        <td v-html="record.title"></td>
                        <td v-html="record.extension"
                            class="uppercase"
                        ></td>
                        <td>
                            <template v-if="record.fileURL">
                                <i class="fa fa-image mtcOverlay bpTrackImage"
                                   v-if="isImage(record.extension)"
                                   :href="record.fileURL"
                                   data-is-image="1"
                                ></i>
                                <a v-else
                                   :href="record.fileURL"
                                   target="_blank"
                                >
                                    <i class="fa fa-download"></i>
                                </a>
                            </template>
                        </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>
                                <i class="fa fa-pencil"
                                   @click="editRecord(record)"
                                ></i>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <p class="textMuted" v-else>
                <em>No files 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="filteredRecords.length"></span>)
                </a>
            </div>
        </template>
    </div>
</patient-files>