<div class="row" *ngIf="title=='Learning Path'">
    <h1 class="heading" *ngIf="primaryrecord.length > 0">{{title}}
        <span>[{{primaryrecord.length}}]</span>
    </h1>
    <app-slider [valueStep]='300' *ngIf="primaryrecord.length > 0">
        <div class="col-md-2 coursecard cursorPointer" *ngFor="let x of primaryrecord" (click)="showLearningCardDetails(x,x.id); hideBtn()">
            <div class="coursecardbot">
                <p class="coursetitle ">{{x?.name}}</p>
                <!--<p class="coursemaintitle">{{x?.pgLearningPath?.pgSkillTrackMstr.skillTrackName}}</p>-->
                <p class="coursemaintitle">{{x?.pgExperienceLevelName | lowercase | capitalizeFirstLeter}} Level</p>
                <div class="coursedescription">
                    <span *ngFor="let skill of x?.skillNames; let i = index" class="coursesubtitle">
             <span *ngIf="i === 0; else moreThanOne">{{skill}}</span>
                    <ng-template #moreThanOne>
                        <span>,{{skill}}</span>
                    </ng-template>
                    </span>
                </div>

                <div class="row course-content courseAss-count no-margin">
                    <div class="col-md-6 col-xs-6 text-left no-padding" *ngIf="x?.courseCount">
                        <p class="course-count no-margin">{{x?.courseCount}}</p>
                        <p class="course-count-text">Courses</p>
                    </div>
                    <div class="col-md-6 col-xs-6 text-right no-padding" *ngIf="x?.primaryAssessCount || x?.technicalAssessCount || x?.businessAssessCount">
                        <p class="course-count no-margin">{{x?.primaryAssessCount+ x?.technicalAssessCount+ x?.businessAssessCount}}</p>
                        <p class="course-count-text">Assessment</p>
                    </div>
                </div>

                <div class="coursecardrate primarycoursecardrate">
                    <!--<p class="left" *ngIf="x?.pgLearningPath.testDuration">
            <img src="" class="" alt="">
            <i class="fa fa-clock-o fablue" aria-hidden="true"></i>
            {{x?.pgLearningPath.testDuration}} Mins</p>-->
                    <p class="right">
                        <img src="" class="" alt="">
                        <i class="fa fa-eye fablue" aria-hidden="true"></i>
                        <span *ngIf="x?.testTakersCount; else showCountZero">{{x?.testTakersCount}}</span>
                        <ng-template #showCountZero>
                            <span>0</span>
                        </ng-template>
                    </p>
                </div>
                <div class="content-box" *ngIf="x?.recommended">
                    <div id="ribbon-container">
                        <a id="ribbon"> *
                <span class="text-mindetroy">Mandatory</span>
              </a>
                    </div>
                </div>
            </div>
            <div class="coursecardfot primarystatus">
                <button [ngStyle]="{'background-color':getcolor(x?.userStatus , 'color')}">
          <img src="{{imagelink}}{{getcolor(x?.userStatus,'img')}}.png" alt="" class="img-responsive">
          {{getcurrentstatus(x?.userStatus)}}</button>
            </div>
        </div>
    </app-slider>
</div>

<div class="row" *ngIf="title=='Primary Assessment'">
    <h1 class="heading" *ngIf="primaryrecord.length > 0">{{title}}
        <span>[{{primaryrecord.length}}]</span>
    </h1>
    <app-slider [valueStep]='300' *ngIf="primaryrecord.length > 0">
        <div class="col-md-2 coursecard cursorPointer" *ngFor="let x of primaryrecord" (click)="goToAssessment(0, x.eventDtlsId)">
            <div class="coursecardbot">
                <p class="coursetitle ">{{x?.primary[0]?.assessmentName}}</p>
                <p class="coursemaintitle">{{x?.primary[0]?.pgSkillTrackMstr.skillTrackName}}</p>
                <!-- <p class="coursesubtitle">Beginer Level</p> -->
                <div class="coursedescription">
                    <p class="coursemaintitle">{{x?.primary[0]?.assessmentDesc}}</p>
                </div>
                <div class="coursecardrate primarycoursecardrate">
                    <p class="left" *ngIf="x?.primary[0]?.testDuration">
                        <img src="" class="" alt="">
                        <i class="fa fa-clock-o fablue" aria-hidden="true"></i> {{x?.primary[0]?.testDuration}} Mins</p>
                    <p class="right">
                        <img src="" class="" alt="">
                        <i class="fa fa-eye fablue" aria-hidden="true"></i> {{x?.primary[0]?.testTakersCount}}
                    </p>
                </div>
                <div class="content-box" *ngIf="x?.recommended">
                    <div id="ribbon-container">
                        <a id="ribbon"> *
                <span class="text-mindetroy">Mandatory</span>
              </a>
                    </div>
                </div>
            </div>
            <div class="coursecardfot primarystatus">
                <button [ngStyle]="{'background-color':getcolor(x.assessmentStatus , 'color')}">
          <img src="{{imagelink}}{{getcolor(x.assessmentStatus,'img')}}.png" alt="" class="img-responsive">
          {{getcurrentstatus(x.assessmentStatus)}}</button>
            </div>
        </div>
    </app-slider>
