<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="Country">{{"Country" | localize}} *</label>
            <br>
            <select id = "countrySelectInput" data-placeholder="Select Country" style="width:100%;" class="form-control kt-select2" name="countrySelectInput" [(ngModel)] = "this.selectedCountry">
                    <option *ngFor="let country of filteredCountries" value= "{{country.country}}" [selected]="country.country == this.selectedCountry">
                    {{country.country}}
                    </option>
            </select>
        </div>
    </div>
    <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" [(ngModel)] = "this.address.postalCodeId">
                <option *ngFor="let postal of filteredPostal" value= "{{postal.id}}"  [selected]="postal.id ==  this.address.postalCodeId">
                    {{postal.value}}
                </option>
            </select>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xl-6">
        <div class="form-group">
            <label for="States">{{"State" | localize}} *</label>
            <br>
            <select id = "stateSelectInput" data-placeholder="Select State" style="width:100%;" class="form-control kt-select2" name="stateSelectInput" [(ngModel)] = "this.selectedState">
                <option *ngFor="let state of filteredStates" value="{{state.state}}" [selected]="state.state == this.selectedState">
                    {{state.state}}
                </option>
            </select>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="form-group">
            <label for="Cities">{{"City" | localize}} *</label>
            <br>
            <select id = "citySelectInput" data-placeholder="Select City" class="form-control kt-select2" style="width:100%;" name="citySelectInput" [(ngModel)] = "this.selectedCity">
                <option *ngFor="let city of filteredCities" value= "{{city.city}}" [selected]="city.city == this.selectedCity">
                    {{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)] = "this.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>      
