<ng-container *ngTemplateOutlet="editMode == 'V' ?  displayTemplate : interactiveTemplate" >
</ng-container>

<ng-template #displayTemplate>
	<div class="user-alladress-info">
		<div class="user-home-delivery-option">
			<i class="material-icons home-icon" *ngIf=" address.addrType == 'R' ">home</i>
			<i class="material-icons home-icon" *ngIf=" address.addrType == 'O' ">work</i>
			<span class="default-tag" *ngIf=" address.isDefault == 'Y' ">Default</span>
			<span class="delivery-tag" *ngIf=" address.addrUse == 'D' || address.addrUse == 'A' " >Delivery</span>
			<span class="billing-tag" *ngIf=" address.addrUse == 'B' || address.addrUse == 'A'  " >Billing</span>
		</div>
		<div class="name"> 
			<span class="name-span">{{address?.firstName}} {{address?.lastName}}</span>
		</div>
		<div>
		  <span class="address-span">{{address?.addr1}} {{ getSeparator(address?.addr1) }} {{address?.addr2}} {{ getSeparator(address?.addr2) }} {{address?.addr3}} {{ getSeparator(address?.addr3) }} {{address?.city}} {{ getSeparator(address?.city) }} </span>
		  <span class="address-span">{{address?.stateDescr}} - {{address?.pinCode}} - {{address?.countDescr}}. </span>
		</div>
		<div>
		  <span class="mail-span">{{address?.emailId}} </span>
		  <span class="contact-span">{{address?.contactNo}} </span>
		</div>
	</div>
</ng-template>


<ng-template #interactiveTemplate>
 
  <div class="row">
	  <form #userAddress="ngForm">
		  <div class="user-current-location large-12 columns">
		  <button class="user-location-container">
				<i class="material-icons user-location-icon">&#xE0C8;</i> <span (click)="updateuserLocation();" class="user-location-link"> Use current location </span>
		  </button>
		  </div>
		 
		  <div class="small-6 medium-6 large-3 columns">
			   <bb-textbox [placeholder]="'First Name'" [required]="true"  [(ngModel)]="address.firstName" name="firstName"></bb-textbox>
		  </div>
		  <div class="small-6 medium-6 large-3 columns">
		     <bb-textbox [placeholder]="'Last Name'" [required]="true" [(ngModel)]="address.lastName" name="lastName"></bb-textbox>
		  </div>
		  
		   <div class="small-12 medium-12 large-6 columns">
		       <bb-textbox [placeholder]="'Locality, Area or Street name'"  [required]="true" [(ngModel)]="address.addr1" name="addr1"></bb-textbox>
		  </div>
		 
		  
		  <div class="small-12 medium-12 large-6 columns">
		  	   <bb-textbox [placeholder]="'Flat No., Building Name'"  [required]="true" [(ngModel)]="address.addr2" name="addr2"></bb-textbox>
		  </div>
		  <div  class="small-12 medium-12 large-6 columns">
		  		<bb-textbox [placeholder]="'Landmark (Optional)'"  [(ngModel)]="address.addr3" name="addr3"></bb-textbox>
		  </div>
		  
		  <div class="small-6 medium-6 large-3 columns">
			  <bb-textbox [placeholder]="'City'"  [required]="true" [(ngModel)]="address.city" name="city"></bb-textbox>
		  </div>
		  <div class="small-6 medium-6 large-3 columns">
		     <bb-textbox [placeholder]="'Pincode'"  [required]="true" [(ngModel)]="address.pinCode" name="pinCode"></bb-textbox>
		  </div>
		  
		  <div class="small-6 medium-6 large-3 columns">
		<!-- 	  <bb-textbox [placeholder]="'State'" [(ngModel)]="address.stateCode"></bb-textbox> -->
		
				<md-input-container>
					<input mdInput type="text" placeholder="State" name="state" [formControl]="stateCtrl" [required]="true" [(ngModel)]="address.stateDescr" [mdAutocomplete]="stateAuto" /> 
			       	<md-autocomplete #stateAuto>
						<md-option *ngFor="let state of stateOptions" [value]="state.descr" 
						(click)="address.stateCode = state.stateCode;  " 
						(onSelect)="address.stateCode = state.stateCode; ">{{state.descr}}</md-option>
					</md-autocomplete>
				</md-input-container>
		  </div>
		  
		  <div  class="small-6 medium-6 large-3 columns">
		<!--        <bb-textbox [placeholder]="'Country'" [(ngModel)]="address.countCode"></bb-textbox> -->
				
				<md-input-container>
					<input mdInput type="text" placeholder="Country" name="country"  [formControl]="countryCtrl" [required]="true" [(ngModel)]="address.countDescr" [mdAutocomplete]="countryAuto" /> 
			       	<md-autocomplete #countryAuto>
						<md-option *ngFor="let country of countryOptions" [value]="country.descr" 
						(click)="address.countCode = country.countCode;  " 
						(onSelect)="address.countCode = country.countCode; ">{{country.descr}}</md-option>
					</md-autocomplete>
				</md-input-container>
		  </div>
		  
		  <div class="small-6 medium-6 large-6 columns">
		   	   <bb-textbox [placeholder]="'Alternate Phone (Optional)'" [(ngModel)]="address.contactNo" name="contactNo"></bb-textbox>
		  </div>
		  
		  <div class="small-6 medium-6 large-6 columns">
		  		<bb-email  [placeholder]="'Email ID (Optional)'" [(ngModel)]="address.emailId" name="emailId"></bb-email>
		  </div>
		  
		  <div class="small-12 medium-12 large-10 columns">
			  <span class="adress-type">Address Type</span>
			  <md-radio-group [(ngModel)]="address.addrType" name="addrType" >
				  <md-radio-button  class="home" value="R" >Home</md-radio-button>
				  <md-radio-button class="off-commercial" value="O" >Office/Commercial</md-radio-button>
			  </md-radio-group>
		  </div>
		  
		  <div class="small-12 medium-12 large-10 columns ecm-user-advance-info">
			  <span class="advance-type">Advance</span>
			  <section class="adress-use">
				  <md-checkbox class="addrUse-check" name="addrUseDel" [ngModel] = " address.addrUse == 'D' || address.addrUse == 'A' " (change) = "updateAddrUseD( $event );" >Set as delivery address</md-checkbox>
				  <md-checkbox class="addrUse-check" name="addrUseBill" [ngModel] = " address.addrUse == 'B' || address.addrUse == 'A'  " (change) = "updateAddrUseB( $event );" >Set as billing address</md-checkbox>
				  <md-checkbox class="default-check" name="addrDefault" [ngModel] = " address.isDefault == 'Y' " (change) = "updateDefault( $event );" >Set as default</md-checkbox>
			  </section>
		  </div>
	  </form>
  </div> 
  
</ng-template>
















