<div class="m-settings--billing-subscriptions m-settings--section m-border">
  <h4 i18n="@@SETTINGS__SUBSCRIPTIONS__TITLE">Recurring Payments</h4>

  <div [hidden]="!inProgress" style="width:100%; text-align:center;">
    <div
      class="mdl-spinner mdl-js-spinner is-active"
      [mdl]
      style="margin: 16px auto;"
    ></div>
  </div>

  <div class="m-settings--billing-subscriptions--subscription">
    <ul>
      <li
        *ngFor="let subscription of subscriptions; let i = index"
        class="m-settings--billing-subscriptions--subscription-item"
      >
        <span>
          <m-tooltip icon="info">
            <span i18n="@@SETTINGS__SUBSCRIPTIONS__LAST_BILLING"
              >Last billing:
              {{ subscription.last_billing * 1000 | date: 'mediumDate' }}</span
            ><br />
            <span i18n="@@SETTINGS__SUBSCRIPTIONS__NEXT_BILLING"
              >Next billing:
              {{ subscription.next_billing * 1000 | date: 'mediumDate' }}</span
            >
          </m-tooltip>
        </span>

        <span
          class="m-settings--billing-subscriptions--subscription-item-plan-id"
          >{{ subscription.plan_id }}</span
        >

        <ng-container *ngIf="subscription.entity">
          <span *ngIf="subscription.entity.type == 'user'"
            ><i style="text-style:normal">@</i
            >{{ subscription.entity.username }}</span
          >
          <span *ngIf="subscription.entity.type != 'user'"
            ><i style="text-style:normal">@</i
            >{{ subscription.entity.ownerObj.username }}</span
          >
        </ng-container>

        <span
          [ngSwitch]="subscription.payment_method"
          class="m-settings--billing-subscriptions--subscription-item-amount"
        >
          <ng-template ngSwitchCase="money">{{
            subscription.amount | currency: 'USD':true
          }}</ng-template>
          <ng-template
            ngSwitchCase="tokens"
            i18n="@@SETTINGS__BILLING__SUBSCRIPTIONS__TOKENS_LABEL"
            >{{ subscription.amount | token: 18 | number }} Tokens</ng-template
          >
          <ng-template
            ngSwitchCase="points"
            i18n="@@SETTINGS__BILLING__SUBSCRIPTIONS__POINTS_LABEL"
            >{{ subscription.amount | number: '1.0-0' }} Points</ng-template
          >
          <ng-template ngSwitchCase="usd"
            >{{ subscription.amount | token: 2 }} USD</ng-template
          >
        </span>

        <span
          class="m-settings--billing-subscriptions--subscription-item-select"
          (click)="cancel(i)"
          i18n="@@M__ACTION__CANCEL"
          >Cancel</span
        >
      </li>
    </ul>
  </div>
</div>
