<div class="tab-header-panel">{{tabHeaderTitle}}</div>
<div class="tab-content-panel">
    <div class="tab-content-title">
        <!--<div class="tab-content-initials">{{tabContentInitials}}</div>-->
    	<div class="tab-content-initials" [ngClass]="getThemeClass()">
    		<img *ngIf="imageSrc && imageNotFound == false " [src]="imageSrc" (error)=" setImageNotFound(true) " />
    		<img *ngIf="altImageSrc && imageNotFound == false " [src]="altImageSrc" (error)=" setImageNotFound(false) " />
            <span *ngIf="imageNotFound == true ">{{tabContentInitials}}</span>
    	</div>
    	<div class="tab-content-title-column" style ="width: calc(100% - 70px);">{{tabContentTitle}}</div>
         <div *ngIf='tabClosebutton && tabClosebutton.length > 0'  >
                <span class="ang-drilldown-close-btn visionicon" (click)="closeDrillDown();"></span>
        </div>
        </div>

	<div class="bb-tab-panel">
		<mat-tab-group  #tabCharts (selectedTabChange)="tabChanged($event)">
		<div *ngIf = "processedTabsEmpty">
		  <mat-tab  *ngFor="let tabCfg of tabConfig.tabs " [label]="tabCfg.title">
		  	<!--<div *ngIf !=tabCfg.data  >
                <ng-container *ngTemplateOutlet="tabLayoutTempl; context:{'chartConfig' : tabCfg.chartConfig, 'datasets' : tabCfg.datasets, 'labels' : tabCfg.labels, 'summary': tabCfg.summary } ">
                </ng-container>
          </div>
          <div *ngIf=tabCfg.data  >
                <ng-container
                *ngTemplateOutlet="tabLayoutRankTempl; context:{'chartConfig' : tabCfg.chartConfig, 'cards': tabCfg.data.detailModel, 'component_config':tabCfg.data,'isSelection': tabCfg.data.isSelection, 'datasets' : tabCfg.datasets, 'labels' : tabCfg.labels, 'summary': tabCfg.summary } ">
                </ng-container>
            </div>-->
        <ng-container *ngIf= "tabCfg.data ;else elseBlock">
          <div>
            <ng-container
              *ngTemplateOutlet="tabLayoutRankTempl; context:{'chartConfig' : tabCfg.chartConfig, 'cards': tabCfg.data.detailModel, 'component_config':tabCfg.data,'isSelection': tabCfg.data.isSelection, 'datasets' : tabCfg.datasets, 'labels' : tabCfg.labels, 'summary': tabCfg.summary } ">
            </ng-container>
          </div>
        </ng-container>
        <ng-template #elseBlock>
          <ng-container *ngTemplateOutlet="tabLayoutTempl; context:{'chartConfig' : tabCfg.chartConfig, 'datasets' : tabCfg.datasets, 'labels' : tabCfg.labels, 'summary': tabCfg.summary } ">
          </ng-container>
        </ng-template>
		  </mat-tab>
		  </div>
        <div *ngIf="!processedTabsEmpty">
            <mat-tab  *ngFor="let tabCfg of processedTabs " [label]="tabCfg.title">
                <!--<div *ngIf !=tabCfg.data  >
                <ng-container *ngTemplateOutlet="tabLayoutTempl; context:{'chartConfig' : tabCfg.chartConfig, 'datasets' : tabCfg.datasets, 'labels' : tabCfg.labels, 'summary': tabCfg.summary } ">
                </ng-container>
                </div>
                <div *ngIf=tabCfg.data  >
                <ng-container
                *ngTemplateOutlet="tabLayoutRankTempl; context:{'chartConfig' : tabCfg.chartConfig, 'cards': tabCfg.data.detailModel, 'component_config':tabCfg.data,'isSelection': tabCfg.data.isSelection, 'datasets' : tabCfg.datasets, 'labels' : tabCfg.labels, 'summary': tabCfg.summary } ">
                </ng-container>
            </div>-->
              <ng-container *ngIf= "tabCfg.data ;else elseBlock">
		            <div>
                  <ng-container
                  *ngTemplateOutlet="tabLayoutRankTempl; context:{'chartConfig' : tabCfg.chartConfig, 'cards': tabCfg.data.detailModel, 'component_config':tabCfg.data,'isSelection': tabCfg.data.isSelection, 'datasets' : tabCfg.datasets, 'labels' : tabCfg.labels, 'summary': tabCfg.summary } ">
                  </ng-container>
		            </div>
	            </ng-container>
	            <ng-template #elseBlock>
			          <ng-container *ngTemplateOutlet="tabLayoutTempl; context:{'chartConfig' : tabCfg.chartConfig, 'datasets' : tabCfg.datasets, 'labels' : tabCfg.labels, 'summary': tabCfg.summary } ">
	              </ng-container>
	            </ng-template>
            </mat-tab>
        </div>
		</mat-tab-group>
	</div>
