<div class="fl-content fl-content-min-height" *ngIf="!paymentOptions?.gateways?.length" i18n>
  You cannot add a payment since you have no payment gateways enabled
  <a [routerLink]="config.getPanelUrl('billing/gateways')" class="active-link">
    (configure payment gateways)
  </a>.
</div>
<form appFormSubmit (ngSubmit)="addPayment()"
      [formGroup]="addPaymentForm" class="fl-content" *ngIf="paymentOptions?.gateways?.length">
  <app-form-errors #formErrors [formGroup]="addPaymentForm"></app-form-errors>
  <div layoutDirection="column">
    <div layoutDirection="row" appLayoutGap="10px">
      <mat-form-field appFlex="100">
        <mat-label i18n>Payment date</mat-label>
        <input matInput [matDatepicker]="paymentDatePicker" formControlName="date_initiated"
               placeholder="Payment date" i18n-placeholder>
        <mat-datepicker-toggle matSuffix [for]="paymentDatePicker"></mat-datepicker-toggle>
        <mat-datepicker #paymentDatePicker></mat-datepicker>
        <mat-error i18n>This field is required!</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="100">
        <mat-label i18n>Gateway</mat-label>
        <mat-select formControlName="gateway" placeholder="Gateway" i18n-placeholder>
          <mat-option *ngFor="let gateway of paymentOptions.gateways" [value]="gateway.id">
            {{gateway.display_name}}
          </mat-option>
        </mat-select>
        <mat-error i18n>This field is required!</mat-error>
      </mat-form-field>
    </div>
    <mat-form-field appFlex="auto">
      <mat-label i18n>Transaction ID</mat-label>
      <input matInput placeholder="Transaction ID" i18n-placeholder type="text"
             formControlName="external_id">
      <mat-error>{{fieldErrors['external_id']}}</mat-error>
    </mat-form-field>
    <div layoutDirection="row" layoutDirection-lt-md="column" appLayoutGap="10px">
      <mat-form-field appFlex="100">
        <mat-label i18n>Amount</mat-label>
        <input matInput placeholder="Amount" i18n-placeholder type="number"
               formControlName="amount" required>
        <mat-error i18n>{{ addPaymentForm.controls.amount.errors | errorFormatter }}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="100">
        <mat-label i18n>Fee</mat-label>
        <input matInput placeholder="Fee" i18n-placeholder type="number"
               formControlName="fee" required>
        <mat-error i18n>{{ addPaymentForm.controls.fee.errors | errorFormatter }}</mat-error>
      </mat-form-field>
    </div>
    <mat-form-field appFlex="100">
      <mat-label i18n>Currency</mat-label>
      <mat-select formControlName="currency" placeholder="Currency" i18n-placeholder>
        <mat-option *ngFor="let currency of paymentOptions.currencies" [value]="currency.code">{{currency.code}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Extra information</mat-label>
      <input matInput placeholder="Extra information" i18n-placeholder type="text"
             formControlName="extra_info">
      <mat-error>{{fieldErrors['extra_info']}}</mat-error>
    </mat-form-field>
    <div layoutDirection="row" layoutAlign="end">
      <a (click)="addPayment()" mat-button [disabled]="objectController?.loading" color="primary" i18n>Add payment</a>
    </div>
  </div>
</form>
