<div class="card">
    <div class="card-header">
        {{ 'settings.test-address' | translate }}
    </div>
    <div class="card-block">
        <form [formGroup]="form">
            <clr-input-container>
                <label>{{ 'customer.city' | translate }}</label>
                <input formControlName="city" type="text" clrInput />
            </clr-input-container>
            <clr-input-container>
                <label>{{ 'customer.province' | translate }}</label>
                <input formControlName="province" type="text" clrInput />
            </clr-input-container>
            <clr-input-container>
                <label>{{ 'customer.postal-code' | translate }}</label>
                <input formControlName="postalCode" type="text" clrInput />
            </clr-input-container>
            <clr-input-container>
                <label>{{ 'customer.country' | translate }}</label>
                <select name="countryCode" formControlName="countryCode" clrInput clrSelect>
                    <option *ngFor="let country of availableCountries$ | async" [value]="country.code">
                        {{ country.name }}
                    </option>
                </select>
            </clr-input-container>
        </form>
    </div>
</div>