</div>


<ng-template #tabLayoutTempl  let-chartConfig='chartConfig' let-datasets='datasets' let-labels='labels' let-summary='summary' >
	<div class="tabContentTempl">
		<span *ngIf='!datasets || datasets.length == 0 ' class="no-layout">No data available</span>
		<div *ngIf='datasets && datasets.length > 0' >
			<span *ngIf="chartConfig" >
				<bb-custom-chart
						[chartType]= "chartConfig.chartType"
						[labels]= "labels"
						[datasets]="datasets"
	                    [options]="chartConfig.options">
	             </bb-custom-chart>
             </span>
		</div>
		<div *ngIf='summary' class="tabSummary" >
			<bb-custom-chart *ngIf="summary['chartdata'] != undefined " [chartType]= "chartProps.chartType"
					[labels]= "chartProps.labels"
					[data]="[summary['chartdata']]"
                    [options]="chartProps.options"
                    [parentData]="summary" >
            </bb-custom-chart>
            <!--
		    <span class="tabSummaryInfo"> {{summary['summary_info_text']}} </span>
			<span class="tabSummarySubInfo"> {{summary['summary_subinfo_text']}} </span>
			-->
		    <span class="tabSummaryInfo" [innerHTML] = "summary['summary_info_text']"></span>
			<span class="tabSummarySubInfo" [innerHTML] = "summary['summary_subinfo_text']"></span>
		</div>
	</div>
</ng-template>

<ng-template #tabLayoutRankTempl  let-chartConfig='chartConfig'  let-cards='cards'  let-component_config='component_config' let-datasets='datasets' let-labels='labels' let-summary='summary'  let-isSelection='isSelection'  >
	<div class="tabContentTempl">


			<span>
				<!-- <bb-custom-chart
						[chartType]= "chartConfig.chartType"
						[labels]= "labels"
						[datasets]="datasets"
	                    [options]="chartConfig.options">
	             </bb-custom-chart> -->
                 <bb-custom-card-panel
                         [title]="labels"
                         [cards]="cards"
                         [component]="component_config"
                         [isSelection]="isSelection">
	             </bb-custom-card-panel>
             </span>

		<div *ngIf='summary' class="tabSummary" >
			<bb-custom-chart *ngIf="summary['chartdata'] != undefined " [chartType]= "chartProps.chartType"
					[labels]= "chartProps.labels"
					[data]="[summary['chartdata']]"
                    [options]="chartProps.options"
                    [parentData]="summary" >
            </bb-custom-chart>
            <!--
		    <span class="tabSummaryInfo"> {{summary['summary_info_text']}} </span>
			<span class="tabSummarySubInfo"> {{summary['summary_subinfo_text']}} </span>
			-->
		    <span class="tabSummaryInfo" [innerHTML] = "summary['summary_info_text']"></span>
			<span class="tabSummarySubInfo" [innerHTML] = "summary['summary_subinfo_text']"></span>
		</div>
	</div>
</ng-template>
