<patient-event-log :routes="routes"
                   :events="events"
                   inline-template
>
    <div :class="{'formLoading' : loading}">
        <div class="cardTitle">
            <h3>
                Patient History
            </h3>
        </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>
                    <div v-for="(type, name) in types">
                        <input type="checkbox"
                               :id="'log_type_' + '_' + name"
                               :value="name"
                               v-model="filter.types"
                        >
                        <label v-html="type"
                               :for="'log_type_' + '_' + name"
                        ></label>
                    </div>
                </div>
                <div class="row">
                    <input type="text"
                           placeholder="ID"
                           class="short"
                           v-model="filter.id"
                    >
                </div>
            </div>
        </div>
        <div class="recordsList" v-if="records.length">
            <table class="detailsTable">
                <tr>
                    <th>Date</th>
                    <th>Actor</th>
                    <th>Type</th>
                    <th>Action</th>
                    <th>ID</th>
                    <th>Details</th>
                    <th></th>
                </tr>
                <tr v-for="(record, index) in filteredRecords" v-if="showRow(index)">
                    <td v-html="record.datetime"></td>
                    <td v-html="record.details.actor_name"></td>
                    <td v-html="typeName(record.subject)"></td>
                    <td v-html="record.action"
                        class="capitalize"
                    ></td>
                    <td v-html="record.loggable_id"></td>
                    <td v-html="record.description"></td>
                    <td>
                        <div class="actions">
                            <i class="fa fa-eye mtcOverlay eventLogModalButton"
                               title="View Event"
                               @click="viewRecord(record)"
                               href="#eventLogModal"
                               data-no-ajax="1"
                            ></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>
        <div v-if="logEventOpen" id="eventLogModal">
            <div>
                <h4>
                    Event basics
                </h4>
                <table class="detailsTable">
                    <tr>
                        <td>Event ref:</td>
                        <td v-html="record.id"></td>
                    </tr>
                    <tr>
                        <td>Date:</td>
                        <td v-html="record.datetime"></td>
                    </tr>
                    <tr>
                        <td>Type:</td>
                        <td v-html="typeName(record.subject)"></td>
                    </tr>
                    <tr>
                        <td>Action:</td>
                        <td v-html="record.action"
                            class="capitalize"
                        ></td>
                    </tr>
                    <tr>
                        <td>ID:</td>
                        <td v-html="record.loggable_id"></td>
                    </tr>
                    <tr>
                        <td>Description:</td>
                        <td v-html="record.description"></td>
                    </tr>
                </table>
                <h4>
                    Details
                </h4>
                <table class="detailsTable">
                    <tr v-for="(item, key) in record.details">
                        <td v-html="normaliseDetailsKey(key)"
                            class="capitalize"
                        ></td>
                        <td>
                            <pre v-html="normaliseDetailsValue(item)"></pre>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</patient-event-log>