<div *ngIf="paymentOptions" class="add-payment-container" layoutDirection="column">
  <ng-container *ngIf="showPaymentOptions">
    <mat-form-field class="payment-method-form-field">
      <mat-label i18n>Select payment method</mat-label>
      <mat-select placeholder="Select payment method" i18n-placeholder [(value)]="selectedGateway">
        <mat-option *ngIf="creditBalance" [value]="'credit'" i18n>
          Credit balance {{paymentOptions.uptodate_credit | currencyFormatter: paymentOptions.uptodate_credit_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale}}
        </mat-option>
        <mat-option *ngFor="let saved_card of paymentOptions.saved_cards; trackBy: savedCardsTrackBy" [value]="saved_card">
          <span *ngIf="saved_card.card_details && saved_card.card_details.last4 && saved_card.card_details.brand" i18n>
            {{saved_card.card_details.brand.toUpperCase()}} ending in {{saved_card.card_details.last4}}
          </span>
          <span *ngIf="saved_card.card_details && saved_card.card_details.last4 && !saved_card.card_details.brand" i18n>
            Card ending in {{saved_card.card_details.last4}}
          </span>
          <span *ngIf="!saved_card.card_details ||
          (saved_card.card_details && !saved_card.card_details.last4 && !saved_card.card_details.brand)" i18n>
            {{saved_card.gateway_name}} unknown saved card
          </span>
        </mat-option>
        <mat-option *ngFor="let gateway of paymentOptions.gateways; trackBy: gatewayTrackBy" [value]="gateway">
          {{gateway.display_name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <ng-container *ngIf="selectedGateway && selectedGateway.recurring_payments_enabled &&
    authSvc.feature('billing.recurring_payments')">
      <mat-checkbox [(ngModel)]="saveCard" color="primary">
        <div [innerHTML]="paymentOptions.recur_conditions[selectedGateway.name]" class="save-card-text"></div>
      </mat-checkbox>
    </ng-container>
    <span *ngIf="paymentOptions.subscription_info">{{paymentOptions.subscription_info}}</span>
    <button class="pay-now-btn" mat-button (click)="payNow()" [disabled]="!selectedGateway" i18n>Pay now</button>
    <button class="pay-now-btn" *ngIf="selectedGateway && selectedGateway.enable_subscriptions" mat-button
            (click)="payAndSubscribe()" i18n>Pay & subscribe</button>
  </ng-container>
</div>
