<div class="panel panel-default"> <div class="panel-heading"> <div class="pull-left" :class="{'btn-table-align': hasMonthlyAndYearlyPlans}"> Subscribe </div> <!-- Interval Selector Button Group --> <div class="pull-right"> <div class="btn-group" v-if="hasMonthlyAndYearlyPaidPlans"> <!-- Monthly Plans --> <button type="button" class="btn btn-default" @click="showMonthlyPlans" :class="{'active': showingMonthlyPlans}"> Monthly </button> <!-- Yearly Plans --> <button type="button" class="btn btn-default" @click="showYearlyPlans" :class="{'active': showingYearlyPlans}"> Yearly </button> </div> </div> <div class="clearfix"></div> </div> <div class="panel-body table-responsive"> <!-- Subscription Notice --> <div class="p-b-lg"> You are not subscribed to a plan. Choose from the plans below to get started. </div> <!-- European VAT Notice --> @if (Spark::collectsEuropeanVat()) <p class="p-b-lg"> All subscription plan prices are excluding applicable VAT. </p> @endif <!-- Plan Error Message --> <div class="alert alert-danger" v-if="form.errors.has('plan')"> @{{ form.errors.get('plan') }} </div> <table class="table table-borderless m-b-none"> <thead></thead> <tbody> <tr v-for="plan in paidPlansForActiveInterval"> <!-- Plan Name --> <td> <div class="btn-table-align" @click="showPlanDetails(plan)"> <span style="cursor: pointer;"> <strong>@{{ plan.name }}</strong> </span> </div> </td> <!-- Plan Features Button --> <td> <button class="btn btn-default m-l-sm" @click="showPlanDetails(plan)"> <i class="fa fa-btn fa-star-o"></i>Plan Features </button> </td> <!-- Plan Price --> <td> <div class="btn-table-align"> @{{ plan.price | currency }} / @{{ plan.interval | capitalize }} </div> </td> <!-- Trial Days --> <td> <div class="btn-table-align" v-if="plan.trialDays && ! hasSubscribed(plan)"> @{{ plan.trialDays}} Day Trial </div> </td> <!-- Plan Select Button --> <td class="text-right"> <button class="btn btn-primary-outline btn-plan" v-if="selectedPlan !== plan" @click="selectPlan(plan)" :disabled="form.busy"> Select </button> <button class="btn btn-primary btn-plan" v-if="selectedPlan === plan" disabled> <i class="fa fa-btn fa-check"></i>Selected </button> </td> </tr> </tbody> </table> </div> </div>