<div *ngIf="editMode" >

  <mat-form-field [appearance]="fieldAppearance" style="width: 100%">

    <mat-label><span [translate]="'inputs.country.label'"></span></mat-label>

    <input type="text"
           matInput
           [formControl]="formControlCountry"
           [matAutocomplete]="autoCountry">

    <mat-autocomplete #autoCountry="matAutocomplete">
      <mat-option *ngFor="let option of filteredCountries" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>

  </mat-form-field>

  <div [@slideInOut]="enableState ? 'in' : 'out'">
    <mat-form-field [appearance]="fieldAppearance"  style="width: 100%">

      <mat-label><span [translate]="'inputs.state.label'"></span></mat-label>

      <input type="text"
             matInput
             [formControl]="formControlState"
             [matAutocomplete]="autoState"
      >
      <mat-autocomplete #autoState="matAutocomplete">
        <mat-option *ngFor="let option of filteredStates" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>

    </mat-form-field>
  </div>

  <div [@slideInOut]="enableCity ? 'in' : 'out'">
    <mat-form-field [appearance]="fieldAppearance"  style="width: 100%">

      <mat-label><span [translate]="'inputs.city.label'"></span></mat-label>

      <input type="text"
             matInput
             [formControl]="formControlCity"
             [matAutocomplete]="autoCity">

      <mat-autocomplete #autoCity="matAutocomplete">
        <mat-option *ngFor="let option of filteredCities" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>

    </mat-form-field>
  </div>
</div>

<div *ngIf="!editMode">
  <div>{{_formControlCountryIn.value}}<span *ngIf="!!_formControlStateIn.value">{{', ' + _formControlStateIn.value}}<span
    *ngIf="!!_formControlCityIn.value">{{', ' + _formControlCityIn.value}}</span></span>
  </div>
</div>
