<div ng-show="cancelled">
  <div ng-show="cancelling">
    <p class="alert alert-info group">
      Sit tight, we're cancelling your subscription...
    </p>
  </div>
  <div ng-show="!cancelling">
    <p class="alert alert-info group">
      You have successfully cancelled your subscription.<br />You will no longer be billed.
    </p>
    <p style="padding: 15px; padding-top: 0; margin-top: 0; line-height: 21px;">
      We're very sorry to see you go. Mind dropping us a quick email to <a href="mailto:support@snipt.net">support@snipt.net</a>
      to let us know why you cancelled? We'd really appreciate it.
    </p>
  </div>
</div>
<div ng-show="!cancelled">
  <div ng-show="!user.is_pro">
      <p class="alert alert-info">
          You're not a Pro yet, so we have nothing to show you here.<br />
          <br /><a class="btn btn-success" href="/pro/">Signup for Pro &raquo;</a>
      </p>
  </div>
  <div ng-show="user.is_pro">
      <div class="def" data-title="Plan" ng-show="user.stripeAccount.status != 'inactive'">
          {[{ user.stripeAccount.name || 'Loading...' }]}
      </div>
      <div class="def" data-title="Plan" ng-show="user.stripeAccount.status == 'inactive'">
          One-time payment
      </div>
      <div class="def" data-title="Price" ng-show="user.stripeAccount.status != 'inactive'">
          <span ng-show="user.stripeAccount">${[{ user.stripeAccount.amount / 100 }]}.00 USD / {[{ user.stripeAccount.interval }]}</span>
          <span ng-show="!user.stripeAccount">Loading...</span>
      </div>
      <div class="def" data-title="Card" ng-show="user.stripeAccount.status != 'inactive'">
          <span ng-show="user.stripeAccount">xxxx-xxxx-xxxx-{[{ user.stripeAccount.last4 || 'Loading...' }]}</span>
          <span ng-show="!user.stripeAccount">Loading...</span>
      </div>
      <div class="def" data-title="Status" ng-show="user.stripeAccount.status != 'inactive'">
          {[{ user.stripeAccount.status || 'Loading...' }]}
      </div>
      <div class="def" data-title="Pro since">
          <span ng-show="user.stripeAccount">{[{ user.stripeAccount.created  * 1000 |date:'fullDate' }]}</span>
          <span ng-show="!user.stripeAccount">Loading...</span>
      </div>
      <div class="def" data-title="Next bill date" ng-show="user.stripeAccount.status != 'inactive'">
          <span ng-show="user.stripeAccount">{[{ user.stripeAccount.nextBill  * 1000 |date:'fullDate' }]}</span>
          <span ng-show="!user.stripeAccount">Loading...</span>
      </div>
      <p class="alert alert-info group" style="padding-right: 8px;" ng-show="user.stripeAccount.status != 'inactive'">
        <a ng-click="cancelSubscription()" class="btn btn-danger pull-right">Cancel subscription</a>
      </p>
  </div>
</div>
