
<div class="row">
    <div class="col-md-2 fusio-sidebar" ng-include src="'app/account/nav.html'"></div>
    <div class="col-md-10">
        <div class="fusio-content">
            <h2>Purchase</h2>
            <div uib-alert ng-class="'alert-success'" close="closeResponse()" ng-if="transaction.id">
                <div ng-if="transaction.status == STATUS_CREATED">Transaction was created but not approved yet.</div>
                <div ng-if="transaction.status == STATUS_APPROVED">Thank you for the purchase! We have credited <b>{{transaction.plan.points}}</b> points to your account.</div>
                <div ng-if="transaction.status == STATUS_FAILED">Transaction failed. Please contact the support regarding the transaction <code>{{transaction.transactionId}}</code>.</div>
            </div>
            <div uib-alert ng-class="'alert-danger'" close="closeResponse()" ng-if="response.success === false">
                {{response.message}}
            </div>
            <div uib-alert ng-class="'alert-success'" close="closeResponse()" ng-if="response.success === true">
                {{response.message}}
            </div>

            <div uib-alert ng-class="'alert-info'">
            List of plans which can be purchased. Your account receives a specific
            amount of points which can be used to call routes which cost points.
            </div>

            <div class="row">
                <div class="col-md-4" ng-repeat="plan in plans">
                    <div class="fusio-intro-column">
                        <h3>{{ plan.name }}</h3>
                        <dl>
                            <dt>Price</dt>
                            <dd>{{ plan.price | currency : symbol : 2 }}</dd>
                            <dt>Points</dt>
                            <dd>{{ plan.points }}</dd>
                            <dt ng-if="plan.period">Period</dt>
                            <dd ng-if="plan.period">
                              <span ng-if="plan.period == 1">Period: monthly</span>
                              <span ng-if="plan.period == 2">Period: quarterly</span>
                              <span ng-if="plan.period == 3">Period: half yearly</span>
                              <span ng-if="plan.period == 4">Period: yearly</span>
                            </dd>
                        </dl>
                        <p>{{ plan.description }}</p>
                        <a ng-click="purchase(plan)" ng-class="{'disabled': loading}" class="btn btn-primary">Purchase</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
