<patient-notes :routes="routes"
               :events="events"
               inline-template
>
    <div :class="{'formLoading' : loading}">
        <div class="cardTitle">
            <h3>Patient Notes</h3>
            <div class="actions">
                <i class="fa fa-plus mtcOverlay addPatientNoteButton"
                   title="Add a note"
                   @click="addNoteAction"
                   href="#addPatientNote"
                   data-no-ajax="1"
                ></i>
            </div>
        </div>
        <table v-if="notes" class="detailsTable">
            <tr>
                <th>Author</th>
                <th>Note</th>
            </tr>
            <tr v-for="(n, index) in display" :key="index" v-if="notes[index]">
                <td>
                    <div v-html="notes[index].admin_user ? notes[index].admin_user.name : '-'"></div>
                    <div v-html="'@ ' + notes[index].datetime"
                         class="detailsText"
                    ></div>
                </td>
                <td>
                    <span v-if="notes[index].order_id"
                          v-html="'[Order ID: ' + notes[index].order_id + ']'"
                    ></span>
                    <p v-html="notes[index].content"></p>
                </td>
            </tr>
        </table>
        <p class="textMuted" v-else>
            <em>No notes for this patient</em>
        </p>
        <div class="loadMore" v-if="canLoadMore">
            <a href="#" @click.prevent="loadMore">
                Load more... (<span v-html="display"></span> of <span v-html="notes.length"></span>)
            </a>
        </div>
    </div>
</patient-notes>