<div *ngIf='videoData && videoData.length == 0' class="error-msg-container row">
	<span class="no-data-msg">No Data Found</span>
</div>

<div>
	<div *ngIf='(videoData && videoData.length > 0) || (trendVideoData && trendVideoData.length > 0)'>
		<div *ngIf="!cardSelect ; else courseContentTemp">
			<div *ngIf="videoOpenData && videoOpenData.length > 0 " class="course-library">
				<ng-container *ngTemplateOutlet="courseContainer; context: {'_data' : videoOpenData, 'courseDescr': 'Open Courses', '_option': 'O'} ">
				</ng-container>
			</div>
			<div *ngIf="videoContData && videoContData.length > 0 " class="course-library">
				<ng-container *ngTemplateOutlet="courseContainer; context: {'_data' : videoContData, 'courseDescr': 'Continue Courses', '_option': 'C'} ">
				</ng-container>
			</div>
			<div *ngIf="trendVideoData && trendVideoData.length > 0" class="course-library">
				<ng-container *ngTemplateOutlet="trendingCourseContainer; context: {'_trendData' : trendVideoData, 'courseDescr': 'Trending Courses'} ">
				</ng-container>
			</div>
		</div>
	</div>
	<mat-menu #menu="matMenu" xPosition="before"></mat-menu>
</div>

<ng-template #courseContentTemp>
	<span class="navBackBtn" *ngIf="cardSelect" (click)="backPageBtn(selectedCourse)">
		<i class="material-icons backBtn">keyboard_backspace </i>
	</span>
	<course-content [selectedCourse]="selectedCourse" [videoList]='videoList' (onCourseComplete)="onRefreshCourseData.emit();">
	</course-content>
</ng-template>

<ng-template #courseContainer let-descr='courseDescr' let-videoData='_data' let-option='_option'>
	<div class="headerTitle">
		<span class="titleDescr">{{descr}}</span>
		<span *ngIf='videoData.length > 6;' style="float: right;">
			<span class="see-all-section" *ngIf='getShowState(option)' (click)="setShowState(option, false, videoData.length);">
				<span class="sea-all-href">See all ({{videoData.length}})</span>
			</span>
			<span class="see-all-section" *ngIf='!getShowState(option)' (click)="setShowState(option, true, 6);">
				<span class="sea-all-href">See Less</span>
			</span>
		</span>
	</div>
	<div class="course-library-container row">
		<div *ngFor="let data of videoData |slice:0:getDisplayLen(option); let $index = index ">
			<div class="small-12 medium-4 large-2 column course-library-card-containers">
				<div class="course-library-card" (click)="onSelectCard(data)">
					<div  class="course-library-content-img-container">
						<span class="course-expiry">Ends in {{data.daysToGo}} days</span>
						<img class="doc-type-icon" [src]="hostUrl+data.courseContents[0]?.imagePath" (error)="brokenImage($event)">
					</div>
					<div class="course-library-card-footer">
						<div class="course-library-details">
							<span class="course-library-categoryshDescr" matTooltip="{{data.descr}}" matTooltipPosition="below">
								{{ data.descr }}
							</span>
						</div>
						<div class="course-library-doc-detail">
							<span class="course-library-doc-access">
								{{data.courseSubDescr}}
							</span>
							<span class="dot">.</span> <span class="course-library-totalVideo">
								{{data.courseContents.length}} Videos
							</span>
						</div>
						<div class="showLine" *ngIf="data.fullVideoAccesPos">
							<span class="videoStatusLine" [ngStyle]="{'background-color': data.fullVideoAccesPos  >= 100 ? 'lightgreen' : 'rgba(255, 0, 0, 0.52)', 'width.%' : data.fullVideoAccesPos}"></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</ng-template>

<ng-template #trendingCourseContainer let-descr='courseDescr' let-trendVideoData='_trendData'>
	<div class="headerTitle">
		<span class="titleDescr">{{descr}}</span>
		<span *ngIf='trendVideoData.length > 6;' style="float: right;">
			<span class="see-all-section" *ngIf='showAllTrending' (click)="showAllTrending = false; displayTLength = trendVideoData.length;">
				<span class="sea-all-href">See all ({{trendVideoData.length}})</span>
			</span>
			<span class="see-all-section" *ngIf='!showAllTrending' (click)="showAllTrending = true; displayTLength = 6;">
				<span class="sea-all-href">See Less</span>
			</span>
		</span>
	</div>
	<div class="course-library-container row">
		<div *ngFor="let data of trendVideoData |slice:0:displayTLength; let $index = index ">
			<div class="small-12 medium-4 large-2 column course-library-card-containers">
				<div class="course-library-card" (click)="onSelectCard(data)">
					<div class="course-library-content-img-container">
						<img class="doc-type-icon" src="{{data.courseContents[0]?.imagePath}}" (error)="brokenImage($event)">
					</div>
					<div class="course-library-card-footer">
						<div class="course-library-details">
							<span class="course-library-categoryshDescr" matTooltip="{{data.descr}}" matTooltipPosition="below">
								{{ data.courseSubDescr }}
							</span>
						</div>
						<div class="course-library-doc-detail">
							<span class="course-library-doc-access">
								{{data.courseSubDescr}}
							</span>
							<span class="dot">.</span> <span class="course-library-totalVideo">
								{{data.courseContents.length}} Videos
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</ng-template>
