<ng-container *ngTemplateOutlet="template == 'COURSE_HISTORY' ? courseHistoryTempl : callHistoryTempl"></ng-container>

<ng-template #callHistoryTempl>
    <div>    
          <div *ngIf="!callHistory || (callHistory && callHistory.length == 0)" class="ch-no-data-text">
            No Call History
          </div>
          
          <div *ngIf="callHistory && callHistory.length > 0" class="customer-callhist-cont">
            <timeline-entry *ngFor="let call of callHistory" [timeLineEntry]="call">			
              <timline-summaryData>
                    <div class="timelineSumm">
                        <div class="titleName">
                          <span class="timeline-date">{{call.eventDate}}</span>
                          <span class="timeline-mon-year">{{call.eventMonth}} {{call.eventYear}}</span>
                        </div>	
                        <div class="titleValue">
                            <span class="value">
                              <span>{{call.CALL_OUTCOME_DESCR ? call.CALL_OUTCOME_DESCR : 'Believer'}}</span>
                              <span class="cust-event-time">{{call.EVENT_TIME_START}}</span>
                            </span>
                            <span class="valueInfo">{{call.REMARKS ? call.REMARKS : 'No remarks'}}</span>
                        </div>
                        <div class="ch-timeline-expand-icon"></div>
                      </div>
              </timline-summaryData>
              
              <timeline-content>
                <div class="call-hist-detail-cont">
                  <span class="call-hist-detail-title">Order</span>
                  <table style="width:100%" *ngIf="call.ORDER_DETAILS && call.ORDER_DETAILS.length > 0">
                    <tr>
                      <th style="text-align: left;padding-bottom: 8px;">Product</th>
                      <th style="text-align: right;padding-bottom: 8px;">Quantity</th> 
                      <th style="text-align: right;padding-bottom: 8px;">Value</th>
                    </tr>
                    <tr *ngFor="let order of call.ORDER_DETAILS">
                      <td style="text-align: left;padding-bottom: 8px;">{{order.ITEM_DESCR}}</td>
                      <td style="text-align: right;">{{order.QUANTITY}}</td>
                      <td style="text-align: right;">{{order.VALUE}}</td>
                    </tr>
                  </table>
                  <span *ngIf="call.ORDER_DETAILS && call.ORDER_DETAILS.length == 0" class="nodata-msg">No data to display</span>
                </div>
                <div class="call-hist-detail-cont">
                  <span class="call-hist-detail-title">Brand</span>
                  <table style="width:100%" *ngIf="call.BRAND_DETAILS && call.BRAND_DETAILS.length > 0">
                    <tr>
                      <th style="text-align: left;padding-bottom: 8px;">Brand</th>
                      <th style="text-align: right;padding-bottom: 8px;">Actual Order</th> 
                    </tr>
                    <tr *ngFor="let brand of call.BRAND_DETAILS">
                      <td style="text-align: left;padding-bottom: 8px;">{{brand.BRAND}}</td>
                      <td style="text-align: right;">{{brand.ACTUAL_ORDER}}</td>
                    </tr>
                  </table>
                  <span *ngIf="call.BRAND_DETAILS && call.BRAND_DETAILS.length == 0" class="nodata-msg">No data to display</span>
                </div>
                <div class="call-hist-detail-cont">
                  <span class="call-hist-detail-title">Display</span>
                  <table style="width:100%" *ngIf="call.DISPLAY_DETAILS && call.DISPLAY_DETAILS.length > 0">
                    <tr>
                      <th style="text-align: left;padding-bottom: 8px;">Display Area</th>
                      <th style="text-align: right;padding-bottom: 8px;">Display Image</th> 
                    </tr>
                    <tr *ngFor="let dispDet of call.DISPLAY_DETAILS">
                      <td style="text-align: left;vertical-align: top;">{{dispDet.DISPLAY_AREA}}</td>
                      <td style="text-align: right;">
                        <img [src]="hostUrl+'/'+dispDet.DISPLAY_IMAGE" (error)="brokenImage($event)" class="displayDetailImg">
                      </td>
                    </tr>
                  </table>
                  <span *ngIf="call.DISPLAY_DETAILS && call.DISPLAY_DETAILS.length == 0" class="nodata-msg">No data to display</span>
                </div>			
              </timeline-content>
            </timeline-entry>
          </div>
    </div>
</ng-template>

<ng-template #courseHistoryTempl>
    <div>    
          <div *ngIf="!courseHistory || (courseHistory && courseHistory.length == 0)" class="ch-no-data-text">
            No Course History
          </div>
          
          <div *ngIf="courseHistory && courseHistory.length > 0" class="customer-callhist-cont">
            <timeline-entry *ngFor="let course of courseHistory | slice:0:displayLength " [timeLineEntry]="course">			
              <timline-summaryData>
                    <div class="timelineSumm">
                        <div class="titleName">
                          <span class="timeline-date">{{course.courseDate}}</span>
                          <span class="timeline-mon-year">{{course.courseMonth}} {{course.courseYear}}</span>
                        </div>	
                        <div class="titleValue">
                            <span class="coursevalue">
                              <span>{{course.COURSES_COUNT}} Courses, {{course.VIDEOS_COUNT}} Videos</span>
                              <span class="cust-event-time">{{course.COURSE_TIME_START}}</span>
                            </span>
                            <span class="courseDuration">{{course.courseDuration ? course.courseDuration : ''}}</span>
                        </div>
                        <div class="ch-timeline-expand-icon"></div>
                      </div>
              </timline-summaryData>
              
              <timeline-content>
               		
              </timeline-content>
            </timeline-entry>
            
            <button *ngIf="courseHistory.length > 2" mat-raised-button class="showmore-button" (click)="showMore();" >
		      {{ showAll ? 'Show Less' : 'Show More' }}
	        </button>
          </div>
    </div>
</ng-template>