<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="taxRuleForm" *ngIf="createOptions" class="fl-content">
  <app-form-errors #formErrors [formGroup]="taxRuleForm"></app-form-errors>

  <app-country-autocomplete [control]="taxRuleForm.controls.country"
                            [countries]="createOptions.countries"></app-country-autocomplete>

  <mat-form-field class="full-width">
    <mat-label i18n>Level</mat-label>
    <mat-select formControlName="level" placeholder="Level" i18n-placeholder>
      <mat-option *ngFor="let level of createOptions.levels"
                  [value]="level[0]">
        {{level[1]}}
      </mat-option>
    </mat-select>
    <mat-error>{{fieldErrors['level']}}</mat-error>
  </mat-form-field>
  <mat-form-field class="full-width">
    <mat-label i18n>Name</mat-label>
    <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name" required>
    <mat-error>{{fieldErrors['name']}}</mat-error>
  </mat-form-field>
  <mat-form-field class="full-width">
    <mat-label i18n>State</mat-label>
    <input matInput placeholder="State" i18n-placeholder type="text" formControlName="state">
    <mat-error>{{fieldErrors['state']}}</mat-error>
  </mat-form-field>
  <mat-form-field class="full-width">
    <mat-label i18n>Rate</mat-label>
    <input matInput placeholder="Rate" i18n-placeholder type="number" formControlName="rate"
           min="0.01" step="0.01" max="100.00" required>
    <mat-error>{{fieldErrors['rate']}}</mat-error>
  </mat-form-field>
  <div appLayoutGap="10px">
    <mat-form-field appFlex="50">
      <mat-label i18n>Start date</mat-label>
      <input matInput [matDatepicker]="dpStartDate" formControlName="start_date" required>
      <mat-datepicker-toggle matSuffix [for]="dpStartDate"></mat-datepicker-toggle>
      <mat-datepicker #dpStartDate>
      </mat-datepicker>
      <mat-error>{{fieldErrors['start_date']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="50">
      <mat-label i18n>End date</mat-label>
      <input matInput [matDatepicker]="dpEndDate" formControlName="end_date">
      <mat-datepicker-toggle matSuffix [for]="dpEndDate"></mat-datepicker-toggle>
      <mat-datepicker #dpEndDate>
      </mat-datepicker>
      <mat-error>{{fieldErrors['end_date']}}</mat-error>
    </mat-form-field>
  </div>
</form>
