<div class="container" *ngIf="!newLearningPath">
    <div *ngIf="!viewDetLpInfo">
        <div *ngIf="showFilter">
            <app-lp-filter [fLevels]='fLevels' [fSkills]='fSkills' [tobeFilteredArray]='returnedLPs' (filtercloseEvent)="closeFilter($event)" (resetFilter)="resetFilter($event)" (checkedFilterArr)="filteredArrList($event)"></app-lp-filter>
        </div>
        <div class="row">
            <div class="pg-title pull-left"> Learning Path
            </div>
            <div class="pull-right padding-top-16">
                <!-- <button class="btn btn-circle"><img src="{{img_path +'Search_icon.png'}}" class="img-responsive" alt="" /></button> -->
                <button class="btn btn-circle" (click)="showLpFilter()"><img src="{{img_path +'Filter.png'}}" class="img-responsive" alt="" /></button>
                <button class="btn btn-tg-left" (click)='toggleLpListView()'><img src="{{img_path +'format_list_bulleted.png'}}" class="img-responsive" alt="" /></button>
                <button class="btn btn-tg-right" (click)='toggleLpGridView()'><img src="{{img_path + 'ion-grid.png'}}" class="img-responsive" alt="" /></button>
            </div>
        </div>

        <div class="row" *ngIf="tilesDisplay">
            <div *ngIf="learningPathList">
                <app-lp-tiles class="col-lg-4 col-md-4 col-sm-6 col-xs-12" *ngFor="let lpdata of pagedItems" [lpdata]="lpdata" (lpEditEvent)="editExstingLp($event)" (lpDeleteEvent)="deleteExistingLp($event)" (lpViewEvent)="viewDetailedLp($event)"></app-lp-tiles>
            </div>
        </div>
        <div class="row" *ngIf="!tilesDisplay">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th colspan="2" (click)="sort('lpdata.name')">Learning Path Name</th>
                        <th (click)="sortFn('lpdata.pgExperienceLevelName')">Level</th>
                        <th (click)="sortFn('lpdata.courseCount')">Courses</th>
                        <th (click)="sortFn('lpdata.primaryAssessCount')">Primary</th>
                        <th (click)="sortFn('lpdata.technicalAssessCount')">Technical</th>
                        <th (click)="sortFn('lpdata.businessAssessCount')">Business</th>
                        <th>&nbsp; &nbsp;</th>
                    </tr>
                </thead>
                <tbody *ngIf="learningPathList">
                    <tr *ngFor="let lpdata of pagedItems; let i=index">
                        <td colspan="2">{{lpdata.name}}</td>
                        <td>{{lpdata.pgExperienceLevelName}}</td>
                        <td>{{lpdata.courseCount}}</td>
                        <td>{{lpdata.primaryAssessCount}}</td>
                        <td>{{lpdata.technicalAssessCount}}</td>
                        <td>{{lpdata.businessAssessCount}}</td>
                        <td>
                            <span class="pull-right" *ngIf="rowIndex == i">
                            <mat-icon (click)="deleteTabLearningPath(lpdata, i)">delete</mat-icon>
                            <mat-icon (click)="editTabLearningPath(lpdata, i)"> edit</mat-icon>
                        </span>
                            <span class="pull-right iconDiv" (click)="showOtherIconsTable(i)" *ngIf="rowIndex != i">
                            <mat-icon>
                                more_vert
                            </mat-icon>
                        </span>
                        </td>
                    </tr>
                </tbody>
                <tbody *ngIf="!learningPathList">
                    <tr>
                        <td colspan=7> No Records Available</td>

                    </tr>
                </tbody>
            </table>
        </div>
        <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
            <li><span>{{pager.startIndex+1}} - {{pager.endIndex+1}} of {{pager.totalItems}}</span></li>
            <li [ngClass]="{disabled:pager.currentPage === 1}">
                <a (click)="setPage(1)">First</a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === 1}">
                <a (click)="setPage(pager.currentPage - 1)"><img src="{{usr_img_path + 'prev.png'}}"></a>
            </li>
            <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
                <a (click)="setPage(page)">{{page}}</a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                <a (click)="setPage(pager.currentPage + 1)"><img src="{{usr_img_path + 'next.png'}}"></a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                <a (click)="setPage(pager.totalPages)">Last</a>
            </li>
        </ul>


    </div>
    <div *ngIf="viewDetLpInfo">
        <div class="row padding-top-n-btm-10">
            <button class="btn btn-back-black pull-left" (click)="gotoPrevpage()">
                    <img src="{{img_path + 'Arrow-right.png'}}">
                </button>
            <div class="pull-left padding-lr"><span class="pg-title">{{skFormTitle}}</span>
            </div>
            <div class="pull-right padding-top-16">
                <img src="{{img_path + 'edit_icon.png'}}" alt="" (click)="editExstingLp(viewLpDetData)" class="rounded-img" />
                <img src="{{img_path + 'delete_icon.png'}}" alt="" (click)="deleteExistingLp(viewLpDetData)" class="rounded-img" />
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-4 col-xs-12 viewLpOutline">
                <div class="lpVtitle">{{viewLpDetData.name}}</div>
                <div class="lpVlevel"> {{viewLpDetData.pgExperienceLevelName}}</div>
                <div *ngFor="let skill of viewLpDetData.skillNames">
                    <span class="lpVskill">{{skill}}</span>
                </div>
                <div class="lpVDesc">
                    {{viewLpDetData.description}}
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 viewLpOutline">
                <img src="{{img_path + 'courses.png'}}" alt="COURSES" />
                <div class="courseCnt">{{viewLpDetData.courseCount}}</div>
                <div class="courseTtl">Courses</div>
            </div>
            <div class="col-lg-1 col-md-1 col-sm-2 col-xs-12 viewLpOutline">
                <img src="{{img_path + 'PA.png'}}" alt="" />
                <div class="assCnt">{{viewLpDetData.primaryAssessCount}}</div>
                <div class="lpVlevel text-center">Primary Assessment
                </div>
            </div>
            <div class="col-lg-1 col-md-1 col-sm-2 col-xs-12 viewLpOutline">
                <img src="{{img_path + 'TA.png'}}" alt="" />
                <div class="assCnt">{{viewLpDetData.technicalAssessCount}}</div>
                <div class="lpVlevel text-center">Technical Assessment
                </div>
            </div>
            <div class="col-lg-1 col-md-1 col-sm-2 col-xs-12 viewLpOutline">
                <img src="{{img_path + 'BA.png'}}" alt="" />
                <div class="assCnt">{{viewLpDetData.businessAssessCount}}</div>
                <div class="lpVlevel text-center">Business Assessment
                </div>
            </div>

        </div>
        <div class="second" id="vfirst" *ngIf="allSelectedCourses">
            <!--{{coursesLists | json}}-->
            <div class="capability-transformation-slider">
                <h2>Courses</h2>

                <app-slider [valueStep]='300'>
                    <app-bny-employee-course-card class="course-selection" [hideDuration]="'hide-footer'" [viewDetailsBtn]="true" [showGoto]="course.selected" [shoCount]="shoCount" [course]="course" [role]="'course'" *ngFor="let course of allSelectedCourses" (selectCourseEvent)="editSelectedCourse(course,'course')"
                        (deleteCourseEvent)="deleteSelectedCourse(course, 'course')">
                    </app-bny-employee-course-card>
                </app-slider>
            </div>
        </div>
        <div class="second" id="vsecond" *ngIf="primarySelectedAssessment">
            <div class="capability-transformation-slider">
                <h2>Primary Assessment</h2>

                <app-slider [valueStep]='300'>
                    <app-bny-employee-course-card class="course-selection" [course]="course" [role]="'assessment'" *ngFor="let course of primarySelectedAssessment" (selectCourseEvent)="editSelectedCourse(course,'Primary')" (deleteCourseEvent)="deleteSelectedCourse(course, 'Primary')">
                    </app-bny-employee-course-card>
                </app-slider>
            </div>
        </div>
        <div class="second" id="vthird" *ngIf="technicalSelectedAssessment">
            <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'" *ngFor="let course of technicalSelectedAssessment" (selectCourseEvent)="editSelectedCourse(course, 'Technical')" (deleteCourseEvent)="deleteSelectedCourse(course, 'Technical')">
                    </app-bny-employee-course-card>
                </app-slider>
            </div>
        </div>
        <div class="second" id="vfourth" *ngIf="businessSelectedAssessment">
            <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'" *ngFor="let course of businessSelectedAssessment" (selectCourseEvent)="editSelectedCourse(course, 'Business')" (deleteCourseEvent)="deleteSelectedCourse(course, 'Business')">
                    </app-bny-employee-course-card>
                </app-slider>
            </div>
        </div>
    </div>
    <button id="delLpModal" [hidden]="true" data-toggle="modal" data-target="#confirmDialog">Open Del Modal</button>
    <app-dialog [title]="dialogData.title" [text]="dialogData.text" (confirm)="confirmDelete($event)"></app-dialog>
    <a class="btn-text addNew_btn" (click)="addLearningPath()">
        <img src="{{img_path + 'add.png'}}">
    </a>