</div>


<div class="row" *ngIf="title=='Technical Usecase Assessment'">
    <h1 class="heading" *ngIf="technicalrecord.length > 0">{{title}}
        <span>[{{technicalrecord.length}}]</span>
    </h1>
    <app-slider [valueStep]='300' *ngIf="technicalrecord.length > 0">
        <div class="col-md-2 coursecard cursorPointer popover__wrapper" *ngFor="let x of technicalrecord" (click)="goToAssessment(1, x.eventDtlsId)">
            <div class="coursecardbot">
                <p class="coursetitle ">{{x?.technical[0]?.usecaseTitle | lowercase}}</p>
                <p class="coursemaintitle">{{x?.skillTrackName}}</p>
                <p class="coursesubtitle">{{x?.technical[0]?.pgExperienceLevel.experienceLevel}}</p>
                <!--<div class="coursedescription">
          <p>{{x.technical[0]?.usecaseDescription}}</p>
        </div>-->
                <div class="coursecardrate primarycoursecardrate">
                    <p class="left" *ngIf="x?.technical[0]?.testDuration">
                        <img src="" class="" alt="">
                        <i class="fa fa-clock-o fablue" aria-hidden="true"></i> {{x?.technical[0]?.testDuration}} Mins</p>
                    <p class="right">
                        <img src="" class="" alt="">
                        <i class="fa fa-eye fablue" aria-hidden="true"></i> {{x?.technical[0]?.testTakersCount}}
                    </p>
                </div>
            </div>
            <div class="coursecardfot">
                <button [ngStyle]="{'background-color':getcolor(x.assessmentStatus , 'color')}">
          <img src="{{imagelink}}{{getcolor(x.assessmentStatus,'img')}}.png" alt="" class="img-responsive">
          {{getcurrentstatus(x.assessmentStatus)}}</button>
            </div>
            <div class="content-box" *ngIf="x?.recommended">
                <div id="ribbon-container">
                    <a id="ribbon"> *
              <span class="text-mindetroy">Mandatory</span>
            </a>
                </div>
            </div>
            <div *ngIf="x.technical[0]?.usecaseDescription" class="push popover__content">
                <div class="discription" [innerHTML]=x.technical[0]?.usecaseDescription></div>
            </div>
        </div>
    </app-slider>
</div>


<div class="row" *ngIf="title=='Business Usecase Assessment'">
    <h1 class="heading" *ngIf="businessrecord.length > 0">{{title}}
        <span>[{{businessrecord.length}}]</span>
    </h1>
    <app-slider [valueStep]='300' *ngIf="businessrecord.length > 0">
        <div class="col-md-2 coursecard cursorPointer popover__wrapper" *ngFor="let x of businessrecord" (click)="goToAssessment(2, x.eventDtlsId)">
            <div class="coursecardbot">
                <p class="coursetitle ">{{x?.business[0]?.usecaseTitle | lowercase}}</p>
                <p class="coursemaintitle">{{x?.skillTrackName}}</p>
                <p class="coursesubtitle">{{x?.business[0]?.pgExperienceLevel?.experienceLevel}}</p>
                <!--<div class="coursedescription">
          <p>{{x.business[0]?.usecaseDescription}}</p>
        </div>-->
                <div class="coursecardrate primarycoursecardrate">
                    <p class="left" *ngIf="x?.business[0]?.testDuration">
                        <img src="" class="" alt="">
                        <i class="fa fa-clock-o fablue" aria-hidden="true"></i> {{x?.business[0]?.testDuration}} Mins</p>
                    <p class="right">
                        <img src="" class="" alt="">
                        <i class="fa fa-eye fablue" aria-hidden="true"></i> {{x?.business[0]?.testTakersCount}}
                    </p>
                </div>
            </div>
            <div class="coursecardfot">
                <button [ngStyle]="{'background-color':getcolor(x.assessmentStatus , 'color')}">
          <img src="{{imagelink}}{{getcolor(x.assessmentStatus,'img')}}.png" alt="" class="img-responsive">
          {{getcurrentstatus(x.assessmentStatus)}}
          </button>
            </div>
            <div class="content-box" *ngIf="x?.recommended">
                <div id="ribbon-container">
                    <a id="ribbon"> *
              <span class="text-mindetroy">Mandatory</span>
            </a>
                </div>
            </div>
            <div *ngIf="x.business[0]?.usecaseDescription" class="push popover__content">
                <div class="discription" [innerHTML]=x.business[0]?.usecaseDescription></div>
            </div>
        </div>
    </app-slider>
</div>