<div class="card" *ngIf="addressForm.value as address">
    <div class="card-header">
        <div class="address-title ">
            <span class="street-line" *ngIf="address.streetLine1">{{ address.streetLine1 }},</span>
            {{ address.countryCode }}
        </div>
        <div class="default-controls">
            <vdr-chip class="is-default p8" *ngIf="isDefaultShipping">
                <clr-icon shape="truck"></clr-icon>
                {{ 'customer.default-shipping-address' | translate }}
            </vdr-chip>
            <vdr-chip class="is-default p8" *ngIf="isDefaultBilling">
                <clr-icon shape="credit-card"></clr-icon>
                {{ 'customer.default-billing-address' | translate }}
            </vdr-chip>
        </div>
    </div>
    <div class="card-block">
        <div class="card-text">
            <ul class="address-lines" *ngIf="!editing">
                <li *ngIf="address.fullName">{{ address.fullName }}</li>
                <li *ngIf="address.streetLine1">{{ address.streetLine1 }}</li>
                <li *ngIf="address.streetLine2">{{ address.streetLine2 }}</li>
                <li *ngIf="address.city">{{ address.city }}</li>
                <li *ngIf="address.province">{{ address.province }}</li>
                <li *ngIf="address.postalCode">{{ address.postalCode }}</li>
                <li *ngIf="address.country">
                    <clr-icon shape="world" size="12"></clr-icon>
                    {{ address.country.name }}
                </li>
                <li *ngIf="address.phoneNumber">
                    <clr-icon shape="phone-handset" size="12"></clr-icon>
                    {{ address.phoneNumber }}
                </li>
            </ul>
            <form [formGroup]="addressForm" *ngIf="editing">
                <clr-input-container>
                    <label>{{ 'customer.full-name' | translate }}</label>
                    <input formControlName="fullName" type="text" clrInput />
                </clr-input-container>
                <clr-input-container>
                    <label>{{ 'customer.street-line-1' | translate }}</label>
                    <input formControlName="streetLine1" type="text" clrInput />
                </clr-input-container>
                <clr-input-container>
                    <label>{{ 'customer.street-line-2' | translate }}</label>
                    <input formControlName="streetLine2" type="text" clrInput />
                </clr-input-container>
                <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" [value]="country.code">
                            {{ country.name }}
                        </option>
                    </select>
                </clr-input-container>
                <clr-input-container>
                    <label>{{ 'customer.phone-number' | translate }}</label>
                    <input formControlName="phoneNumber" type="text" clrInput />
                </clr-input-container>
            </form>
        </div>
    </div>
    <div class="card-footer">
        <button class="btn btn-sm btn-link" *ngIf="editing" (click)="editing = false">
            {{ 'common.done' | translate }}
        </button>
        <button class="btn btn-sm btn-link" *ngIf="!editing" (click)="editing = true">
            {{ 'common.edit' | translate }}
        </button>
        <clr-dropdown>
            <button type="button" class="btn btn-sm btn-link" clrDropdownTrigger>
                {{ 'common.more' | translate }}
                <clr-icon shape="caret down"></clr-icon>
            </button>
            <clr-dropdown-menu *clrIfOpen>
                <button
                    clrDropdownItem
                    class="button"
                    [disabled]="isDefaultShipping || editing"
                    (click)="setAsDefaultShippingAddress()"
                >
                    {{ 'customer.set-as-default-shipping-address' | translate }}
                </button>
                <button
                    clrDropdownItem
                    class="button"
                    [disabled]="isDefaultBilling || editing"
                    (click)="setAsDefaultBillingAddress()"
                >
                    {{ 'customer.set-as-default-billing-address' | translate }}
                </button>
            </clr-dropdown-menu>
        </clr-dropdown>
    </div>
</div>
