<div class="tiles-container" [class.tiles-container-expanded]="type !== 'default'" *ngIf="course.isType != 'assessment'; else miniAssessment">
    <div class="row" *ngIf="course?.candidate">
        <app-candidate-info [fullName]="course?.candidate.userInfoMstr.fullName" [experienceLevel]="course?.candidate.experienceLevel" [jobId]="course?.candidate.jobId"> </app-candidate-info>
        <app-skills [skills]="course?.candidate.userInfoMstr.pgUserSkillMapping"></app-skills>
    </div>
    <div class="row" *ngIf="!role">
        <img src="{{imageUrl}}/assets/img/employee/shared/check_active.png" (click)="selectCourse($event)" class="tile-selected-img">
        <div class="img-container" [class.img-actions]="type !== 'default'">
            <ng-container *ngIf="type !== 'default'" [ngSwitch]="true">
                <ng-container *ngSwitchDefault>
                    <button class="btn-details" (click)="viewDetails()">VIEW DETAILS</button>
                </ng-container>
                <ng-container *ngSwitchCase="type === 'open'">
                    <button class="btn-details" (click)="updateCourse($event);">START COURSE</button>
                </ng-container>
                <ng-container *ngSwitchCase="type === 'inprogress' || type === 'overdue'">
                    <button class="btn-details" (click)="updateCourse($event);">COMPLETE COURSE</button>
                </ng-container>
            </ng-container>
            <img [src]="course.image3" (click)="type === 'default' && viewDetails()">
        </div>
    </div>
    <div class="row" *ngIf="role">
      <img src="{{imageUrl}}/assets/img/employee/shared/check_active.png" (click)="selectCourse($event)" class="tile-selected-img">
      <div class="img-container" [class.img-actions]="type !== 'default'">
        <ng-container *ngIf="type !== 'default'">
          <ng-container>
            <button class="btn-details" (click)="viewDetails()">VIEW DETAILS</button>
          </ng-container>
        </ng-container>
        <img [src]="course.image3" (click)="type === 'default' && viewDetails()">
      </div>
    </div>
    <div class="row course-published">
        <div class="col-xs-12">
            <p> Published: {{ course.createdDt | date:"dd MMM y"}}</p>
        </div>
    </div>
    <div class="row course-content">
        <div class="col-xs-12">
            <a (click)="viewDetails()"><p>{{ course.courseName }}</p></a>
        </div>
    </div>
    <div [ngSwitch]="type">
        <ng-container *ngSwitchDefault>
            <div class="row course-details course-duration">
                <div class="col-xs-6 text-left">
                    <h1> {{ getDuration() }}</h1>
                    <h3>Duration</h3>
                </div>
                <div class="col-xs-6 course-rating">
                    <mat-icon *ngFor="let number of rating">star</mat-icon>
                </div>
            </div>
            <div class="row course-users">
                <div class="col-xs-8">
                    <ng-container *ngIf="subscribedUsers.length > 0">
                        <div class="col-xs-4 usr-info-avatar" *ngFor="let user of subscribedUsers">
                            <span>{{ user.initials }}</span>
                        </div>
                        <p *ngIf="subscribedUsers.length > 3">+{{ otherSubscribedUsersCount }}</p>
                    </ng-container>
                </div>
                <div class="col-xs-4 bookmark">
                    <img *ngIf="course?.assessment" src="{{imageUrl}}/assets/img/employee/shared/bookmark.png">
                </div>
            </div>
        </ng-container>
        <ng-container *ngSwitchCase="'assessment'">
            <ng-container *ngIf="(course?.assessmentDetails && course?.assessmentDetails?.employeeEventDetails[1]?.eventSts.toLowerCase() !== 'active' )||( role == 'coach' || role == 'PGM'); else takeAssessment">
                <div class="row course-assessment text-left">
                    <div class="col-xs-4">
                        <ng-container *ngIf="course?.assessmentDetails?.employeeEventDetails[1]?.eventSts === testStatus.COMPLETED && course?.assessmentDetails?.employeeEventDetails[1]?.eventScore; else inProgress">
                            <h1>{{course?.assessmentDetails?.employeeEventDetails[1]?.eventScore}}</h1>
                        </ng-container>
                        <a (click)="$event.preventDefault(); updateCourse(0)">
                            <h2>Primary Skill Evaluation</h2>
                        </a>
                    </div>
                    <div class="col-xs-4">
                        <ng-container *ngIf="course?.assessmentDetails?.employeeEventDetails[2]?.eventSts === testStatus.COMPLETED; else inProgress">
                            <h4 class="usecase-completed">Completed</h4>
                        </ng-container>
                        <a (click)="$event.preventDefault(); updateCourse(1)">
                            <h2>Technical Usecase</h2>
                        </a>
                    </div>
                    <div class="col-xs-4">
                        <ng-container *ngIf="course?.assessmentDetails?.employeeEventDetails[3]?.eventSts === testStatus.COMPLETED; else inProgress">
                            <h4 class="usecase-completed">Completed</h4>
                        </ng-container>
                        <a (click)="$event.preventDefault(); updateCourse(2)">
                            <h2>Business Usecase</h2>
                        </a>
                    </div>
                    <ng-template #inProgress>
                        <h4>In progress ...</h4>
                    </ng-template>
                </div>
            </ng-container>
            <ng-template #takeAssessment>
                <button class="btn-assessment" (click)="$event.preventDefault(); updateCourse(0)">TAKE ASSESSMENT</button>
            </ng-template>
        </ng-container>
        <ng-container *ngIf="displayFooter" [ngSwitch]="type">
            <ng-container *ngSwitchDefault>
                <hr>
                <footer [class.footer-overdue]="type === 'overdue'">
                    <div class="row course-duration">
                        <ng-container *ngIf="type === 'inprogress'; else elseBlock">
                            <div class="col-xs-6 text-left">
                                <h3>Started on</h3>
                                <h2>{{ course.startDate | date:"dd MMM y" }}</h2>
                            </div>
                            <div class="col-xs-6 text-right">
                                <h3>Days left</h3>
                                <h2>{{ getOverdue() }}</h2>
                            </div>
                        </ng-container>
                        <ng-template #elseBlock>
                            <div class="col-xs-12 text-right">
                                <h3>Days Overdue</h3>
                                <h2>{{ getOverdue() }}</h2>
                            </div>
                        </ng-template>
                    </div>
                    <div class="row" *ngIf="showGoto">
                        <button class="btn btn-danger btn-block" (click)="viewDetailPage()">View Details</button>
                    </div>
                </footer>
            </ng-container>
            <ng-container *ngSwitchCase="'assessment'">
                <ng-container *ngIf="course?.assessmentDetails && course?.assessmentDetails?.employeeEventDetails[1]?.eventSts.toLowerCase() !== 'active'">
                    <hr>
                    <footer>
                        <div class="row course-assessment">
                            <div class="col-xs-12 content">
                                <div class="coach-details">
                                    <h3>Assigned Coach</h3>
                                    <h2>{{ course?.assessmentDetails?.coachName }}</h2>
                                </div>
                                <div class="col-xs-4 usr-info-avatar"></div>
                            </div>
                        </div>
                    </footer>
                </ng-container>
            </ng-container>
        </ng-container>
    </div>

    <div class="row" *ngIf="showGoto">

        <button class="btn btn-danger btn-block" (click)="viewDetails()">View Details</button>
    </div>
