<div class="detailDescCard" (mouseover)="mouseOvers()" (mouseleave)="mouseLeave()">

    <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 pointsBasedDesc">
        <div class="ucDescTitle">{{details.usecaseTitle}}</div>
        <div [@slideInOut]="animationState">
            <div class="ucDescContent" [innerHTML]="trimmedString"></div>
            <!-- {{details.usecaseDescription}} -->
            <div class="queClass" *ngIf="singleSelectQuestions?.length > 0 || multipleSelectQuestions?.length > 0 || customQuestions?.length > 0">
                <p class="pg-title">Evaluation/Feedback Questions </p>
                <div *ngIf="singleSelectQuestions?.length > 0">
                    <p class="pg-title">SingleSelect Questions </p>
                    <div *ngFor="let que of singleSelectQuestions">
                        <div>{{que.question}}</div>
                        <div *ngFor="let ans of que.answers">
                            {{ans.option}}
                        </div>
                    </div>
                    <br />
                </div>
                <div *ngIf="multipleSelectQuestions?.length > 0">
                    <p class="pg-title">MultiSelect Questions </p>
                    <div *ngFor="let que of multipleSelectQuestions">
                        <div>{{que.question}}</div>
                        <div *ngFor="let ans of que.answers">
                            {{ans.option}}
                        </div>
                    </div>
                    <br />
                </div>
                <div *ngIf="customQuestions?.length > 0">
                    <p class="pg-title">Custom Questions </p>
                    <div *ngFor="let que of customQuestions">
                        <div>{{que.question}}</div>
                        <div *ngIf="que.answers">
                            <div *ngFor="let ans of que.answers">
                                {{ans.option}}
                            </div>
                        </div>
                    </div>
                    <br />
                </div>

            </div>
        </div>
        <div class="showToggle" (click)="toggleShowDiv('e')">View {{readText}}
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 infoBasedDesc">
        <div class="row">
            <img *ngIf="selected == isRow && role" src="{{img_path_ot}}/assets/img/employee/shared/check_active.png" (click)="selectedUseCase(useCase,details.id)" class="tile-selected-img"><br>
        </div>
        <div class="row">
            <div class="pull-right iconClick" *ngIf="!role">
                <div class="pull-left" *ngIf="othIcons">
                    <mat-icon (click)="deleteUsecase(details.id, details)">delete</mat-icon>
                    <mat-icon (click)="editUsecase(details.id, details)"> edit</mat-icon>
                </div>
                <div class="pull-left iconClick" (click)="showOtherIcons(details.id)" *ngIf="!othIcons">
                    <mat-icon>
                        more_vert
                    </mat-icon>
                </div>
            </div>
        </div>
        <div [ngStyle]="{'opacity': 'otherIcons ? 0.5 : 1 '}">
            <!-- *ngIf="!othIcons; else 'style= 'opacity:0.5''" -->
            <!-- <pre>{{details.id}}</pre> -->
            <div class="row skillDet" *ngIf="details.pgUsecaseSkillMapping?.length > 0">{{details.pgUsecaseSkillMapping[0].pgSkillTrackDtls.pgSkillTrackMstr.skillTrackName}}</div>
            <!-- <div class="row skillDet">{{details.skillTrackMstrId}}</div> -->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <span *ngIf="details.pgUsecaseSkillMapping?.length > 0">
                    <span class="infoBasedPills" *ngFor="let item of details.pgUsecaseSkillMapping">{{item.pgSkillTrackDtls.skillTrackDtlsName}}</span>
                </span>
                <!-- <span *ngIf="details.pgMainUsecaseSkillMapping?.length > 0">
                        <span class="infoBasedPills" *ngFor="let item of details.pgMainUsecaseSkillMapping">{{item.pgSkillTrackDtls.skillTrackDtlsName}}</span>
                </span> -->
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 sandbox-txt">
                <img src="{{img_path_ot}}/assets/img/Taflow/ion-android-checkmark-circle-Ionicons.png"> &nbsp; Sandbox</div>
        </div>
        <div class="infoBasedFooter">{{details.pgExperienceLevel.experienceLevel}}&nbsp;Level</div>
    </div>
</div>