<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="gatewayForm" layoutDirection="column" class="fl-content fl-content-min-height">
  <app-form-errors #formErrors [formGroup]="gatewayForm"></app-form-errors>
  <div layoutDirection="row"  layoutDirection-xs="column" appLayoutGap="10px">
    <mat-checkbox formControlName="enabled" color="primary" i18n>Enabled</mat-checkbox>
    <mat-checkbox *ngIf="capabilities.can_process_payments" formControlName="visible_to_user" color="primary" i18n>Visible to user</mat-checkbox>
    <mat-checkbox *ngIf="capabilities.supports_recurring_payments" formControlName="recurring_payments_enabled"
                  color="primary" i18n>
      Enable recurring payments
    </mat-checkbox>
  </div>
  <mat-form-field>
    <mat-label i18n>Display name</mat-label>
    <input matInput placeholder="Display name" i18n-placeholder type="text" formControlName="display_name" required>
    <mat-error>{{fieldErrors['display_name']}}</mat-error>
  </mat-form-field>

  <mat-form-field *ngIf="gatewayForm.controls.recurring_payments_enabled.value">
    <mat-label i18n>Terms & conditions text for enabling auto payments checkbox. Removing content will re-set default.</mat-label>
    <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
              matInput rows="10" formControlName="instructions"
              placeholder="Terms & conditions text for enabling auto payments checkbox. Removing content will re-set default."
              i18n-placeholder>
    </textarea>
  </mat-form-field>

  <ng-container *ngIf="!capabilities.returns_fee_information; else hasFeeInfo">
    <p i18n>
      This gateway does not return fee information, please enter fees:
    </p>
    <div layoutDirection="row"  layoutDirection-xs="column" appLayoutGap="10px">
      <mat-form-field>
        <mat-label i18n>Fixed fee</mat-label>
        <input matInput placeholder="Fixed fee" i18n-placeholder type="number" formControlName="fixed_fee">
        <mat-error>{{fieldErrors['fixed_fee']}}</mat-error>
      </mat-form-field>
      <mat-form-field>
        <mat-label i18n>Percent fee</mat-label>
        <input matInput placeholder="Percent fee" i18n-placeholder type="number" formControlName="percent_fee">
        <mat-error>{{fieldErrors['percent_fee']}}</mat-error>
      </mat-form-field>
    </div>
  </ng-container>
  <ng-template #hasFeeInfo>
    <p i18n>This gateway returns fee information, fees will automatically be added to transactions.</p>
  </ng-template>
</form>
