<patient-reviews :routes="routes"
                 :events="events"
                 :patient-data="patient"
                 inline-template
>
    <div :class="{'formLoading' : loading}">
        <div class="cardTitle">
            <h3>
                Reviews
            </h3>
            <div class="actions">
                <i class="fa fa-plus mtcOverlay editReviewButton"
                   title="Create a Review"
                   @click="editReviewAction(0)"
                   href="#editReviewForm"
                   data-no-ajax="1"
                ></i>
            </div>
        </div>
        <table v-if="reviews" class="detailsTable">
            <tr>
                <th>Date</th>
                <th>Assigned to</th>
                <th>Status</th>
                <th>Type</th>
                <th>Medium</th>
            </tr>
            <tr v-for="(n, index) in display"
                :key="index"
                v-if="reviews[index]"
            >
                <td v-html="reviews[index].due_date"></td>
                <td v-html="reviews[index].user ? reviews[index].user.name : '-'"></td>
                <td v-html="reviews[index].status"></td>
                <td v-html="reviews[index].type"></td>
                <td v-html="reviews[index].medium"></td>
                <td class="actions">
                    <i class="fa fa-eye mtcOverlay editReviewButton"
                       title="View Review"
                       @click="editReviewAction(reviews[index].id)"
                       href="#editReviewForm"
                       data-no-ajax="1"
                    ></i>
                </td>
            </tr>
        </table>
        <p class="textMuted" v-else>
            <em>No reviews 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="reviews.length"></span>)
            </a>
        </div>
    </div>
</patient-reviews>