<div id="main">
    <app-header [getColor]="'#003561'" [getAvatarName]="initials" [getcurrentPageNumber]="currentPageNumber" [disableUserInfoNav]="onlyOneRole" [backWithoutRouting]="showArow" (navigateBackToPrev)="nevBackWithoutRouting()" [getcurrentPageData]="currentPageData"
        [roleStatus]="roleStatus" (getchangedRole)='changeRole($event)' (initFeedbackModal)="openFeedModal($event)">
    </app-header>
    <div *ngIf="roleStatus" class="show-role-details">
        <div class="close-icon">
            <a (click)="changeRole()">
                <img src="{{imageUrl}}/assets/img/employee/post_login/close-icon.png" alt="close">
            </a>
        </div>
        <app-employee (closeNav)="closeNavDetails($event)"></app-employee>
    </div>
    <div *ngIf="!roleStatus">
        <div class="main-container" *ngIf="!showCourseSelection; else showCardDetails">
            <div class="skill-collection">
                <ul class="nav skill-name">
                    <li *ngIf="selectedSkill.length > 0">
                        <div (click)="goToPrevPage()" class="add-skill">
                            <i class=" glyphicon glyphicon-plus"></i>
                        </div>
                    </li>
                    <li class="skill-details" *ngFor="let skillData of selectedSkill">
                        {{skillData?.skillTrackName}}
                        <img class="remove-icon" src="{{imageUrl}}/assets/img/employee/shared/close_circle.png" (click)="deleteCourse(skillData)" alt="close_circle">
                    </li>
                </ul>
            </div>
            <div *ngIf="loader; else notLoader">
                <img class="loading-img" src="{{img_path + 'Blocks.gif'}}">
            </div>
            <ng-template #notLoader>
                <div id="ct-tabs-header" *ngIf="selectedSkill.length > 0">
                    <div id="tab-container">
                        <ul class="nav">
                            <li class="tab-selection" *ngFor="let data of tabDetails; let i = index" [ngClass]="{'active': selectedTab === i}" (click)="toggleActive(i)">
                                <a (click)="smoothScroll(documentDetails.getElementById(data.className))">{{data?.containerText}}&nbsp;[{{data?.count}}]</a>
                            </li>
                            <li>
                                <div class="padding-top-n-btm-20">
                                    <!--<div class="search-base">
                  <span class="oval"></span>
                  <img src="/assets/img/employee/profile/Filter.png" alt="filter-img">
                </div>-->
                                    <div class="searchIcon">
                                        <input type="search" placeholder="Search for Courses" (keyup)="SearchforCourses($event)" autofocus/>

                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div *ngIf="(allCourses.length > 0 || primaryAssessment.length > 0 || technicalAssessment.length > 0 || businessAssessment.length > 0); else showNoData">

                    <div class="second" id="first" *ngIf="learningPath">
                        <!--{{coursesLists | json}}-->
                        <div class="capability-transformation-slider">
                            <h2>Learning Path</h2>

                            <app-slider [valueStep]='300'>
                                <app-bny-employee-course-card [hideDuration]="'hide-footer'" [viewDetailsBtn]="true" class="course-selection" [course]="course" [class.selected]="course.selected" [role]="'assessment'" (selectedCouseCardId)="viewCardDetails($event)" (selectCourseEvent)="selectCourse(course,'Learning Path')"
                                    [showHoverShadowEffect]="'img-container'" *ngFor="let course of learningPath">
                                </app-bny-employee-course-card>
                            </app-slider>
                        </div>
                    </div>

                    <div class="second" id="second" *ngIf="allCourses">
                        <!--{{coursesLists | json}}-->
                        <div class="capability-transformation-slider">
                            <h2>Choose some courses of your interest</h2>

                            <app-slider [valueStep]='300'>
                                <app-bny-employee-course-card [hideDuration]="'hide-footer'" [viewDetailsBtn]="true" class="course-selection" [class.selected]="course.selected" [showGoto]="course.selected" [shoCount]="shoCount" [course]="course" [showHoverShadowEffect]="'img-container'"
                                    [role]="'course'" (selectCourseEvent)="selectCourse(course, 'course')" *ngFor="let course of allCourses">
                                </app-bny-employee-course-card>
                            </app-slider>
                        </div>
                    </div>
                    <div class="second" id="thisrd" *ngIf="primaryAssessment">
                        <div class="capability-transformation-slider">
                            <h2>Primary Assessment</h2>

                            <app-slider [valueStep]='300'>
                                <app-bny-employee-course-card class="course-selection" [course]="course" [class.selected]="course.selected" [role]="'assessment'" (selectCourseEvent)="selectCourse(course,'Primary')" [showHoverShadowEffect]="'img-container'" *ngFor="let course of primaryAssessment">
                                </app-bny-employee-course-card>
                            </app-slider>
                        </div>
                    </div>
                    <div class="second" id="fourth" *ngIf="technicalAssessment">
                        <div class="capability-transformation-slider">
                            <h2>Technical Usecase Assessment</h2>

                            <app-slider [valueStep]='300'>
                                <app-bny-employee-course-card class="course-selection" [course]="course" [role]="'assessment'" [class.selected]="course.selected" (selectCourseEvent)="selectCourse(course, 'Technical')" [showHoverShadowEffect]="'img-container'" *ngFor="let course of technicalAssessment">
                                </app-bny-employee-course-card>
                            </app-slider>
                        </div>
                    </div>
                    <div class="second" id="fifth" *ngIf="businessAssessment">
                        <div class="capability-transformation-slider">
                            <h2>Business Usecase Assessment</h2>

                            <app-slider [valueStep]='300'>
                                <app-bny-employee-course-card class="course-selection" [course]="course" [role]="'assessment'" [class.selected]="course.selected" (selectCourseEvent)="selectCourse(course, 'Business')" *ngFor="let course of businessAssessment">
                                </app-bny-employee-course-card>
                            </app-slider>
                        </div>
                    </div>
                    <div class="cust-tab-last-info">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="selCatsList" *ngIf="showcatdispDiv">
                                <ul class="nav seleted-count">
                                    <li *ngIf="learningSeletedPath.length > 0"><span class="course-count">0{{learningSeletedPath.length}}</span> <span class="course-name">Learning Path</span></li>
                                    <li *ngIf="allSelectedCourses?.length > 0"><span class="course-count">0{{allSelectedCourses.length}}</span> <span class="course-name">Courses</span></li>
                                    <li *ngIf="primarySelectedAssessment?.length > 0"><span class="course-count">0{{primarySelectedAssessment.length}}</span> <span class="course-name">Primary Assessment</span></li>
                                    <li *ngIf="technicalSelectedAssessment?.length > 0"><span class="course-count">0{{technicalSelectedAssessment.length}}</span> <span class="course-name">Technical Usecase Assessment</span></li>
                                    <li *ngIf="businessSelectedAssessment?.length > 0"><span class="course-count">0{{businessSelectedAssessment.length}}</span> <span class="course-name">Business Usecase Assessment</span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="row footer-row">
                            <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12 footer-box">

                                <div *ngIf="(allSelectedCourses.length > 0 || primarySelectedAssessment.length > 0 || technicalSelectedAssessment.length > 0 || businessSelectedAssessment.length > 0 || learningSeletedPath.length > 0)">
                                    <div class="pull-left selected-cat-numbers">
                                        <!--<span>{{selectedCategoriesArr.length}}</span>-->
                                    </div>
                                    <div class="pull-left selected-cat-show" (click)="displaySelectedCats()">
                                        <span class="selected-circle" *ngIf="allSelectedCourses.length > 0 || primarySelectedAssessment.length > 0 || technicalSelectedAssessment.length > 0 || businessSelectedAssessment.length > 0 || learningSeletedPath.length>0">
                    {{allSelectedCourses.length+primarySelectedAssessment.length+technicalSelectedAssessment.length+businessSelectedAssessment.length+learningSeletedPath.length}}
                  </span>&nbsp;Selected &nbsp;
                                        <i *ngIf="showcatdispDiv;else downArrow" class="fa fa-chevron-down up-down-arrow"></i>
                                        <ng-template #downArrow>
                                            <i class="fa fa-chevron-up up-down-arrow"></i>
                                        </ng-template>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 footer-box">
                                <button (click)='goToPrevPage()' class="btn btn-default footer-btn">Back</button>
                                <button class="btn btn-primary footer-btn" [disabled]="!(allSelectedCourses.length > 0 || primarySelectedAssessment.length > 0 || technicalSelectedAssessment.length > 0 || businessSelectedAssessment.length > 0 || learningSeletedPath.length>0)" (click)="submitCourseData()">Next</button>
                            </div>
                        </div>
                    </div>
                </div>

                <ng-template #showNoData>
                    <div class="no-data-view">
                        <img class="remove-icon" src="{{imageUrl}}/assets/img/employee/noresult_animated_icon.svg" alt="close_circle">
                        <p class="not-found-text">
                            Sorry! No Result Found
                        </p>
                        <p class="not-fount-details-text">
                            Please modify your search criteria and you will find results matching your needs.
                        </p>
                        <button [routerLink]='["../../employee/first-time"]' class="btn btn-default mody-search-btn">Modify Search</button>
                    </div>
                </ng-template>
            </ng-template>
        </div>
    </div>
    <ng-template #showCardDetails>
        <div class="main-container">
            <div *ngIf="loader; else notLoader">
                <img class="loading-img" src="{{img_path + 'Blocks.gif'}}">
            </div>
            <ng-template #notLoader>
                <app-learnig-path-details [learningPathDetails]="learningPathCardDetails" [detailsType]="'courseSelection'"></app-learnig-path-details>
            </ng-template>
        </div>
    </ng-template>
    <app-feedbackmodal [openTheFdM]="frmCandD" (closeTheFdM)="closeFdModal($event)" *ngIf="frmCandD"></app-feedbackmodal>
</div>