<mat-toolbar color="#00CCFF">
  <a (click)="goToDashboard()" class="back">
    <mat-icon>menu</mat-icon>
  </a>

  <div class="col-sm-10 col-md-10 col-lg-10 heading">
    <h1>{{name}} 's Playground</h1>
  </div>
  <span class="fill-remaining-space"></span>
  <div class="usr-info-avatar" [appEmployeeLogout]='cardLogout'>
    <p>{{ initials }}</p>
  </div>
  <app-employee-logout [role]="role" hidden='false' #cardLogout></app-employee-logout>
</mat-toolbar>

<div class="container dashboard col-sm-12 col-md-12 col-lg-12 ">

  <div class='loading' *ngIf="!CandidateData">
    <img width="20%" src='{{imageUrl}}/assets/img/Blocks.gif' />
  </div>

  <section class="Section" *ngIf="isDashBoard === true && CandidateData; else Msg">
    <div class="col-sm-12 col-md-9 col-lg-9  journeyBlock" *ngIf="mettlEvts; else mettlWait">

      <!-- hover circles -->
      <div *ngIf="circleModalShow" [ngClass]="['circles-container', circleModal]" (click)="circleModalClick()">

        <!-- circles.svg -->
        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="699px" height="699px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
          viewBox="0 0 699 699" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g id="Layer_x0020_1">
            <path class="fil0" d="M350 0c193,0 349,156 349,350 0,193 -156,349 -349,349 -194,0 -350,-156 -350,-349 0,-194 156,-350 350,-350zm-93 97c71,0 129,58 129,129 0,71 -58,129 -129,129 -71,0 -129,-58 -129,-129 0,-71 58,-129 129,-129z"
            />
            <path class="fil1" d="M255 31c108,0 195,87 195,195 0,108 -87,195 -195,195 -108,0 -195,-87 -195,-195 0,-108 87,-195 195,-195zm2 66c71,0 129,58 129,129 0,71 -58,129 -129,129 -71,0 -129,-58 -129,-129 0,-71 58,-129 129,-129z"
            />
          </g>
        </svg>

        <div class="circle-content" [ngSwitch]="circleModal">

          <ng-container *ngSwitchCase="'technical'">
            <h3>Technical evaluation</h3>
            <p>
              Congratulations for Successfully completing the Primary Skill Level.<br/> Kindly wait for the notification
              mail to take up the next level Assessment
            </p>
          </ng-container>

          <ng-container *ngSwitchCase="'journey'">
            <h3>Welcome to your Dashboard</h3>
            <ul>
              <li>Welcome to your Dashboard</li>
              <li>On Successful completion will move on to consecutive levels</li>
              <li>All the best !</li>
            </ul>
          </ng-container>

          <ng-container *ngSwitchCase="'busisess'">
            <h3>Business Evaluation</h3>
            <p>
              Congratulations for Successfully completing the Technical Use case level. Kindly wait for the notification mail to take up
              the next level Assessment
            </p>
          </ng-container>

        </div>
        <!-- <div class="circle-content">
        </div> -->
        <div class="circle-content">
        </div>
      </div>

      <h2>My Journey</h2>

      <!--  NEW FLOW FOR CANDIDATE STATUS   -->

      <div class="boxBlock">
        <div class="boxes" *ngFor="let dashBoard of dashBoards; let rowcount = index">
          <!--  Primary Skills Evaluation -->
          <div class="box-card" *ngIf="rowcount == '0'">

            <span *ngIf="userData.userInfoMstr.status == 'METTL_SCHEDULED' ; else mettlenotScheduled" (click)="goToPrimary(dashBoard.eventName,dashBoard.testLink)">
              <button *ngIf="dashBoard.eventSts == 'Pending' || dashBoard.eventSts == 'InProgress' || dashBoard.eventSts == 'ToBeTaken' || dashBoard.eventSts == 'Active'">
                <figure>
                  <img class="testImg" src="{{imageUrl}}/assets/img/dashboard/MettleTest_icon.png">
                </figure>
                <h3 class="active">{{dashBoard.eventName}}</h3>
              </button>
            </span>

            <ng-template #mettlenotScheduled>
              <span *ngIf="userData.userInfoMstr.status == 'ONBOARDED' ; else mettleEvent" (click)="goToPrimary(dashBoard.eventName,dashBoard.testLink)">
                <button id="mettlenotscheduled" *ngIf="dashBoard.eventSts == 'Pending' || dashBoard.eventSts == 'InProgress' || dashBoard.eventSts == 'ToBeTaken' || dashBoard.eventSts == 'Active'">
                  <figure>
                    <img class="testImg" src="{{imageUrl}}/assets/img/dashboard/MettleTest_icon.png">
                  </figure>
                  <h3 class="active">{{dashBoard.eventName}}</h3>
                  <h5>Test not scheduled</h5>
                </button>
              </span>
            </ng-template>
            <ng-template #mettleEvent>
              <span *ngIf="userData.userInfoMstr.status == 'TA_APPROVED' || userData.userInfoMstr.status == 'METTL_COACH_ASSIGNED' ; else showScore">
                <figure>
                  <img class="testImg" src="{{imageUrl}}/assets/img/dashboard/Primarskill_Grey_Icon.png">
                </figure>
                <h3 class="inactive">{{dashBoard.eventName}}</h3>

              </span>
            </ng-template>
            <ng-template #showScore>
              <!--<button id="showscores" *ngIf="dashBoard.eventScore != null" (click)="getResultMettle()">
                <div class="scores">{{dashBoard.eventScore}}</div>
                <h3 class="active">{{dashBoard.eventName}}</h3>-->

              <!-- <h5>Detailed report..</h5> -->
              <!--</button>-->
              <button id="showscores" *ngIf="dashBoard.eventScore != null" (click)="getResultMettle()">
                <figure>
                  <img class="testImg" src="{{imageUrl}}/assets/img/dashboard/Primary.png">
                </figure>
                <h3 class="active">{{completeText[dashBoard.eventName]}}</h3>
              </button>
            </ng-template>
          </div>

          <!--  Technical Use Case Evaluation -->

          <div class="box-card" *ngIf="rowcount == '1'">
            <div *ngIf="userData.userInfoMstr.status == 'COACH_ASSIGNED' || userData.userInfoMstr.status == 'MINI_PG_STARTED' || userData.userInfoMstr.status == 'MINI_PG_COMPLETED' ; else techUseCase"
              (click)="goToPrimary(dashBoard.eventName,dashBoard.testLink)">
              <figure>
                <img class="testImg" src="{{imageUrl}}/assets/img/dashboard/MiniPlayground_Selected_Icon.png">

              </figure>
              <h3 class="active">{{dashBoard.eventName}}</h3>
            </div>
            <ng-template #techUseCase>

              <div *ngIf="userData.userInfoMstr.status == 'COACH_APPROVED' || userData.userInfoMstr.status == 'COACH_REJECTED' || userData.userInfoMstr.status == 'MINI_PG_COACH_REJECTED' || userData.userInfoMstr.status == 'MINI_PG_COACH_APPROVED' || userData.userInfoMstr.status == 'MAIN_PG_STARTED' || userData.userInfoMstr.status == 'MAIN_PG_COACH_ASSIGNED' || userData.userInfoMstr.status == 'MAIN_PG_COMPLETED' || userData.userInfoMstr.status == 'MAIN_PG_COACH_REVIEWED' || userData.userInfoMstr.status == 'MAIN_PG_MANAGER_APPROVED' || userData.userInfoMstr.status == 'MAIN_PG_MANAGER_REJECTED'; else techUseCaseReport">
                <!--<button *ngIf="dashBoard.eventScore != null">
                  <div class="scores">{{dashBoard.eventScore}}</div>
                  <h3 class="active">{{dashBoard.eventName}}</h3>
                </button>-->
                <button *ngIf="dashBoard.eventScore != null">
                  <figure>
                    <img class="testImg" src="{{imageUrl}}/assets/img/dashboard/MiniPlayground_Icon.png">
                  </figure>
                  <h3 class="active">{{completeText[dashBoard.eventName]}}</h3>
                </button>
              </div>

              <ng-template #techUseCaseReport>
                <figure>
                  <img class="testImg" src="{{imageUrl}}/assets/img/dashboard/MiniPlayground_Icon.png">
                </figure>
                <h3 class="inactive">{{dashBoard.eventName}}</h3>
              </ng-template>

            </ng-template>

          </div>


          <!--  Business Use Case Evaluation -->

          <div class="box-card" *ngIf="rowcount == '2'">
            <div *ngIf="userData.userInfoMstr.status == 'MAIN_PG_COACH_ASSIGNED' || userData.userInfoMstr.status == 'MAIN_PG_STARTED' || userData.userInfoMstr.status == 'MAIN_PG_COMPLETED' ; else businessUseCase"
              (click)="goToPrimary(dashBoard.eventName,'')">
              <figure>
                <img class="testImg" src="{{imageUrl}}/assets/img/dashboard/Playground_selected_Icon.png">
              </figure>
              <h3 class="active">{{dashBoard.eventName}}</h3>
            </div>
            <ng-template #businessUseCase>

              <div *ngIf="userData.userInfoMstr.status == 'MAIN_PG_COACH_REVIEWED' || userData.userInfoMstr.status == 'MAIN_PG_MANAGER_APPROVED' || userData.userInfoMstr.status == 'MAIN_PG_MANAGER_REJECTED'; else businessUseCaseReport">
                <!--<button *ngIf="dashBoard.eventScore != null">
                  <div class="scores">{{dashBoard.eventScore}}</div>
                  <h3 class="active">{{dashBoard.eventName}}</h3>
                </button>-->
                <button *ngIf="dashBoard.eventScore != null">
                  <figure>
                    <img class="testImg" src="{{imageUrl}}/assets/img/dashboard/Playground_selected_Icon.png">
                  </figure>
                  <h3 class="active">{{completeText[dashBoard.eventName]}}</h3>
                </button>
              </div>

              <ng-template #businessUseCaseReport>
                <figure>
                  <img class="testImg" src="{{imageUrl}}/assets/img/dashboard/Playground_Icon.png">
                </figure>
                <h3 class="inactive">{{dashBoard.eventName}}</h3>
              </ng-template>

            </ng-template>

          </div>

        </div>

      </div>

      <!--<div class="boxBlock">
          <div class="col-md-3 boxes">
            <button *ngIf="primaryScore == null" (click)="goToPrimary()">
              <figure>
                <img src="../../assets/img/dashboard/MettleTest_icon.png">

              </figure>
              <h3 class="active">Primary Skill Evaluation</h3>
            </button>
            <button *ngIf="primaryScore != null  " >
              <strong>{{primaryScore}}</strong>
              <h3 class="active">Primary Skill Evaluation</h3>
            </button>
          </div>

          <div class="col-md-3 boxes">
            <button *ngIf="technicalScore == null" (click)="goToTechnical()"  [disabled]="technicalDisabled">
              <figure>
                <img *ngIf="technicalActive === ''" src="../../assets/img/dashboard/MiniPlayground_Icon.png">

                <img *ngIf="technicalActive === 'active'" src="../../assets/img/dashboard/MiniPlayground_Selected_Icon.png">

              </figure>
              <h3 [class]="technicalActive" >Technical Usecase</h3>
            </button>
            <button *ngIf="technicalScore != null  " >
              <strong>{{technicalScore}}</strong>
              <h3 [class]="technicalActive">Technical Usecase</h3>
            </button>
          </div>

          <div class="col-md-3 boxes">
            <button *ngIf="businessScore == null" (click)="goToBusiness()" [disabled]="businessDisabled">

              <figure>
                <img *ngIf="businessSelected === ''" src="../../assets/img/dashboard/Playground_Icon.png">

                <img *ngIf="businessSelected === 'active'"src="../../assets/img/dashboard/Playground_selected_Icon.png">

              </figure>
              <h3 [class]="businessSelected">Business Usecase</h3>
            </button>
            <button *ngIf="businessScore != null  " >
              <strong>{{businessScore}}</strong>
              <h3 [class]="businessSelected">Business Usecase</h3>
            </button>
          </div>
        </div>-->

      <div class="col-sm-12 col-md-9 col-lg-9 mytreasureBlock">

        <h4>My Treasure Chest</h4>
        <div class="col-sm-12 col-md-4 col-lg-4 treasureTotal">
          <span [class.blue]="true">{{timewarp}}</span>
          <h5>Time Warp</h5>
        </div>
        <div class="col-sm-12 col-md-4 col-lg-4 treasureTotal">
          <span [class.yellow]=" true">{{goldenkey}}</span>
          <h5>Golden Key</h5>
        </div>
        <div class="col-sm-12 col-md-4 col-lg-4 treasureTotal">
          <span [class.red]="true">{{components}}</span>
          <h5>Components</h5>
        </div>
      </div>
    </div>

    <ng-template #mettlWait>

      <div class="col-sm-12 col-md-9 col-lg-9  journeyBlock">
        <div class="row mettlDiv">
          <h3 class="mettlDtls">
            Click on complete button once the activity is completed...

          </h3>

          <button class="btn btn-primary completeMettle" (click)="mettleComplete()">Complete Test</button>
        </div>
      </div>
    </ng-template>

    <div class="col-sm-12 col-md-3 col-lg-3 leaderboradBlock">
      <h5>Leaderboard</h5>
      <div class="leaderBottom">
        <a [class.active]="filteredLeader == 'overall' " (click)="getLeaderboard('overall')">Overall</a>
        <a [class.active]="filteredLeader == 'java'" (click)="getLeaderboard('java')">Java</a>
      </div>
      <div class="leadermember">
        <ul>
          <li *ngFor="let leader of leaderboard">
            <img class="col-sm-4 col-md-4 col-lg-4" [src]="leader.img">
            <h6 class="col-sm-4 col-md-4 col-lg-4">{{leader.name}}</h6>
            <span class="col-sm-4 col-md-4 col-lg-4">{{leader.score}}</span>
          </li>

        </ul>
      </div>
    </div>
  </section>

  <ng-template #Msg>

    <div class="alert alert-info infoAlt" *ngIf="errorMessage && CandidateData">
      <strong>{{errorMessage}}</strong>
    </div>
    <!--<div *ngIf="errorMessage"  class="alert alert-Err" role="alert" id="error_message">{{errorMessage}}.</div>-->
  </ng-template>


</div>

<!--<div class="pull-right chatbotBlock"  *ngIf="isDashBoard === true"><figure><img src="../../assets/img/dashboard/ChatBot.png"></figure></div>-->
<app-chat-footer></app-chat-footer>
