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

<ng-template #displayTemplate>
	<div class="atm-card-img">
	 <img class="ecm-card-icon" src="{{hostUrlService.hostUrl}}/ecm/assets/images/{{card?.payServiceProvider.trim()}}.png" />
	</div>
	<div class="user-bank-info">
	<div class="bname"> 
		<span class="bname-span">{{card?.bankName}}</span>
	</div>
	<div class="card-number"> 
		<span class="bnumber-span" #cardNumberEl>{{card?.acctNumber}}</span>
	</div>
	<div class="cardtype"> 
		<span class="ctype-span">{{card?.payServiceProvider}} </span>
	</div>
	</div>
</ng-template>



<ng-template #interactiveTemplate>
  <div class="row">
  <form [formGroup]="cardForm" (ngSubmit)="submitCard(cardForm)">
	  <div class="small-6 medium-12 large-6 columns">
	   	<md-form-field class="card-input-field">
			<input mdInput formControlName="creditCard" id="cc-number" name="acctNumber" [(ngModel)]="card.acctNumber" [placeholder]="'Card Number'" [required]="true" (changeType)="changeType($event);" (setCardLength)="setCardLength($event)" type="text" autocomplete="cc-number" ccNumber>
			<img *ngIf="card.payServiceProvider && card.payServiceProvider!='unknown'" class="pay-svcp-icon" src="/ecm/assets/images/{{card?.payServiceProvider.trim()}}.png" />
		</md-form-field>
	  </div>
	  <div class="small-6 medium-6 large-3 columns">
	     <md-form-field [floatPlaceholder]="'never'" class="card-input-field">
			<input mdInput formControlName="expiryMonth" id="cc-month" name="expiryMonth" [(ngModel)]="card.expiryMonth" [placeholder]="'MM'" type="number">
		</md-form-field>
	  </div>
	  
	   <div class="small-6 medium-6 large-3 columns">
	    <md-form-field [floatPlaceholder]="'never'" class="card-input-field">
			<input mdInput formControlName="expiryYear" id="cc-year" name="expiryYear" [(ngModel)]="card.expiryYear" [placeholder]="'YYYY'"type="number">
		</md-form-field>
	  </div>
	  <div class="small-6 medium-12 large-6 columns">
<!-- 		<bb-textbox formControlName="acctName" [id]="'cc-name'" name="acctName" [(ngModel)]="card.acctName" [placeholder]="'Cardholder Name'"></bb-textbox> -->
		
		<md-form-field class="card-input-field">
			<input mdInput formControlName="acctName" id="cc-name" name="acctName" [(ngModel)]="card.acctName" [placeholder]="'Cardholder Name'">
		</md-form-field>
	  </div>
	  
	   <input *ngIf="!isPaymentsPage" formControlName="cvv" type="hidden" [(ngModel)]="card.cvv">
  	   
  	   <div class="small-6 medium-6 large-3 columns" *ngIf="isPaymentsPage">
	    <md-form-field [floatPlaceholder]="'never'" class="card-input-field">
			<input mdInput formControlName="cvv" id="cvv" name="cvv" [(ngModel)]="card.cvv" [placeholder]="'CVV'"type="number">
		</md-form-field>
	  </div>
  </form>
  </div>
</ng-template>












