<div class="fl-content" layoutDirection="row" layoutDirection-lt-md="column">
  <div appFlex="50">
    <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
          [formGroup]="autoInvoicingSettingsForm" *ngIf="autoInvoicingSettings">
      <!--suppress JSUnusedGlobalSymbols -->
      <app-form-errors #formErrors [formGroup]="autoInvoicingSettingsForm"></app-form-errors>

      <mat-checkbox formControlName="enable_auto_invoicing" color="primary" i18n>Enable auto invoicing</mat-checkbox>

      <mat-radio-group aria-labelledby="Auto invoicing type" layoutDirection="column"
                       formControlName="auto_invoicing_type" class="fl-margin-top">
        <mat-radio-button color="primary" value="estimated" i18n>Estimated monthly consumption</mat-radio-button>
        <mat-radio-button color="primary" value="fixed" i18n>
          Fixed amount ({{ object.currency }})
        </mat-radio-button>
      </mat-radio-group>

      <mat-form-field class="full-width fl-margin-top-medium"
                      *ngIf="autoInvoicingSettingsForm.controls.auto_invoicing_type.value === 'fixed'">
        <mat-label i18n>Amount</mat-label>
        <input matInput placeholder="Amount" i18n-placeholder
               type="number" step="1" formControlName="auto_invoicing_amount" required>
        <mat-error>{{fieldErrors['auto_invoicing_amount']}}</mat-error>
      </mat-form-field>

    </form>
  </div>
  <div appFlex="50" class="fl-help-text fl-no-margin-bottom">
    <h3 i18n>Enable auto invoicing</h3>
    <p class="fl-detail" i18n>
      If checked, an invoice will be issued automatically before you run out of credit.
    </p>
    <h3 i18n>Estimated monthly consumption</h3>
    <p class="fl-detail" i18n>
      If "Estimated monthly consumption" is selected, the invoiced amount will be enough to last for another
      30 days.
    </p>
    <h3 i18n>Fixed amount</h3>
    <p class="fl-detail" i18n>
      This is the credit amount on the automatically issued invoice.
    </p>
  </div>
</div>
