<div class="container">
    <div *ngIf="!addNewcase && !editUsecaseForm">
        <div class="pg-title"> Usecase</div>
        <div class="row">
            <div *ngIf="!detailDescpage">
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" *ngFor="let item of usecaselist; let color = index">
                    <section (click)="viewDetailTechUsecase(item.id, item.title)" style="cursor: pointer">
                        <header>
                            <app-avatar-pic [initials]="Initials(item.title)" [style.backgroundColor]="colors[color]"></app-avatar-pic>
                            <h3>{{ item.title}}</h3>
                            <span class="title" *ngFor="let subitem of item.subincludes">{{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">Technical Usecase</span> &nbsp;<span class="fcount"> {{ item.tech_usecase}}</span></div>
                            </div>
                            <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">Business Usecase</span> &nbsp; <span class="fcount">{{ item.busi_usecase}}</span></div>
                            </div>
                            <!-- <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 center-always">
                                    <div class="col-lg-12 col-md-12 col-sm-6 col-xs-12 footer-desc margin-top-n-btm-1"><span class="ftitle">Whiteboard Scenario</span> &nbsp; <span class="fcount"> 0 </span></div>
                                </div>
                            </div> -->
                        </footer>
                    </section>
                </div>

                <a class="btn-text addNew_btn" (click)="addNewUsecase()">
                    <img src="{{img_path + 'add.png'}}">
                </a>
            </div>
        </div>
    </div>
    <br />
    <app-usecase-form *ngIf="addNewcase" [isEdit]=false (cancelEvent)="formCancelled(message)"></app-usecase-form>
    <app-usecase-form *ngIf="editUsecaseForm" [isEdit]=true [ucDetail]="ucDetail" (cancelEvent)="formCancelledEdit(message)" (updateEvent)="refreshUsecase($event)"></app-usecase-form>

    <div *ngIf="detailDescpage">
        <div class="container">
            <div class="row tab-margins">
                <!-- <ul class="nav nav-pills">
            <li role="Technical" class="active"><a href="#">Technical</a></li>
            <li role="Business"><a href="#">Business</a></li>
        </ul> -->
                <app-switchtabs [roles]="ROLES" (messageEvent)="receiveRole($event)"></app-switchtabs>
            </div>
            <div class="row">
                <div class="skilldetToprow">
                    <!-- <button class="btn btn-danger pull-left" (click)="gotoTilespage()">
                                <mat-icon>delete</mat-icon></button>
                    <button class="btn btn-danger pull-left" (click)="gotoTilespage()">
                                <mat-icon>edit</mat-icon></button> -->
                    <button class="btn btn-danger pull-left" (click)="gotoTilespage()">
                        <mat-icon>arrow_back</mat-icon></button>
                    <div class="pull-left padding-lr"><span class="skillMtr">Skill Master</span>
                        <p class="skillDet">{{usecaseclickedTitle}}</p>
                    </div>
                    <!-- <div *ngFor="let details of technicalDesc">
                        <div class="" *ngFor="let item of details.pgMiniUsecaseSkillMappings; let i = index">
                            <span>{{item.pgSkillTrackDtls.skillTrackDtlsName}}</span>
                            <div *ngIf="item.pgSkillTrackDtls.skillTrackDtlsName !== details.pgMiniUsecaseSkillMappings[i - 1].pgSkillTrackDtls.skillTrackDtlsName">
                                {{item.pgSkillTrackDtls.skillTrackDtlsName}}
                            </div>

                        </div>
                    </div> -->
                    <div class="skillBasedPills" *ngFor="let item of topRowSkills; let color = index" (click)=showOnlyRespSkillUC(item.id) [style.backgroundColor]="colors[color]">{{item.skillName}}</div>
                </div>
                <div *ngIf="!whiteboardUC">
                    <div class="row" *ngIf="!businessCaseUC">
                        <app-usecase-detail *ngFor="let details of technicalDesc" [ucDescp]="details" (ucdetailEvent)="editUsecase($event)" (ucdeleteEvent)="deleteUsecase($event)"></app-usecase-detail>
                    </div>
                    <div class="row" *ngIf="businessCaseUC">
                        <!-- <p> Business case page container </p>
                    <div class="detailDescCard" *ngFor="let details of businessCaseList">
                        <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 pointsBasedDesc">
                            {{details.skillTrackMstrId}}
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 infoBasedDesc">

                        </div>
                    </div> -->
                        <div *ngIf="loading">
                            <img width="20%" src='{{img_path_one}}+Blocks.gif' />
                        </div>
                        <app-usecase-detail *ngFor="let details of businessCaseList" [ucDescp]="details" (ucdetailEvent)="editUsecase($event)" (ucdeleteEvent)="deleteUsecase($event)">

                        </app-usecase-detail>
                    </div>
                </div>
                <div class="row" *ngIf="whiteboardUC">
                    <div *ngIf="whiteboardList?.length > 0; else nodata">
                        <app-usecase-detail *ngFor="let details of whiteboardList" [ucDescp]="details" (ucdetailEvent)="editUsecase($event)" (ucdeleteEvent)="deleteUsecase($event)">
                        </app-usecase-detail>
                    </div>
                    <ng-template #nodata>
                        <h2> No data to display !! </h2>
                    </ng-template>
                </div>
            </div>
            <!-- <pre> {{ theTechDetails | json}}</pre> -->
        </div>
        <button id="delUcModal" [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>
    </div>