<patient-messages :routes="routes"
                  :events="events"
                  inline-template
>
    <div :class="{'formLoading' : loading}">
        <div class="cardTitle">
            <h3>
                Messages
            </h3>
            <div class="actions">
                <a :href="routes['admin-patient-messages-create-thread']"
                   target="_blank"
                >
                    <i class="fa fa-plus"
                       title="Create New Thread"
                    >
                    </i>
                </a>
            </div>
        </div>
        <div class="recordsList" v-if="records.length">
            <table class="detailsTable">
                <template v-for="(record, index) in records"
                          v-if="showingAll || index + 1 <= display"
                >
                    <tr>
                        <td colspan="2"
                            @click="toggleMessages(index)"
                            class="pointer threadHeader"
                        >
                            <p>
                                Thread <span v-html="record.messages.length"
                                             class="countBubble"
                                ></span>
                            </p>
                            <p class="detailsText">
                                Created by: <span v-html="record.author"></span>
                                @ <span v-html="record.date"></span>
                            </p>
                        </td>
                        <td class="viewThreadCell">
                            <a :href="record.viewUrl"
                               target="_blank"
                            >
                                <i class="fa fa-eye"></i>
                            </a>
                        </td>
                    </tr>
                    <tr v-for="(message, messageIndex) in record.messages"
                        v-show="record.visible"
                    >
                        <td>
                            <p>
                                <span v-html="message.author"></span>
                            </p>
                            <p class="detailsText">
                                @ <span v-html="message.date"></span>
                            </p>
                        </td>
                        <td colspan="2">
                            <div v-html="message.text"></div>
                            <strong v-if="message.private">
                                Private
                            </strong>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3"
                            class="noBorder"
                        ></td>
                    </tr>
                </template>
            </table>
        </div>
        <p class="textMuted" v-else>
            <em>No messages 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-messages>