<form appFormSubmit (ngSubmit)="ngSubmitForm()"
      [formGroup]="clientForm" *ngIf="createOptions" class="fl-content" layoutDirection="column">
  <p class="fl-detail fl-margin-bottom-medium" *ngIf="!object?.id && !authSvc.feature('ui.staff')" i18n>
    A client is a legal entity, private person, or organization, to which invoices are issued.
    The services you order are organized under clients. You can have one or more clients and you can assign roles and
    rights for other users to the clients you own.
  </p>
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="clientForm"></app-form-errors>
  <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 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 *ngIf="createForm && authSvc.feature('ui.clients&users.create.choose-config')">
    <mat-label i18n>Configuration</mat-label>
    <mat-select formControlName="configuration" placeholder="Configuration" i18n-placeholder>
      <mat-option *ngFor="let configuration of configurations" [value]="configuration.id">
        {{ configuration.name }}
      </mat-option>
    </mat-select>
    <mat-error>{{ fieldErrors['configuration'] }}</mat-error>
  </mat-form-field>

  <ng-container *ngIf="allowCountryChange">
    <app-country-autocomplete [control]="clientForm.controls.country"
                              [countries]="createOptions?.countries">
    </app-country-autocomplete>
  </ng-container>

  <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>

  <div layoutDirection="row" appLayoutGap="10px" layoutAlign="start center">
    <mat-form-field appFlex="auto">
      <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>
    <app-icon class="client-align-info-icon" [icon]="vatIdInfo"></app-icon>
  </div>

  <div layoutDirection="row" appLayoutGap="10px" layoutAlign="start center"
       *ngIf="!hideTaxExemptAutomationDropdown && authSvc.feature('ui.staff')">
    <mat-form-field appFlex="auto">
      <mat-label i18n>Tax exempt automation</mat-label>
      <mat-select formControlName="tax_exempt_automation" placeholder="Tax exempt automation" i18n-placeholder>
        <mat-option *ngFor="let option of taxExemptAutomationOptions" [value]="option">
          {{ createOptions.tax_exempt_automation[option] }}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <app-icon class="client-align-info-icon" [icon]="taxExemptAutomationInfo"></app-icon>
  </div>

  <div layoutDirection="row" layoutDirection-xs="column">
    <div
      [class.hide]="clientForm.controls?.tax_exempt_automation?.value === 'auto' && createForm && !hideTaxExemptAutomationDropdown"
      *ngIf="authSvc.feature('ui.staff')"
      class="fl-margin-bottom">
      <mat-checkbox formControlName="tax_exempt" [color]="'primary'" i18n>Tax exempt</mat-checkbox>
      <app-icon [icon]="taxExemptCheckboxInfo"></app-icon>
    </div>

    <div *ngIf="authSvc.feature('ui.clients&users.edit.display-do-not-process')" class="fl-margin-bottom">
      <mat-checkbox formControlName="do_not_process" [color]="'primary'" i18n>Do not process</mat-checkbox>
      <app-icon [icon]="doNotProcessInfo"></app-icon>
    </div>
  </div>

  <mat-form-field *ngIf="authSvc.feature('ui.staff')">
    <mat-label i18n>External billing ID</mat-label>
    <input matInput placeholder="External billing ID" i18n-placeholder type="text"
           formControlName="external_billing_id">
    <mat-error>{{ fieldErrors['external_billing_id'] }}</mat-error>
  </mat-form-field>

  <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" appLayoutGap="10px" layoutDirection-lt-sm="column">
    <mat-form-field appFlex="33" ltSmFlex="100">
      <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" ltSmFlex="100">
      <mat-label i18n>City</mat-label>
      <input matInput placeholder="City" type="text" i18n-placeholder formControlName="city" required>
      <mat-error>{{ fieldErrors['city'] }}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="33" ltSmFlex="100">
      <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>
    <mat-checkbox *ngIf="clientForm.contains('validate_phone_number')" formControlName="validate_phone_number"
                  color="primary" i18n>
      Validate phone
    </mat-checkbox>
    <app-phone-input #phoneInput [control]="clientForm.controls.phone"
                     [countrySelectorFlex]="'15'"
                     [phoneInputFlex]="'85'"></app-phone-input>
  </div>
  <div layoutDirection="row" appLayoutGap="10px" *ngIf="clientForm.contains('currency')" layoutAlign="start center">
    <mat-form-field appFlex="auto">
      <mat-label i18n>Default currency</mat-label>
      <mat-select formControlName="currency" placeholder="Default currency" i18n-placeholder>
        <mat-option *ngFor="let currency of createOptions.currencies" [value]="currency">{{ currency }}</mat-option>
      </mat-select>
    </mat-form-field>
    <app-icon class="client-align-info-icon" [icon]="currencyInfo"></app-icon>
  </div>
  <mat-form-field *ngIf="selectGroups">
    <mat-label i18n>Groups</mat-label>
    <mat-select formControlName="groups" i18n-placeholder placeholder="Groups" multiple>
      <mat-option *ngFor="let group of clientGroups" [value]="group.name">
        {{ group.name }}
      </mat-option>
    </mat-select>
    <mat-error>{{ fieldErrors['groups'] }}</mat-error>
  </mat-form-field>
  <mat-checkbox *ngIf="createForm && clientForm.contains('create_auto_order_service')"
                formControlName="create_auto_order_service" [color]="'primary'">
    {{ selectedConfiguration.auto_order_product_display }}
    <app-icon [icon]="autoOrderCheckboxInfo"></app-icon>
  </mat-checkbox>
  <h2 *ngIf="createOptions.custom_fields && Object.keys(createOptions.custom_fields).length"
      class="fl-heading-md fl-margin-top-medium fl-margin-bottom-small" i18n>Custom fields</h2>
  <app-custom-fields #customFields
                     *ngIf="customFieldsWithoutGroup"
                     [customFieldsDefinition]="customFieldsWithoutGroup"
                     [liveForm]="getLiveFormVal()"
                     [formModel]="object"></app-custom-fields>
  <mat-accordion displayMode="flat">
    <mat-expansion-panel *ngFor="let group of customFieldsByGroup | keyvalue"
                         class="field-group-panel">
      <mat-expansion-panel-header>
        <mat-panel-title class="active-link">{{ group.key }}</mat-panel-title>
      </mat-expansion-panel-header>
      <!--suppress JSUnusedGlobalSymbols -->
      <app-custom-fields #customFields
                         [customFieldsDefinition]="group.value"
                         [liveForm]="getLiveFormVal()"
                         [formModel]="object"></app-custom-fields>
    </mat-expansion-panel>
  </mat-accordion>
</form>
