<associate-container>

<!-- Added by Sonam K on 30-JUL-19 [To add close button] START -->
	<closePanel-button >
		<div class="assc-closePanel-icon" (click)="close();">x</div>
	</closePanel-button>
<!-- Added by Sonam K on 30-JUL-19 [To add close button] END -->

	<back-button (click)="abort();">
 		<span class="vision-ui-arrow_left" style="color:#00caff; font-size: 20px;"  ></span>
		<span class="assc-close-title" style="color:#00caff;font-size: medium; line-height: 22px;" >Back</span>
	</back-button>
	<page-title>Associate - {{ assocObject.descr || assocObject.obj_name }}</page-title>
	<page-subtitle>{{content.shDescr}}</page-subtitle>
 	<confirm-button>
		<span class="vision-ui-check" style="color:#00caff; font-size: 18px;" > </span>
		<span (click) = "onDone();" class="assc-done-title" style="color:#00caff; font-size: medium;" >Done</span>
	</confirm-button>

	<page-content>
		 <div class="search-psnel">
			 <span class="vision-ui-search" style="font-size: 15px; position: relative; padding: 16px 5px; color: #dcd4d4; ">
			</span>
			<bb-autosuggest class="ang-filter-input" style="width: 100%;"
							[ngModel]="filterValue"
							[uxDesign] = "'UX3'"
							[dataSource]= "dataSource"
							[isPophelp]="false"
							[clearAftrSelection] = "true"
							placeholder = "Search transaction"

							(onSelectionChange)="changeSelection($event);"
							(onChangeValue) = "onChangeValue($event)">

			</bb-autosuggest>
		</div>

		<div class="assc-loader-container" *ngIf="status == 'loading'">
<!-- 			<mat-spinner class="clm-loader"></mat-spinner> -->
				<img class="clm-loader" src="dashboard/assets/images/svg/loading.svg" /> 
		</div>

		<div class="detail-container" *ngIf="status == 'nodata'">
			<span class="no-data-msg">No data found</span>
		</div>

		<div class="detail-container" *ngIf="status == 'failed'">
			<span class="failed-msg">Failed to load</span>
		</div>


<!--Commented by SOnam K on 30-JUL-19-->
		<!--  <div #elementRef class="transactions-container" > </div>-->

<!-- Added by Sonam K on 30-JUL-19 -->
		<div class="transactions-container" >
			<div class="assoc-obj-feed" *ngFor="let feedData of feedDataList" (click)="onFeedClick();" >
				<div class="assocobj-icon-container" >
					<img class="assocobj-icon" [src]="feedData.profileImg" />
				</div>
				<div class = "assocobj-detail-container" (click)="onFeedClick();">
					<div style='display: inherit;' [innerHTML]="feedData.profileInfo">
					</div>
					<div class="selectedPages">
						<span *ngIf="feedData.docPagesHtml; else other">
							Pages {{feedData.selectedPagesCount}}/{{feedData.docPagesHtml}}
						</span>
						<ng-template #other>
							Selected Pages {{feedData.selectedPagesCount}}
						</ng-template>
					</div>
					</div>
					<div  class="assocobj-info-container" align= "right" >
						<span *ngIf="feedData.closeTransactionIcon">
							<span class='assc-close-transaction visionicon' (click)="removePnlHandler($event,feedData['@ref_id'])"></span>
						</span>
					</div>
			</div>
		</div>
		<div class="assoc-tran-add-button">
			<button (click)="addTransaction();" mat-fab class="add_Attachmennt-Button">
				<mat-icon class="icon"><i class="icon-display material-icons">add</i></mat-icon>
			</button>
		</div>

	</page-content>

</associate-container>