<div class="row">
    <div class="col-md-4">
        <div class="details-box">
            <div class="text-box">
                <h3>{{learningPathDetails?.name | lowercase | capitalizeFirstLeter}}</h3>
                <p class="card-level">{{learningPathDetails?.pgExperienceLevelName | lowercase | capitalizeFirstLeter}} Level</p>

                <mat-chip-list>
                    <mat-chip *ngFor="let skill of learningPathDetails?.skillNames; let count = index">
                        <!-- [selectable]="selectable" [removable]="removable"  -->
                        {{skill}}
                    </mat-chip>
                </mat-chip-list>
                <p class="description">{{learningPathDetails?.description}}</p>
            </div>
            <div class="box-footer" *ngIf="learningPathId">
                <div class="col-md-6 text-left">
                    <img src="{{imageUrl}}/assets/img/employee/shared/Views.png">
                    <span *ngIf="learningPathDetails?.testTakersCount; else displayZero">{{learningPathDetails?.testTakersCount}}</span>
                    <ng-template #displayZero>
                        <span>0</span>
                    </ng-template>
                </div>
                <div class="col-md-6 text-right">
                    <img src="{{imagelink}}{{getStatusImageDetails(learningPathDetails?.userStatus, 'noName')}}.png" alt="" class="">
                    <span class="statusTxt">{{getStatusImageDetails(learningPathDetails?.userStatus, 'getStatusName')}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="count-box">
            <div class="box-img">
                <img src="{{imageUrl}}/assets/img/employee/profile/courses.png" alt="courses">
            </div>
            <h2>{{learningPathDetails?.courseCount}}</h2>
            <p class="course-text">Courses</p>
        </div>

    </div>
    <div class="col-md-2">
        <div class="count-box">
            <div class="box-img">
                <img src="{{imageUrl}}/assets/img/employee/profile/PA.png" alt="PA">
            </div>
            <h3>{{learningPathDetails?.primaryAssessCount}}</h3>
            <p class="assessment-text">Primary Assessment</p>
        </div>

    </div>
    <div class="col-md-2">
        <div class="count-box">
            <div class="box-img">
                <img src="{{imageUrl}}/assets/img/employee/profile/TA.png" alt="TA">
            </div>
            <h3>{{learningPathDetails?.technicalAssessCount}}</h3>
            <p class="assessment-text">Technical Assessment</p>
        </div>

    </div>
    <div class="col-md-2">
        <div class="count-box">
            <div class="box-img">
                <img src="{{imageUrl}}/assets/img/employee/profile/BA.png" alt="BA">
            </div>
            <h3>{{learningPathDetails?.businessAssessCount}}</h3>
            <p class="assessment-text">Business Assessment</p>
        </div>
    </div>
</div>

<!--<app-employee-assessment-course [Allcourserecords]="courseCollection" *ngIf="courseCollection"></app-employee-assessment-course>


<app-employee-assessment-card *ngIf="assessmentCollection?.primaryAssList" [title]="'Primary Assessment'" [primaryrecord]="assessmentCollection?.primaryAssList" [allskills]="skills"></app-employee-assessment-card>

<app-employee-assessment-card *ngIf="assessmentCollection?.technicalAssList" [title]="'Technical Usecase Assessment'" [technicalrecord]="assessmentCollection?.technicalAssList"
  [allskills]="skills"></app-employee-assessment-card>

<app-employee-assessment-card *ngIf="assessmentCollection?.businessAssList" [title]="'Business Usecase Assessment'" [businessrecord]="assessmentCollection?.businessAssList"
  [allskills]="skills"></app-employee-assessment-card>-->

<div *ngIf="detailsType === 'courseSelection'; else showDashboardCourseDetails">
    <div class="capability-transformation-slider">
        <h2>Courses</h2>
        <app-slider [valueStep]='300'>
            <app-bny-employee-course-card id="coursecard" [toChangeCursor]="'cursor-default'" [classForParentBox]="'main-box'" [course]="course" [role]="'course'" (selectCourseEvent)="selectCourse(course, 'course')" *ngFor="let course of courseCollection">
            </app-bny-employee-course-card>
        </app-slider>
    </div>
    <div class="capability-transformation-slider">
        <h2>Primary Assessment</h2>
        <app-slider [valueStep]='300'>
            <app-bny-employee-course-card id="coursecard" [toChangeCursor]="'cursor-default'" [classForParentBox]="'main-box'" [course]="course" [role]="'assessment'" (selectCourseEvent)="selectCourse(course, 'course')" *ngFor="let course of assessmentCollection?.primaryAssList">
            </app-bny-employee-course-card>
        </app-slider>
    </div>

    <div class="capability-transformation-slider">
        <h2>Technical Usacase Assessment</h2>
        <app-slider [valueStep]='300'>
            <app-bny-employee-course-card id="coursecard" [toChangeCursor]="'cursor-default'" [classForParentBox]="'main-box'" [course]="course" [role]="'assessment'" (selectCourseEvent)="selectCourse(course, 'course')" *ngFor="let course of assessmentCollection?.technicalAssList">
            </app-bny-employee-course-card>
        </app-slider>
    </div>

    <div class="capability-transformation-slider">
        <h2>Business Usacase Assessment</h2>
        <app-slider [valueStep]='300'>
            <app-bny-employee-course-card id="coursecard" [toChangeCursor]="'cursor-default'" [classForParentBox]="'main-box'" [course]="course" [role]="'assessment'" (selectCourseEvent)="selectCourse(course, 'course')" *ngFor="let course of assessmentCollection?.businessAssList">
            </app-bny-employee-course-card>
        </app-slider>
    </div>
</div>
<ng-template #showDashboardCourseDetails>
    <app-employee-assessment-course [Allcourserecords]="courseCollection" *ngIf="courseCollection.length > 0"></app-employee-assessment-course>

    <app-employee-assessment-card *ngIf="assessmentCollection?.primaryAssList?.length > 0" [title]="'Primary Assessment'" [primaryrecord]="assessmentCollection?.primaryAssList" [allskills]="skills"></app-employee-assessment-card>

    <app-employee-assessment-card *ngIf="assessmentCollection?.technicalAssList?.length > 0" [title]="'Technical Usecase Assessment'" [technicalrecord]="assessmentCollection?.technicalAssList" [allskills]="skills"></app-employee-assessment-card>

    <app-employee-assessment-card *ngIf="assessmentCollection?.businessAssList?.length > 0" [title]="'Business Usecase Assessment'" [businessrecord]="assessmentCollection?.businessAssList" [allskills]="skills"></app-employee-assessment-card>
</ng-template>