<ng-container [ngSwitch]="template">          
	<ng-container *ngSwitchCase="'OPEN_DIALOG'">      
		<ng-container *ngTemplateOutlet="openDialog"></ng-container>
	</ng-container> 
	<ng-container *ngSwitchCase="'SAVE_DIALOG'">      
		<ng-container *ngTemplateOutlet="saveDialog"></ng-container>
	</ng-container>  
	
	<ng-container *ngSwitchCase="'DELETE_DIALOG'">      
		<ng-container *ngTemplateOutlet="deletData"></ng-container>
	</ng-container> 
		
	<ng-container *ngSwitchDefault >      
		<ng-container *ngTemplateOutlet="default"></ng-container>
	</ng-container>                         
</ng-container> 

<ng-template #default>
	<h1>Deafult Template</h1>
</ng-template>

<ng-template #openDialog>
	<div class="open-dialog-content" *ngIf='isEmptyLayout'>
		<span>No layouts available</span>
		<mat-dialog-actions align="end">
			<button class="overlayBtn overlayCloseBtn" mat-dialog-close>Cancel</button>
		</mat-dialog-actions>
	</div>
	<div class="open-dialog-content" *ngIf='!isEmptyLayout'>
		<ng-container *ngTemplateOutlet="headerTempl; context: {'headerTitle' : 'Available Layouts', 'closeBtnTitle': 'Cancel', 'saveBtnTitle' : 'Apply', 'resp' : currentLayout} "></ng-container>

		<div class="ExpansionPanel">
<!-- 			<ng-container *ngTemplateOutlet="layoutTempl; context: {'layoutData' : layoutReportData.MY_LAYOUT, 'layoutDescr': 'My Layouts', 'isOthers' : false} "></ng-container> -->
<!-- 			<ng-container *ngTemplateOutlet="layoutTempl; context: {'layoutData' : layoutReportData.OTHER_LAYOUT, 'layoutDescr': 'Others Layouts', 'isOthers' : true} "></ng-container> -->
		
			<mat-tab-group>
			  <mat-tab label="My Layouts">
			  	<ng-container *ngTemplateOutlet="layoutTempl; context: {'layoutData' : layoutReportData.MY_LAYOUT, 'layoutDescr': 'My Layouts', 'isOthers' : false} "></ng-container>
			  </mat-tab>
			  <mat-tab label="Others Layouts">
			  	<ng-container *ngTemplateOutlet="layoutTempl; context: {'layoutData' : layoutReportData.OTHER_LAYOUT, 'layoutDescr': 'Others Layouts', 'isOthers' : true} "></ng-container>
			  </mat-tab>
			</mat-tab-group>
		</div>
	</div>
</ng-template>

<ng-template #saveDialog>
	<div class="dialog-content">
		<ng-container *ngTemplateOutlet="headerTempl; context: {'headerTitle' : 'Save Layout', 'closeBtnTitle': 'Cancel', 'saveBtnTitle' : 'Save', 'resp' : currReportName } "></ng-container>
		
		<div class="text_field_block">
			<input [(ngModel)]='currReportName' type="text" class="text_field" (change)="currReportName=$event.target.value"
			 [readonly]=editMode required maxlength="75"> <label class="text_label">Layout Name:</label>
		</div>
	</div>
</ng-template>


<ng-template #layoutTempl  let-descr='layoutDescr' let-layoutData='layoutData' let-isOthers='isOthers'>
	<div class="content">
		<span *ngIf='layoutData && layoutData.length == 0 ' class="no-layout">No layouts available</span>
		<div *ngFor="let layoutDetail of layoutData;">
			<div class="layoutView" (click)="setCurrentLayout(layoutDetail, isOthers);">
		    	<img class="user-det-icon" (error)="brokenUserImage($event)" [src]="getUserImage(layoutDetail)"/>	
			    <div class="userDet">
					<span *ngIf="isOthers" class="otherLayoutName">{{layoutDetail.userName}}</span>
					<span [ngClass]="isOthers ? 'otherLayoutName' : 'myLayoutName'">{{layoutDetail.prefName}} 
                    </span>
                   	<span *ngIf="!isOthers" class="deletelayout" (click)="ondelete(layoutDetail.objName,layoutDetail.prefName)"><i class="material-icons delete-icon" >delete</i></span>
				</div>
				<span><i class="material-icons myLayoutIcn" *ngIf="selectedLayout == layoutDetail.objName+layoutDetail.prefName+layoutDetail.userId">check_circle</i></span>
			</div>
		</div>
	</div>
</ng-template>

<ng-template #headerTempl let-headerTitle='headerTitle' let-closeBtnTitle='closeBtnTitle' let-saveBtnTitle='saveBtnTitle' let-resp="resp">
	<div>
		<div>
			<div class="headerTitle">{{headerTitle}}</div>
			<button class="overlayBtn overlayCloseBtn" (click)="onNoClick();">{{closeBtnTitle}}</button>
			<button class="overlayBtn overlaySaveBtn" [mat-dialog-close]="resp">{{saveBtnTitle}}</button>
		</div>
	</div>
</ng-template>

<ng-template #deletData >
			<div class = "dialog-content">
			<div class="DeleteHedTitle">Are you sure you want to delete</div>
  			<button class="overlayBtn overlayCloseBtn" (click)="onNoClick();" [mat-dialog-close]="resp">Cancel</button>
			<button class = "overlayBtn overlaySaveBtn" (click)="ondeleteClick();"[mat-dialog-close]="resp">Delete</button>
			</div>
</ng-template>
