<div class="tiles-container {{classForParentBox}} popover__wrapper" [class.tiles-container-expanded]="type !== 'default'" *ngIf="course.isType != 'assessment'">
    <div (click)="selectCourse($event)" class="course-box {{toChangeCursor}}">
        <div class="row tiles-img-container" *ngIf="role === 'course'" (click)="selectCourse($event)">
            <img src="{{imageUrl}}/assets/img/employee/shared/check_active copy.png" (click)="selectCourse($event)" class="tile-selected-img">
            <img src="{{imageUrl}}/assets/img/employee/shared/check_active.png" (click)="selectCourse($event)" class="ticked-selected-img">
            <img src="{{imageUrl}}/assets/img/employee/shared/delete_icon.png" (click)="deleteCourse($event)" class="ticked-todelete-img" />
            <div class=" img-box {{showHoverShadowEffect}}" (click)="selectCourse($event)" [class.img-actions]="type !== 'default'">
                <img [src]="course.image3">
            </div>
        </div>
        <div class="row" *ngIf="role === 'assessment'" data-html="true" (click)="selectCourse($event)">
            <img *ngIf="!selectedItem" src="{{imageUrl}}/assets/img/employee/shared/check_active copy.png" (click)="selectCourse($event)" class="tile-selected-img">
            <img src="{{imageUrl}}/assets/img/employee/shared/check_active.png" (click)="selectCourse($event)" class="ticked-selected-img">
            <img src="{{imageUrl}}/assets/img/employee/shared/delete_icon.png" (click)="deleteCourse($event)" class="ticked-todelete-img" />
            <div>
                <!--{{course.usecaseDescription}}-->
            </div>
        </div>
        <!--<div class="row course-published">
        <div class="col-xs-12">
            <p> Published: {{ course.createdDt | date:"dd MMM y"}}</p>
        </div>
    </div>-->
        <div>
            <!--<button type = "button" class = "btn btn-default" title = "Popover title"
            data-container = "body" data-toggle = "popover" data-placement = "left"
            data-content = "Some content in Popover on left">

            Popover on left
        </button>        -->

        </div>
        <div class="row course-content" *ngIf="role === 'assessment'; else showWithImg">
            <div *ngIf="selectedItem" data-html="true">
                <img class="cursor-pointer" src="{{imageUrl}}/assets/img/employee/shared/close_circle.png" (click)="deleteSelectedAssessment(selectedIndex)" class="deleteIcon" />
            </div>
            <div class="col-xs-12 assessment-details img-box {{showHoverShadowEffect}}">
                <p *ngIf="course?.assessmentDesc">{{course?.assessmentName}}</p>
                <p *ngIf="course?.assessmentDesc">{{course?.pgSkillTrackMstr.skillTrackName}}</p>
                <p *ngIf="course?.name">{{course?.name | lowercase | capitalizeFirstLeter}}</p>
                <!--<p *ngIf="course?.description">{{course?.description}}</p>-->
                <div (click)="selectCourse($event)">
                    <p class="block-with-text">{{course?.usecaseTitle}}</p>
                    <p>{{course?.pgExperienceLevel?.experienceLevel}}</p>
                    <p class="level-text" *ngIf="course?.pgExperienceLevelName">{{course?.pgExperienceLevelName | lowercase | capitalizeFirstLeter}} Level</p>
                    <p>
                        <span class="skill-text" *ngFor="let skillName of course?.skills">{{skillName}}</span>
                    </p>
                    <!--<div class="course-dulration" *ngIf="course?.usecaseDescription" [innerHTML] = "course?.usecaseDescription"></div>-->
                </div>
                <div class="col-md-6 col-xs-6 no-padding" *ngIf="course?.courseCount">
                    <p class="course-count no-margin">{{course?.courseCount}}</p>
                    <p class="course-count-text">Courses</p>
                </div>
                <div class="col-md-6 col-xs-6 no-padding" *ngIf="course?.primaryAssessCount || course?.technicalAssessCount || course?.businessAssessCount">
                    <p class="assessment-count no-margin">{{course?.primaryAssessCount+ course?.technicalAssessCount+ course?.businessAssessCount}}</p>
                    <p>Assessment</p>
                </div>
            </div>
        </div>

        <ng-template #showWithImg>
            <div class="row course-content">
                <div class="col-xs-12">
                    <p class="block-with-text">{{ course.courseName }}</p>
                    <a *ngIf="course?.pgSkillTrackMstr?.skillTrackName">
                        <p class="block-with-text">{{ course?.assessmentDesc }}</p>
                    </a>
                </div>
            </div>
        </ng-template>
        <div class="course-content" *ngIf="role === 'assessment'">
            <p *ngIf="course?.assessmentDesc" class="assess-desc block-with-text">{{course?.assessmentDesc}}</p>
        </div>
        <div class="row course-content footer-img {{hideDuration}}">
            <div class="col-xs-7 course-dulration">
                <div *ngIf="course?.duration || course?.testDuration">
                    <img src="{{imageUrl}}/assets/img/employee/shared/Duration.png" (click)="selectCourse($event)">
                    <span>{{course?.duration}}</span>
                    <span *ngIf="course?.testDuration">{{course?.testDuration}}&nbsp;Mins</span>
                </div>
            </div>
            <div class="col-xs-5" *ngIf="role === 'assessment'; else displayStar">
                <div>
                    <img src="{{imageUrl}}/assets/img/employee/shared/Views.png" (click)="selectCourse($event)">
                    <span *ngIf="course?.testTakersCount; else displayZero">{{course?.testTakersCount}}</span>
                    <ng-template #displayZero>
                        <span>0</span>
                    </ng-template>
                </div>
            </div>
            <ng-template #displayStar>
                <div class="col-xs-5 rating-star">
                    <!--<mat-icon class="star-icon">star</mat-icon>
                    <mat-icon class="star-icon">star</mat-icon>
                    <mat-icon class="star-icon">star</mat-icon>
                    <mat-icon class="star-icon">star</mat-icon>
                    <mat-icon class="star-icon">star_half</mat-icon>-->
                </div>
            </ng-template>
        </div>
        <div *ngIf="heightCard" class=" row course-content {{hideDuration}}">

            <div class="setDueDateDiv">
                <h3> Due date</h3>
                <h4>{{course.dueDate}}</h4>
            </div>
        </div>

    </div>

    <button *ngIf="viewDetailsBtn && (role === 'course')" class="btn-details bnt-primary" (click)="viewDetails()">VIEW DETAILS</button>
    <button *ngIf="viewDetailsBtn && (role === 'assessment')" class="btn-details bnt-primary" (click)="viewCardDetails(course?.id)">VIEW DETAILS</button>
    <!--<div class="row" *ngIf="showGoto">

        <button class="btn btn-danger btn-block" (click)="viewDetails()">View Details</button>
    </div>-->
    <div *ngIf="course?.usecaseDescription" class="push popover__content">
        <div class="discription" [innerHTML]=course?.usecaseDescription></div>
    </div>
</div>