<div *ngIf="caList">
    <div class="container">
        <div class="pg-title"> Capability Assessment </div>
        <div *ngIf="!detailAssPg">
            <div *ngIf="assessments?.length > 0">
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" *ngFor="let item of assessments">
                    <section (click)="viewDetailAssment(item.skillTrackMstrId, item.skillTrackName)" style="cursor: pointer">
                        <header>
                            <app-avatar-pic [initials]="Initials(item.skillTrackName)" [style.backgroundColor]="randomColor()"></app-avatar-pic>
                            <h3>{{ item.skillTrackName}}</h3>
                            <span class="title" *ngFor="let subitem of item.skillTrackDtlsList" value="subitem.id">{{subitem.subtitle}}</span>
                        </header>
                        <footer>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ">
                                <div class="col-lg-12 col-md-12 col-sm-6 col-xs-12 footer-desc"><span class="ftitle">Total Assessment</span> &nbsp;<span class="fcount"> {{ item.assessmentsCount}}</span></div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                &nbsp;
                            </div>
                        </footer>
                    </section>
                </div>
            </div>
        </div>
        <div *ngIf="detailAssPg">
            <div class="container">
                <!-- <div class="row tab-margins">
                            <app-switchtabs [roles]="ROLES" (messageEvent)="receiveRole($event)"></app-switchtabs>
                        </div> -->
                <div class="row">
                    <div class="skilldetToprow">
                        <button class="btn btn-back-black pull-left" (click)="gotoTilespage()">
                                    <!-- <mat-icon>arrow_back</mat-icon> -->
                                    <img src="{{img_path + 'Arrow-right.png'}}">
                                </button>
                        <div class="pull-left padding-lr"><span class="skillMtr">Skill Master</span>
                            <p class="skillDet">{{assessmentlickedTitle}}</p>
                        </div>
                        <div class="skillBasedPills" *ngFor="let item of topRowSkillDets; let theColor = index" [style.backgroundColor]="myColor[theColor]" (click)="showOnlyRespSkillUC(item.skillTrackDtlsName)" value="item.skillTrackDtlsId" [class.activefilter]="activefilter== item.skillTrackDtlsName"
                            [class.oactivefilter]="(activefilter != '' && activefilter != 'initial') && activefilter != item.skillTrackDtlsName">{{item.skillTrackDtlsName}}</div>
                    </div>

                    <app-ca-tiles *ngFor="let item of detailedAssesment" [tileList]="item" class="col-lg-4 col-md-4 col-sm-6 col-xs-12" (caDeleteEvent)="deleteAssesment($event)" (caEditEvent)="editAssesment($event)"></app-ca-tiles>
                </div>
            </div>
        </div>
        <!-- <app-ca-tiles *ngFor="let item of assessments" [tileList]="item" class="col-lg-4 col-md-4 col-sm-6 col-xs-12" (caDeleteEvent)="deleteAssesment($event)" (caEditEvent)="editAssesment($event)"></app-ca-tiles> -->
        <!-- [skillTrackDet]="skilltrackResponse" -->
    </div>
    <button id="delConfModal" [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)="addAssesment()">
        <img src="{{img_path + 'add.png'}}">
    </a>
</div>

<div *ngIf="!caList">
    <app-ca-form *ngIf="addNewAssesment" (closeAssForm)="formCancelled($event)"></app-ca-form>
    <app-ca-form *ngIf="!addNewAssesment" (closeEdAssForm)="editFormCancelled($event)" [caEditDet]="caDetEdit"></app-ca-form>
    <!-- [boxEditDet]="sbDetEdit" -->
</div>