<ion-header>
    <div class="nav_header">
        <button class="nav_btn nav_back floatLeft" (click)="goBack()">
            <img src="../assets/Group17_2.png" />
        </button>
        <div class="nav_title floatLeft">
            <h4>Address</h4>
        </div>
        <div class="clear"></div>
    </div>
</ion-header>
<ion-content>
    <div class="address-wrapper" *ngIf="addressService.addressList">
        <ion-grid *ngFor="let address of addressService.addressList; let i = index">
            <ion-row>
                <ion-col size="1">
                    <input type="radio" id="address_{{i}}" class="address-radio" name="address" (change)="setDefault(address.addressId)" [checked]="address.defaultVal == 1" />
                </ion-col>
                <ion-col size="9">
                    <h1>{{address.addressType}}</h1>
                    <h1>{{address.address}}</h1>
                    <p>{{address.building}}, {{address.landmark}}</p>
                </ion-col>
                <ion-col size="2" [hidden]="address.defaultVal == 1"><button class="show-btn" (click)="addressService.deleteAddress(address.addressId)">
                        <img src="../../assets/delete.png" /></button></ion-col>
            </ion-row>
        </ion-grid>

    </div>
</ion-content>

<ion-footer>
    <div class="address-btn-wrapper">
        <button class="show-btn" (click)="goToPage('nearby')">
            Add New Address
        </button>
    </div>
</ion-footer>
<div class="loader" *ngIf="loader">
    <div class="lds-ripple">
        <div></div>
        <div></div>
    </div>
</div>