<ng-template vdrDialogTitle>
    <span *ngIf="addressForm.get('streetLine1')?.value as streetLine1">{{ streetLine1 }},</span>
    <span *ngIf="addressForm.get('countryCode')?.value as countryCode"> {{ countryCode }}</span>
</ng-template>

<form [formGroup]="addressForm">
    <clr-input-container>
        <label>{{ 'customer.full-name' | translate }}</label>
        <input formControlName="fullName" type="text" clrInput />
    </clr-input-container>

    <div class="clr-row">
        <div class="clr-col-md-4">
            <clr-input-container>
                <label>{{ 'customer.street-line-1' | translate }}</label>
                <input formControlName="streetLine1" type="text" clrInput />
            </clr-input-container>
        </div>
        <div class="clr-col-md-4">
            <clr-input-container>
                <label>{{ 'customer.street-line-2' | translate }}</label>
                <input formControlName="streetLine2" type="text" clrInput />
            </clr-input-container>
        </div>
    </div>
    <div class="clr-row">
        <div class="clr-col-md-4">
            <clr-input-container>
                <label>{{ 'customer.city' | translate }}</label>
                <input formControlName="city" type="text" clrInput />
            </clr-input-container>
        </div>
        <div class="clr-col-md-4">
            <clr-input-container>
                <label>{{ 'customer.province' | translate }}</label>
                <input formControlName="province" type="text" clrInput />
            </clr-input-container>
        </div>
    </div>
    <div class="clr-row">
        <div class="clr-col-md-4">
            <clr-input-container>
                <label>{{ 'customer.postal-code' | translate }}</label>
                <input formControlName="postalCode" type="text" clrInput />
            </clr-input-container>
        </div>
        <div class="clr-col-md-4">
            <clr-input-container>
                <label>{{ 'customer.country' | translate }}</label>
                <select name="countryCode" formControlName="countryCode" clrInput clrSelect>
                    <option *ngFor="let country of availableCountries" [value]="country.code">
                        {{ country.name }}
                    </option>
                </select>
            </clr-input-container>
        </div>
    </div>
    <clr-input-container>
        <label>{{ 'customer.phone-number' | translate }}</label>
        <input formControlName="phoneNumber" type="text" clrInput />
    </clr-input-container>
    <section formGroupName="customFields" *ngIf="addressForm.get('customFields') as customFieldsGroup">
        <label>{{ 'common.custom-fields' | translate }}</label>
        <ng-container *ngFor="let customField of customFields">
            <vdr-custom-field-control
                entityName="Facet"
                [customFieldsFormGroup]="customFieldsGroup"
                [customField]="customField"
            ></vdr-custom-field-control>
        </ng-container>
    </section>
</form>

<ng-template vdrDialogButtons>
    <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
    <button
        type="submit"
        (click)="save()"
        [disabled]="!addressForm.valid || !addressForm.touched"
        class="btn btn-primary"
    >
        {{ 'common.update' | translate }}
    </button>
</ng-template>
