<patient-consultations :routes="routes"
                  :events="events"
                  inline-template
>
    <div :class="{'formLoading' : loading}">
        <div class="cardTitle">
            <h3>
                Appointments
            </h3>
        </div>
        <div class="recordsList" v-if="records.length">
            <table class="detailsTable">
                <tr>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Host</th>
                    <th>Status</th>
                </tr>
                <tr v-for="(record, index) in records" v-if="showingAll || index + 1 <= display">
                    <td v-html="record.date"></td>
                    <td v-html="record.time"></td>
                    <td v-html="record.user"></td>
                    <td v-html="record.status"
                        class="capitalize"
                    ></td>
                </tr>
            </table>
        </div>
        <p class="textMuted" v-else>
            <em>No consultations 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>
    </div>
</patient-consultations>