<div class="form-group">
    <label for="address1Input">{{"AddressLine1" | localize}} *</label>
    <input id="address1Input" style="border: 1px solid #a6a6a6;" #address1Input="ngModel" type="text" name="Address1" class="form-control"  [(ngModel)]="address.addressLine1" required>
    <validation-messages [formCtrl]="address1Input"></validation-messages>
</div>
<div class="form-group">
    <label for="address2Input">{{"AddressLine2" | localize}} </label>
    <input id="address2Input" style="border: 1px solid #a6a6a6;" type="text" name="Address2" class="form-control"  [(ngModel)]="address.addressLine2" >
</div>
<div class="row">
        <div class="col-xl-6">
                <div class="form-group">
                    <label for="PostalCode">{{"PostalCode" | localize}} *</label>
                    <br>
                    <select id = "postalSelectInput" data-placeholder="Select Postal Code" style="width:100%;" class="form-control kt-select2" name="postalSelectInput">
                        <option value="" disabled selected></option>
                        <option *ngFor="let postal of filteredPostal" value="{{postal.id}}">
                            {{postal.value}}
                        </option>
                    </select>
                </div>
            </div>
    <div class="col-xl-6">
        <div class="form-group" [ngClass]="(filterChange) ? 'active' : 'inactive' ">
            <label for="Country">{{"Country" | localize}} *</label>
            <br>
            <select id = "countrySelectInput" data-placeholder="Select Country" style="width:100%;" class="form-control kt-select2" name="countrySelectInput">
                <option *ngFor="let country of filteredCountries" value= "{{country.id}}">
                    {{country.country}}
                    </option>
            </select>
        </div>
    </div>
    
</div>
<div class="row">
    <div class="col-xl-6">
        <div class="form-group" [ngClass]="(filterChange) ? 'active' : 'inactive' ">
            <label for="States">{{"State" | localize}} *</label>
            <br>
            <select id = "stateSelectInput" data-placeholder="Select State" style="width:100%;" class="form-control kt-select2" name="stateSelectInput">
                <option *ngFor="let state of filteredStates" value="{{state.id}}">
                        
                    {{state.state}}
                </option>
            </select>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="form-group" [ngClass]="(filterChange) ? 'active' : 'inactive' ">
            <label for="Cities">{{"City" | localize}} *</label>
            <br>
            <select id = "citySelectInput" data-placeholder="Select City" class="form-control kt-select2" style="width:100%;" name="citySelectInput">
                <option *ngFor="let city of filteredCities" value= "{{city.id}}">
                       
                    {{city.city}}
                </option>
            </select>
        </div>
    </div>
</div>
<div class="form-group">
    <label for="AddressType">{{"AddressType" | localize}} *</label>
    <br>
    <select id = "addressTypeSelectInput" data-placeholder="Select Address Type" style="width:100%;" class="form-control kt-select2" name="addressTypeSelectInput" [(ngModel)] = "address.addressTypeId">
        <option value="null">NONE</option>
        <option *ngFor="let addressType of filteredAddressType" value= "{{addressType.id}}"  [selected]="addressType.id ==  this.address.addressTypeId">
            {{addressType.name}}
        </option>
    </select>
</div>      
