<form appFormSubmit (ngSubmit)="ngSubmitForm()" class="fl-content"
      [formGroup]="contactForm" *ngIf="createOptions" layoutDirection="column" layoutAlign="center">
  <app-form-errors #formErrors [formGroup]="contactForm"></app-form-errors>

  <ng-container *ngIf="authSvc.feature('ui.plugins.domains.contacts.show-client')">
    <app-client-autocomplete [control]="contactForm.controls.client"></app-client-autocomplete>
  </ng-container>

  <mat-form-field>
    <mat-label i18n>First name</mat-label>
    <input matInput placeholder="First name" i18n-placeholder type="text" formControlName="first_name" required>
    <mat-error>{{fieldErrors['first_name']}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label for="last_name" i18n>Last name</mat-label>
    <input matInput id="last_name" type="text" formControlName="last_name" required>
    <mat-error>{{fieldErrors['last_name']}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label i18n>Account e-mail address</mat-label>
    <input matInput placeholder="Account e-mail address" i18n-placeholder type="text" formControlName="email" required>
    <mat-error>{{fieldErrors['email']}}</mat-error>
  </mat-form-field>

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

  <mat-form-field>
    <mat-label i18n>Company</mat-label>
    <input matInput placeholder="Company" i18n-placeholder type="text" formControlName="company">
    <mat-error>{{fieldErrors['company']}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label i18n>KRA PIN</mat-label>
    <input matInput placeholder="KRA PIN" i18n-placeholder type="text" formControlName="vat_id">
    <mat-error>{{fieldErrors['vat_id']}}</mat-error>
  </mat-form-field>
  <mat-checkbox formControlName="tax_exempt" [color]="'primary'" i18n>Tax exempt</mat-checkbox>
  <mat-form-field>
    <mat-label i18n>Address line 1</mat-label>
    <input matInput placeholder="Address line 1" i18n-placeholder type="text" formControlName="address1" required>
    <mat-error>{{fieldErrors['address1']}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label i18n>Address line 2</mat-label>
    <input matInput placeholder="Address line 2" i18n-placeholder type="text" formControlName="address2">
  </mat-form-field>
  <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="5px">
    <mat-form-field appFlex="33">
      <mat-label i18n>Country/state</mat-label>
      <input matInput placeholder="Country/state" i18n-placeholder type="text" formControlName="state" required>
      <mat-error>{{fieldErrors['state']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="33">
      <mat-label i18n>City</mat-label>
      <input matInput placeholder="City" i18n-placeholder type="text" formControlName="city" required>
      <mat-error>{{fieldErrors['city'] }}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="33">
      <mat-label i18n>Zip code</mat-label>
      <input matInput placeholder="Zip code" i18n-placeholder type="text" formControlName="zip_code" required>
      <mat-error>{{fieldErrors['zip_code']}}</mat-error>
    </mat-form-field>
  </div>
  <div>
    <app-phone-input #phoneInput [control]="contactForm.controls.phone"
                     [countrySelectorFlex]="'15'"
                     [phoneInputFlex]="'85'"></app-phone-input>
  </div>
  <app-custom-fields #customFields
                     *ngIf="createOptions.custom_fields"
                     [customFieldsDefinition]="customFieldsDefinitions"
                     [liveForm]="getLiveFormVal()"
                     [formModel]="object"></app-custom-fields>
</form>
