<mat-tab-group dynamicHeight mat-stretch-tabs [(selectedIndex)]="tabSelectedIndex" (selectedIndexChange)="selectedTab($event)">

  <mat-tab label="Primary Skill Evaluation">
    <ng-template mat-tab-label>
      <div class="tab">
        <h4 class="title">Primary Skill Evaluation</h4>
        <img class="pg-tab-icon" src="/assets/img/Taflow/MettleTest_icon.png">
        <span>{{eventDetailsPrimarySkill?.eventScore}}</span>
      </div>
    </ng-template>

    <!--<pre>{{ eventDetailsPrimarySkill | json}}</pre>-->
    <div *ngIf="selectedAssess == 0" >
    <app-candidate-primary-skills [primarySkills]="_primarySkills" [isUserType]="isUserType" [role]="_role" [course]="course"></app-candidate-primary-skills>
    </div>
  </mat-tab>

  <mat-tab label="Technical Use case">
    <ng-template mat-tab-label>
      <div class="tab">
        <h4 class="title">Technical Usecase</h4>
        <img class="pg-tab-icon" src="/assets/img/Taflow/MiniPlayground_Selected_Icon.png">
        <span>{{eventDetailsTechnicalSkill?.eventScore}}</span>
      </div>
    </ng-template>

    <!--<pre>{{_employeeTechnicalUsecase | json}}</pre>-->
    <div *ngIf="selectedAssess == 1" >
      <app-employee-assessment-technical [isUserType]="isUserType" [role]="_role" [technicalUsecase]="_employeeTechnicalUsecase"></app-employee-assessment-technical>
    </div>
    <!--<app-employee-assessment-technical [technicalUsecase]="_employeeTechnicalUsecase"></app-employee-assessment-technical>-->
    <ng-container [ngSwitch]="role" >
      <ng-container *ngSwitchDefault>
        <!--<app-candidate-technical-skills [candidate]="candidateDashboard" [role]="role" [eventDetails]="eventDetailsTechnicalSkill"></app-candidate-technical-skills>-->
        <!--<app-employee-assessment-technical [technicalUsecase]="_employeeTechnicalUsecase"></app-employee-assessment-technical>-->
      </ng-container>
      <ng-container *ngSwitchCase="roles.Employee">
        <!--<app-employee-assessment-technical [technicalUsecase]="_employeeTechnicalUsecase"></app-employee-assessment-technical>-->
      </ng-container>
      <!-- <ng-container *ngSwitchCase="roles.Coach">
         &lt;!&ndash;<pre>{{_employeeTechnicalUsecase | json}}</pre>&ndash;&gt;
         <app-employee-assessment-technical [technicalUsecase]="_employeeTechnicalUsecase"></app-employee-assessment-technical>
       </ng-container>
       <ng-container *ngSwitchCase="roles.PGM">
       </ng-container>-->
    </ng-container>
  </mat-tab>

  <mat-tab label="Business Use case evaluation">
    <ng-template mat-tab-label>
      <div class="tab">
        <h4 class="title">Business Usecase </h4>
        <img class="pg-tab-icon" src="/assets/img/Taflow/Playground_selected_Icon.png">
        <span>{{eventDetailsBusinessSkill?.eventScore}}</span>
      </div>
    </ng-template>

    <ng-container>
      <app-employee-assessment-technical [isUserType]="isUserType" [role]="_role" [technicalUsecase]="_employeeTechnicalUsecase" [useCaseName]="useCaseNames.Business"></app-employee-assessment-technical>
    </ng-container>

  </mat-tab>

</mat-tab-group>
