
<div class="modal-header">
  <h3 class="modal-title">Purchase</h3>
</div>

<div class="modal-body">
  <form name="planPurchaseForm" ng-submit="purchase()">
    <div class="form-group">
      <label for="provider">Provider:</label>
      <select class="form-control" id="provider" ng-model="provider" ng-options="provider.key as provider.name for provider in providers" aria-describedby="providerHelp">
      </select>
      <span class="help-block" id="providerHelp">The payment provider which you want to use to purchase this payment.</span>
    </div>
    <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>
    </div>
    <button type="submit" class="btn btn-primary">Purchase</button>
    <button type="button" ng-click="close()" class="btn btn-default">Cancel</button>
  </form>
</div>
