<patient-consultations :routes="routes"
                  :events="events"
                  :initial-consultations="(
                      bootstrap && bootstrap.responses && bootstrap.responses['admin-patient-consultations-load']
                          ? (bootstrap.responses['admin-patient-consultations-load'].consultations || [])
                          : []
                  )"
                  :initial-today="(
                      bootstrap && bootstrap.responses && bootstrap.responses['admin-patient-consultations-load']
                          ? bootstrap.responses['admin-patient-consultations-load'].todayDate || null
                          : null
                  )"
                  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>ID</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Host</th>
                    <th>Status</th>
                    <th>Transcript</th>
                </tr>
                <template v-for="(record, index) in records" v-if="showingAll || index + 1 <= display">
                    <tr>
                        <td>
                            <a :href="record.viewURL" target="_blank" v-html="record.wisebee_id"></a>
                        </td>
                        <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>
                        <td>
                            <template v-if="record.transcript">
                                <div class="actions">
                                    <i class="fa fa-file-text-o mtcOverlay transcriptIcon transcriptModalButton"
                                       :class="{ 'is-pending': !record.transcript.is_approved }"
                                       :title="record.transcript.is_approved
                                           ? ('Transcript — Approved ' + record.transcript.approved_at)
                                           : 'Transcript — Not yet approved'"
                                       @click="viewTranscript(record.transcript)"
                                       href="#transcriptModal"
                                       data-no-ajax="1"
                                    ></i>
                                </div>
                            </template>
                            <span v-else class="textMuted">&mdash;</span>
                        </td>
                    </tr>
                </template>
            </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 v-if="transcriptOpen && selectedTranscript" id="transcriptModal" class="transcriptModal">
            <div class="transcriptModal__header">
                <h4>Consultation Transcript</h4>
                <a :href="transcriptPdfUrl(selectedTranscript.id)"
                   target="_blank"
                   title="Download PDF"
                   class="transcriptModal__download"
                >
                    <i class="fa fa-download"></i>
                </a>
            </div>
            <div class="transcriptModal__status">
                <i v-if="selectedTranscript.is_approved" class="fa fa-check"></i>
                <i v-else class="fa fa-hourglass-half"></i>
                <span v-if="selectedTranscript.is_approved">
                    Approved <span v-html="selectedTranscript.approved_at"></span>
                </span>
                <span v-else>Not yet approved</span>
            </div>
            <div v-if="selectedTranscript.notes" class="transcriptModal__notes">
                <strong>Prescriber notes:</strong>
                <span v-html="escapeText(selectedTranscript.notes)"></span>
            </div>
            <div class="transcriptModal__transcript" v-html="formattedTranscript"></div>
        </div>
    </div>
</patient-consultations>
