<patient-treatment-plan :routes="routes"
                       :events="events"
                       :initial-treatments="(
                            bootstrap && bootstrap.responses && bootstrap.responses['admin-patient-treatments-load']
                                ? (bootstrap.responses['admin-patient-treatments-load'].treatments || [])
                                : []
                       )"
                       inline-template
>
    <div :class="{'formLoading' : loading}">
        <div class="cardTitle">
            <h3>
                Treatment Plan
            </h3>
            <div class="actions">
                <i class="fa fa-plus mtcOverlay editPatientTreatmentButton"
                   title="Add treatment"
                   @click="editTreatmentAction()"
                   href="#editPatientTreatment"
                   data-no-ajax="1"
                ></i>
            </div>
        </div>
        <template v-if="activeTreatment">
            <div class="row">
                Current treatment: <strong v-html="activeTreatment.product"></strong>
            </div>
            <div class="row">
                Period: <span v-html="activeTreatment.date_from"></span> - <span v-html="activeTreatment.date_to"></span>
            </div>
            <div class="row"
                 v-show="activeTreatment.notes"
            >
                Notes: <span v-html="activeTreatment.notes"></span>
            </div>
        </template>
        <template v-if="treatments.length">
            <table v-show="showAll || activeTreatment === null"
                   class="detailsTable"
            >
                <tr>
                    <th>Treatment</th>
                    <th>Status</th>
                    <th>From</th>
                    <th>To</th>
                    <th>Notes</th>
                    <th></th>
                </tr>
                <tr v-for="treatment in treatments">
                    <td v-html="treatment.product"></td>
                    <td>
                        <span v-html="treatment.status"
                              class="tag capitalize"
                              :class="{
                                'tag-grey': treatment.status === 'past' || treatment.status === 'future',
                                'tag-green': treatment.status === 'active',
                              }"
                        ></span>
                    </td>
                    <td v-html="treatment.date_from"></td>
                    <td v-html="treatment.date_to"></td>
                    <td v-html="treatment.notes"></td>
                    <td>
                        <i class="fa fa-pencil mtcOverlay editPatientTreatmentButton"
                           title="Edit treatment"
                           @click="editTreatmentAction(treatment)"
                           href="#editPatientTreatment"
                           data-no-ajax="1"
                        ></i>
                    </td>
                </tr>
            </table>
            <div class="loadMore" v-if="canLoadAll">
                <a href="#" @click.prevent="loadAll">
                    View All (<span v-html="treatments.length"></span>)
                </a>
            </div>
        </template>
        <template v-else>
            There is no treatment plan for this patient
        </template>
    </div>
</patient-treatment-plan>
