<div *ngIf="!recurringPaymentOptions.length">
  <p i18n>No recurring payment options found</p>
  <p i18n>You may configure one when paying an invoice if available.</p>
</div>
<p class="fl-detail" *ngIf="recurringPaymentOptions.length" i18n>
  If you have multiple recurring payment options enabled, charging will be tried for each one until payment is
  successful, in the preferred order (from top to bottom).
</p>
<table *ngIf="recurringPaymentOptions.length" mat-table [dataSource]="recurringPaymentOptions" class="full-width">
  <ng-container matColumnDef="details">
    <th mat-header-cell *matHeaderCellDef i18n>Details</th>
    <td mat-cell *matCellDef="let element">
      <span *ngIf="element.card_details && element.card_details.last4 && element.card_details.brand" i18n>
        {{element.card_details.brand.toUpperCase()}} ending in {{element.card_details.last4}}
      </span>
      <span *ngIf="element.card_details && element.card_details.last4 && !element.card_details.brand" i18n>
        Card ending in {{element.card_details.last4}}
      </span>
      <span *ngIf="!element.card_details ||
      (element.card_details && !element.card_details.last4 && !element.card_details.brand)" i18n>
        Unknown saved card
      </span>
      <span *ngIf="element.card_details.exp_month_display" class="expires-txt"
            i18n>Expires {{element.card_details.exp_month_display}}/{{element.card_details.exp_year_display}}</span>
    </td>
  </ng-container>
  <ng-container matColumnDef="gateway">
    <th mat-header-cell *matHeaderCellDef i18n>Gateway</th>
    <td mat-cell *matCellDef="let element">
      {{element.name}}
    </td>
  </ng-container>
  <ng-container matColumnDef="active">
    <th mat-header-cell *matHeaderCellDef i18n>Active</th>
    <td mat-cell *matCellDef="let option">
      <mat-icon *ngIf="option.active" class="fl-green-color">check</mat-icon>
      <mat-icon *ngIf="!option.active" class="fl-icons fl-red-color">delete</mat-icon>
    </td>
  </ng-container>
  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef></th>
    <td class="right-align" mat-cell *matCellDef="let option">
      <button *ngIf="option.order !== 1" mat-icon-button [attr.fl-tooltip]="moveUpTooltip"
              (click)="moveUp(option.gateway_id, option.gateway_data_id, option.order)">
        <mat-icon>arrow_upward</mat-icon>
      </button>
      <button *ngIf="option.can_update" mat-icon-button [attr.fl-tooltip]="editTooltip"
              (click)="edit(option)">
        <mat-icon class="fl-icons">edit</mat-icon>
      </button>
      <button *ngIf="option.active === true" mat-icon-button [attr.fl-tooltip]="deactivateTooltip"
              (click)="deactivate(option.name, option.gateway_id, option.gateway_data_id)">
        <mat-icon class="fl-icons">delete</mat-icon>
      </button>
      <button *ngIf="option.active === false" mat-icon-button [attr.fl-tooltip]="reactivateTooltip"
              (click)="reactivate(option.name, option.gateway_id, option.gateway_data_id)">
        <mat-icon>redo</mat-icon>
      </button>
      <button *ngIf="option.can_remove" mat-icon-button [attr.fl-tooltip]="deleteTooltip"
              (click)="delete(option)">
        <mat-icon>delete</mat-icon>
      </button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
