<div id="container-all" *ngIf="assessmentDtls">
  <div class="container-left">
    <div *ngIf="assessmentId === '0'; then PrimaryAssessment">
    </div>
    <div *ngIf="validateAssessment(); then PrimaryAssessment else notPrimaryAssessment">
    </div>

    <ng-template #PrimaryAssessment>
      <div class="uc_container">
        <div class="usecase-as">{{BNYAssessment[assessmentId].name}}</div>
        <div class="simple-use-cases-to">{{BNYAssessment[assessmentId].desc}}
        </div>
        <div class="path-12">
          <img src={{BNYAssessment[assessmentId].img}}>
        </div>
        <div class="rectangle-6 uc_container" *ngIf="assessmentId !== '0'">
          <a class="need-help">Need Help?</a>
        </div>
      </div>
    </ng-template>

    <ng-template #notPrimaryAssessment>
      <div class="review-header">
        <div *ngIf="!showOverAllScore()">
          <p class="emp review-count">{{reviewerCompletedCount}} of {{reviewerCount}} reviews completed</p>
        </div>

        <div *ngIf="showOverAllScore()">
          <div *ngIf="assessmentId !== '0'">
          <circle-progress [percent]="reviewScore?.averageScore" [radius]="65" [titleFontSize]='28' [subtitleFontSize]='18' [outerStrokeColor]="getOuterStrokeColour(reviewScore?.averageScore)"
            [backgroundPadding]="'10'" [subtitle]="spinnerTitle">
          </circle-progress>
          </div>
        </div>
      </div>
      <div *ngFor="let review of reviewerFeedback; let i = index">
        <div class="employee-tab" [ngClass]="item == i ? 'menu-selected' : 'menu-unselected'">
          <div class="emp reviewer">
            <div class="link">
              <a class="link-text" role="button" (click)="getAssessment(i)">Reviewer {{i+1}}</a>
            </div>
            <div class="status">
              <span class="status-text" [ngClass]="getStatus(review.status) === 'Completed' ? 'completed' : 'in-review'">{{getStatus(review.status)}}</span>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
  </div>
  <div>

    <div class="container-right">
      <div [ngSwitch]=assessmentId>
        <div *ngIf="isDataFetched">
          <app-bny-employee-assessment-right-panel-primary *ngSwitchCase="0" (updateScore)="updateScore($event)" [primaryAssessment]="primaryAssessment"></app-bny-employee-assessment-right-panel-primary>
          <app-bny-employee-assessment-right-panel-technical *ngSwitchCase="1" [technicalAssessment]="technicalAssessment" [reviewerFeedback]="feedBack" [reviewerId] = "reviewerId"></app-bny-employee-assessment-right-panel-technical>
          <app-bny-employee-assessment-right-panel-business *ngSwitchCase="2" [businessAssessment]="businessAssessment" [reviewerFeedback]="feedBack" [reviewerId] = "reviewerId"></app-bny-employee-assessment-right-panel-business>
        </div>
      </div>
    </div>
  </div>
