<patient-subscriptions :routes="routes"
                        inline-template
>
    <div v-if="subscriptions.length" :class="{'formLoading' : loading}">
        <div class="cardTitle">
            <h3>Subscriptions</h3>
        </div>
        <table class="detailsTable">
            <tr>
                <th>Name</th>
                <th>Status</th>
                <th>From</th>
                <th>To</th>
            </tr>
            <template v-for="subscription in subscriptions">
                <tr>
                    <td v-html="subscription.product"></td>
                    <td>
                        <span v-html="subscription.status"
                              class="tag capitalize"
                              :class="{
                                'tag-grey': subscription.status === 'cancelled',
                                'tag-blue': subscription.status === 'complete',
                                'tag-green': subscription.status === 'active',
                              }"
                        ></span>
                    </td>
                    <td v-html="subscription.date_from"></td>
                    <td v-html="subscription.date_to"></td>
                </tr>
                <tr v-if="subscription.payments.length">
                    <td></td>
                    <td colspan="3" class="paymentList">
                        <p>
                            <strong>
                                Payments (
                                <span v-html="subscription.payments.length"></span>
                                /
                                <span v-html="subscription.duration"></span>
                                ):
                            </strong>
                        </p>
                        <table>
                            <tr v-for="payment in subscription.payments">
                                <td v-html="'&pound;' + payment.amount"></td>
                                <td v-html="payment.status"></td>
                                <td v-html="payment.payment_date"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </template>
        </table>
        <div class="loadMore" v-if="canLoadAll">
            <a href="#" @click.prevent="loadAll">
                View All (<span v-html="subscriptions.length"></span>)
            </a>
        </div>
    </div>
</patient-subscriptions>