<div class="timeLineData">
	<div class="timeLineHead">
		<div class="timeLineTitel">
			<span class="time-line-title">Timeline</span>
		</div>
		<div *ngIf="todaysCallInfo && todaysCallInfo.CALL_DETAILS && todaysCallInfo.CALL_DETAILS.length > 0" class="expandAll" (click)="expand();">
		     <span class="expand-title">{{ isExpanded ? 'Expand Less' : 'Expand All'}}</span>
		     <i *ngIf="!isExpanded" class="material-icons expandLess">expand_less</i>
			 <i *ngIf="!isExpanded" class="material-icons expandMore">expand_more</i>
			 
 		     <i *ngIf="isExpanded" class="material-icons expandLess">expand_more</i>
			 <i *ngIf="isExpanded" class="material-icons expandMore">expand_less</i>
		</div>
	</div>
</div>
<div> 
	 <div *ngIf="!todaysCallInfo || ( todaysCallInfo.CALL_DETAILS && todaysCallInfo.CALL_DETAILS.length == 0 )" class="no-data-msg">
		 No Timeline data
	 </div>
    <timeline-entry #timeline *ngFor="let timeLineData of todaysCallInfo.CALL_DETAILS"  >
	   	 <timline-summaryData >
	   	 		<div class="timelineSummDate">
		              <div class="titleDateValue">
		               		<span class="dateValue">{{timeLineData.EVENT_DATE}}</span>
		              </div>
		              <div class="sec-timeline-expand-icon"></div>
	            </div>
	   	 </timline-summaryData>
   	 <timeline-content>
	   	 	<timeline-entry #timeline *ngFor="let placeData of timeLineData.PLACES" [fullLineShow] = "true" >
			 	<timline-summaryData>
			 		<div class="timelineSumm" >
			           	 <div class="titleName">
			           	 	<span *ngIf="placeData.EVENT_TIME">
			           			<span class="meetTime">{{placeData.EVENT_TIME.substring(0, 5)}}</span>
			           			<span class="amPm">{{placeData.EVENT_TIME.substring(5)}}</span>
			           	 	</span>
			           	 	<span *ngIf="!placeData.EVENT_TIME" class="missed-call-htitle">Missed</span>
			           	 </div>	
			              <div class="titleValue">
			               		<span class="value">{{placeData.LOCALITY}}</span>
			               		<span class="valueInfo">{{placeData.CUSTOMERS | customSummary : placeData.CUST_TYPES : 'CUST_TYPE': 'CUST_TYPE_DESCR'}}</span>
			              </div>
			              <div class="pri-timeline-expand-icon"></div>
		            </div>
			 	</timline-summaryData>
		 	<timeline-content>
		 		<div>
				 	<div *ngFor="let customerData of placeData.CUSTOMERS" class="timeline">
				        	 <div class="titleNameRes">
				        	 	<span *ngIf="customerData.EVENT_TIME">
				           		  <span class="meetTimeRes">{{customerData.EVENT_TIME.substring(0, 5)}}</span>
				           		  <span class="amPmRes">{{customerData.EVENT_TIME.substring(5)}}</span>
				           		</span>
				           		<span *ngIf="!customerData.EVENT_TIME" class="missed-call-title"></span>
				           	 </div>
				           	 <div  class="titleResult" (click)="goToCustomerInfo(customerData);">
					        	  <img class="pophelp-det-icon" (error) = "brokenUserImage($event)" [src]="getUserImage(customerData)"/>
					        	  <div class="clientInfo">
						           	  <span class="clientName">{{customerData.CUST_NAME ? customerData.CUST_NAME : '-'}}</span>
						           	  <span class="clientProfession">{{customerData.CUST_TYPE_DESCR ? customerData.CUST_TYPE_DESCR : '-'}}</span>
					           	  </div>
				           	</div>
				           	<div class="planningStatus">
				           		<span *ngIf="customerData.LISTED == 'Y'" class="plnUnplnStatus">{{customerData.STATUS}}</span>
				           	</div>
				           	<div class="meetStatus">	
				            	<span *ngIf="customerData.LISTED == 'Y'" [ngStyle]="{ 'color' : customerData.CUST_TYPE_DESCR == 'MISSED' ? '#aeaeae' : '#30d030' }" class="listed-call visionicon"></span>
				            	<img *ngIf="customerData.LISTED == 'N'" [src]="ASSET_IMG_URL + '/svg/star.svg'" class="unlisted-call">
				            </div>
			         </div>
		        </div>
		 	</timeline-content>	 
		 	</timeline-entry>
	 </timeline-content>	 
  </timeline-entry> 
</div>