</div>
<div class="container" *ngIf="newLearningPath">
    <div *ngIf="newLpStep1">
        <div class="row padding-top-n-btm-10">
            <button class="btn btn-back-black pull-left" (click)="gotoPrevpage()">
            <img src="{{img_path + 'Arrow-right.png'}}">
        </button>
            <div class="pull-left padding-lr"><span class="pg-title">{{skFormTitle}}</span>
            </div>
        </div>
        <div class="row pg-title">
            Select Skill Master
        </div>
        <div class="row">
            <app-lp-select-skills class="col-lg-4 col-md-4 col-sm-6 col-xs-12 white-bg-cat" *ngFor="let mSkill of skilltrackResponse; let color = index" [keyClearMethod]="keyClearMethod" [mSkill]="mSkill" [color]='color' (selectedSkills)="addSelectedSkills($event)"></app-lp-select-skills>
            <!-- <app-skilset-form *ngIf="addNewSsForm" (cancelSkilEvent)="skillFormCancelled($event)"></app-skilset-form> -->
            <!-- <app-skilset-form *ngIf="!addNewSsForm" (closeAssForm)="formCancelled($event)" [skEditDet]="skDetEdit"></app-skilset-form> -->

        </div>
        <div class="cust-tab-last-info" *ngIf="selectedMskillsArr?.length > 0">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="selectedLpDispRow">
                    <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12">
                        <span class="check-img"><img src="{{img_path + 'check_active.png'}}" /></span>
                        <div class="margin-top-15">
                            <div class="pull-left selected-skill-numbers">

                                <span>{{selectedMskillsArr.length}}</span>
                            </div>
                            <div class="pull-left selected-skill-show">
                                &nbsp;Selected &nbsp;
                                <!-- <i class="fa fa-chevron-up" (click)="displaySelectedCats()"></i> -->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <button class="btn btn-default btn-ft-next" (click)="goToNextPage()">Next</button>
                        <span class="esc_text" (keyup)="deSelectSkills($event)"><span class="strong">esc</span> to deselect all </span>
                        <!-- (keydown.esc)="deSelectSkills()" -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div *ngIf="newLpStep2">
        <div class="main-conainer">
            <div class="row padding-top-n-btm-10">
                <button class="btn btn-back-black pull-left" (click)="gotoPrevpage()">
                        <img src="{{img_path + 'Arrow-right.png'}}">
                    </button>
                <div class="pull-left padding-lr"><span class="pg-title">{{skFormTitle}}</span>
                </div>
            </div>
            <div class="skill-collection">
                <ul class="nav skill-name">
                    <li *ngIf="selectedMskillsArr.length > 0">
                        <div (click)="goToPrevLpPage()" class="add-skill">
                            <i class=" glyphicon glyphicon-plus"></i>
                        </div>
                    </li>
                    <li class="skill-details" *ngFor="let skillData of selectedMskillsArr" value="skillData?.pgSkillTrackMstr.skillTrackId">
                        {{skillData?.pgSkillTrackMstr.skillTrackName}}
                        <img class="remove-icon" src="{{ep_imgPath + 'close_circle.png'}}" (click)="deleteSkillCourse(skillData)" alt="close_circle">
                    </li>
                </ul>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 center-always" *ngIf="loader; else notLoader">
                <img class="loading-img" src="{{lp_img_path + 'Blocks.gif'}}">
            </div>
            <ng-template #notLoader>
                <div id="ct-tabs-header">
                    <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 class="tab-selection"> &nbsp;</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="allCourses">
                        <!--{{coursesLists | json}}-->
                        <div class="capability-transformation-slider">
                            <h2>Courses</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" [role]="'course'" (selectCourseEvent)="selectCourse(course, 'course')"
                                    *ngFor="let course of allCourses">
                                </app-bny-employee-course-card>
                            </app-slider>
                        </div>
                    </div>
                    <div class="second" id="second" *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')" *ngFor="let course of primaryAssessment">
                                </app-bny-employee-course-card>
                            </app-slider>
                        </div>
                    </div>
                    <div class="second" id="third" *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')" *ngFor="let course of technicalAssessment">
                                </app-bny-employee-course-card>
                            </app-slider>
                        </div>
                    </div>
                    <div class="second" id="fourth" *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" *ngIf="(allSelectedCourses?.length > 0) || (primarySelectedAssessment?.length > 0) || (technicalSelectedAssessment?.length > 0) || (businessSelectedAssessment?.length > 0)">
                        <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="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 class="pull-left selected-cat-numbers">
                                    <!--<span>{{selectedCategoriesArr.length}}</span>-->
                                </div>
                                <span class="check-img"><img src="{{img_path + 'check_active.png'}}" /></span>

                                <div class="pull-left selected-cat-show" (click)="displaySelectedCats()">
                                    <span class="selected-circle" *ngIf="selectedCourses.length > 0">{{allSelectedCourses.length+primarySelectedAssessment.length+technicalSelectedAssessment.length+businessSelectedAssessment.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 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)" (click)="submitLpCourseData()">{{steptwoNxtbtn}}</button>
                            </div>
                        </div>
                    </div>
                </div>

                <ng-template #showNoData>
                    <div class="no-data-view">
                        <img class="remove-icon" src="{{ep2_imgPath + '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>
    <div *ngIf="newLpStep3" class="flx-disp">

        <div class="col-lg-8 col-md-8 col-sm-6 col-x-12 seltCurs">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-top-n-btm-10">
                <button class="btn btn-back-black pull-left" (click)="gotoPrevpage()">
                    <img src="{{img_path + 'Arrow-right.png'}}">
                </button>
                <div class="pull-left padding-lr"><span class="pg-title">{{skFormTitle}}</span>
                </div>
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-top-n-btm-10" *ngIf="isLpUpdate">
                <img src="{{img_path + 'add_button2.png'}}" alt="Add" (click)="addMoretoLp()" />
                <span class="editaddmore"> Add more</span>
            </div>

            <div class="second" id="sfirst" *ngIf="allSelectedCourses">
                <!--{{coursesLists | json}}-->
                <div class="capability-transformation-slider">
                    <h2>Courses</h2>

                    <app-slider [valueStep]='300'>
                        <app-bny-employee-course-card class="course-selection" [hideDuration]="'hide-footer'" [viewDetailsBtn]="true" [showGoto]="course.selected" [shoCount]="shoCount" [course]="course" [class.todelete]="course.selected" [role]="'course'" *ngFor="let course of allSelectedCourses"
                            (selectCourseEvent)="editSelectedCourse(course,'course')" (deleteCourseEvent)="deleteSelectedCourse(course, 'course')">
                        </app-bny-employee-course-card>
                    </app-slider>
                </div>
            </div>
            <div class="second" id="ssecond" *ngIf="primarySelectedAssessment">
                <div class="capability-transformation-slider">
                    <h2>Primary Assessment</h2>

                    <app-slider [valueStep]='300'>
                        <app-bny-employee-course-card class="course-selection" [course]="course" [role]="'assessment'" [class.todelete]="course.selected" *ngFor="let course of primarySelectedAssessment" (selectCourseEvent)="editSelectedCourse(course,'Primary')" (deleteCourseEvent)="deleteSelectedCourse(course, 'Primary')">
                        </app-bny-employee-course-card>
                    </app-slider>
                </div>
            </div>
            <div class="second" id="sthird" *ngIf="technicalSelectedAssessment">
                <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.todelete]="course.selected" *ngFor="let course of technicalSelectedAssessment" (selectCourseEvent)="editSelectedCourse(course, 'Technical')" (deleteCourseEvent)="deleteSelectedCourse(course, 'Technical')">
                        </app-bny-employee-course-card>
                    </app-slider>
                </div>
            </div>
            <div class="second" id="sfourth" *ngIf="businessSelectedAssessment">
                <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.todelete]="course.selected" *ngFor="let course of businessSelectedAssessment" (selectCourseEvent)="editSelectedCourse(course, 'Business')" (deleteCourseEvent)="deleteSelectedCourse(course, 'Business')">
                        </app-bny-employee-course-card>
                    </app-slider>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 addLpFinal">
            <div class="">
                <div class="pg-title">Learning Path Detail</div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 newform">
                    <mat-form-field class="">
                        <input matInput placeholder="Title" [(ngModel)]="newLpReqs.name">
                    </mat-form-field>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 newform">
                    <mat-select placeholder="Experience Level" [(ngModel)]="newLpReqs.pgExperienceLevelId">
                        <mat-option *ngFor="let exp of expLevel" [value]="exp.experienceLevelId">
                            <span class="pull-left">{{ exp.experienceLevel }}</span>
                        </mat-option>
                    </mat-select>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 newform">
                    <mat-form-field class="">
                        <textarea matInput placeholder="Description" [(ngModel)]="newLpReqs.description"></textarea>
                    </mat-form-field>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 newform">
                    <button class="btn btn-default btn-play-cancel " (click)="cancelForm()">Cancel</button>
                    <button class="btn btn-primary btn-play-create" (click)="CreateNewLp()" *ngIf="!isLpUpdate">Finish</button>
                    <button class="btn btn-primary btn-play-update" (click)="UpdateNewLp()" *ngIf="isLpUpdate">Update</button>
                    <label for="learningPath" *ngIf="errMsg" class="modal-err-msg">{{errMsg}}</label>
                </div>
            </div>
        </div>
    </div>
    <div *ngIf="successLpPage">
        <!-- <pre> {{lpConfData | json}}</pre> -->
        <div class="col-lg-6 col-md-6 col-sm-8 col-xs-12 center-always padding-top-10">
            <div class="success-img">
                <img src="{{img_path + 'success_icon.png'}}" class="img-responsive" alt="Success" />
            </div>
            <div class="suc-text">
                You have successfully {{lpEntryStatus}} the learning path.
            </div>
            <div class="text-center">
                <span class="clickable-text" (click)="viewAllLps()">
                    View all
                </span>
                <span class="clickable-text" (click)="addLearningPath()">
                    Create another
                    </span>
            </div>
        </div>
    </div>
</div>