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