</div>
<ng-template #miniAssessment>
    <div class="row">
        <div class="assessRow1">
            <img class="assessRow1Img" src="{{imageUrl}}/assets/img/pgflow/bookmark.png">
            <h2 class="assessRow1Name">{{course.assessmentEvent[0].pgEmployeeAssessmentMapping.pgSkillTrackMstr.description}}</h2>
        </div>
    </div>
    <div class="row">
        <div class="assessRow2">
            <div class="assessSkill">
                {{course.assessmentEvent[0].pgEmployeeAssessmentMapping.pgSkillTrackMstr.description}}
            </div>
        </div>
    </div>
        <div class="row">
            <div class="assessRow3" *ngIf="course.assessmentEvent[0].pgEmployeeAssessmentMapping.assessmentStatus === 'ASSESSMENT_ASSIGNED'; else takenAssessment">

                <span *ngIf="course.assessmentDtls.primaryAssessment">
        <img class="checkImg" src="{{imageUrl}}/assets/img/pgflow/check-green.png">
        <h2 class="assessmentName">Primary</h2>
      </span>
                <span *ngIf="course.assessmentDtls.technicalAssessment">
        <img class="checkImg" src="{{imageUrl}}/assets/img/pgflow/check-green.png">
        <h2 class="assessmentName">Technical</h2>
      </span>
                <span *ngIf="course.assessmentDtls.businessUseCase">
        <img class="checkImg" src="{{imageUrl}}/assets/img/pgflow/check-green.png">
        <h2 class="assessmentName">Busniess</h2>
      </span>

            </div>
          <ng-template #takenAssessment>
            <!--<pre>{{course}}</pre>-->
            <div class="assessRow3 course-assessment text-left">

            <div class="col-xs-4">
              <ng-container *ngIf="course?.assessmentEvent[0]?.eventSts === testStatus.COMPLETED && course?.assessmentEvent[0]?.eventScore; else inProgress">
                <h1>{{course?.assessmentEvent[0]?.eventScore}}</h1>
              </ng-container>
              <a (click)="$event.preventDefault(); gotoAssessmentEvnt(course.assessmentEvent[0].pgEmployeeAssessmentMapping)">
                <h2>Primary Skill Evaluation</h2>
              </a>
            </div>
            <div class="col-xs-4">
              <ng-container *ngIf="course?.assessmentEvent[1]?.eventSts === testStatus.COMPLETED; else inProgress">
                <h4 class="usecase-completed">Completed</h4>
              </ng-container>
              <a (click)="$event.preventDefault(); gotoAssessmentEvnt(course.assessmentEvent[0].pgEmployeeAssessmentMapping)">
                <h2>Technical Usecase</h2>
              </a>
            </div>
            <div class="col-xs-4">
              <ng-container *ngIf="course?.assessmentEvent[2]?.eventSts === testStatus.COMPLETED; else inProgress">
                <h4 class="usecase-completed">Completed</h4>
              </ng-container>
              <a (click)="$event.preventDefault(); gotoAssessmentEvnt(course.assessmentEvent[0].pgEmployeeAssessmentMapping)">
                <h2>Business Usecase</h2>
              </a>
            </div>
            <ng-template #inProgress>
              <h4>In progress ...</h4>
            </ng-template>
            </div>
          </ng-template>
        </div>

    <div class="row">
        <div class="assessRow4">
            <h3 class="assessDate">{{course.assessmentEvent[0].pgEmployeeAssessmentMapping.updatedDt | date:'d MMM yyyy' }}</h3>
            <h2 class="assessDueDate">Due date</h2>
        </div>
    </div>
        <div class="row">
            <div class="assessRow5" *ngIf="course.assessmentEvent[0].pgEmployeeAssessmentMapping.assessmentStatus === 'ASSESSMENT_ASSIGNED'">

                <button class="btn-assessment" (click)="gotoAssessmentEvnt(course.assessmentEvent[0].pgEmployeeAssessmentMapping)">TAKE ASSESSMENT</button>
            </div>
        </div>

</ng-template>
