<!--<pre>{{primaryAssessment | json}}</pre>-->
<div [class]="rightContainer" *ngIf="checkStatus(primaryAssessment)">

  <div class="row">
    <div class="col-lg-3">
      <div class="mantidaryImg-container" *ngIf="primaryAssessment.recommended">
        <img src="{{imageLink}}/Mandatory.png">
      </div>
    </div>

    <div class="col-lg-6"></div>
    <div class="col-lg-3">
      <div class="status-container" id="todo" title="{{access.active}}" *ngIf="access.active">
        <div class="todo">
          <img src="{{imageLink}}/todo.png">
          <h2>To Do</h2>
        </div>
      </div>
      <div class="status-container" id="inprogress" *ngIf="access.inProgress">
        <div class="inprogress">
          <img src="{{imageLink}}/inprogress_icon.png">
          <h2>In Progress</h2>
        </div>
      </div>

      <div class="status-container" id="done" *ngIf="access.complete">
        <div class="done">
          <img src="{{imageLink}}/done_icon.png">
          <h2>Done</h2>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="primary-details">
      <div class="rectangle-2"></div>
      <div>
        <h2 class="primary-assessment-name">{{primaryAssessment.primary[0].assessmentName}}</h2>
      </div>
      <div>
        <h2 class="primary-skill">{{primaryAssessment.primary[0].pgSkillTrackMstr.skillTrackName}}</h2>
      </div>
      <div>
        <h2 class="primary-level">Beginer Level</h2>
      </div>
      <div>
        <h2 class="primary-desc">To enhance and validate the front end technology skills</h2>
      </div>
    </div>
  </div>

  <div class="inProgress-container" [hidden]="!access.inProgress">
    <div>
      <img src="{{imageLink}}/Progress.png">
      <div class="inProgress-container-inner">
        <div class="circle-container">
          <div class="circle1"></div>
          <div class="circle2"></div>
          <div class="circle3"></div>
        </div>
        <h3 class="test-in-progress">Test In Progress</h3>
        <div class="circle-container">
          <div class="circle3"></div>
          <div class="circle2"></div>
          <div class="circle1"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="complete-container" [hidden]="!access.complete">
    <div>
      <img [class]="imgScore" src="{{imageLink}}/success_icon.png">
      <app-scorering [score]="score(primaryAssessment.eventScore)"></app-scorering>
      <div [hidden]="!access.report">
        <h2 class="success-text">Successfully completed the Primary Assessment.</h2>

        <div class="viewReport-container">
          <button type="button" class="btn btn-primary" (click)="report(primaryAssessment)">View Report</button>
        </div>
        <div class="viewReport-container" [hidden]="score(primaryAssessment.eventScore) > minPassMarks">
          <button type="button" class="btn btn-default" (click)="reschedule()">Improve My Score</button>
        </div>
      </div>

      <h3 [hidden]="access.report" (click)="closeReport()" class="improveScore">Improve my score!</h3>
    </div>
  </div>

  <div class="start-container" id="start-assessment" [hidden]="!access.active">
    <button class="btn btn-primary start-btn" (click)="startAssessment(primaryAssessment)">START ASSESSMENT</button>
  </div>

  <div class="completed-container" [hidden]="!access.inProgress">
    <button class="btn btn-primary start-btn" (click)="completeAssessment(primaryAssessment)">COMPLETE</button>
  </div>
</div>
<div [hidden]="access.report">
  <div class="col-md-12 text-right">
    <h2 class="report-name">Primary Assessment Test Report </h2>
    <mat-icon (click)="closeReport()" class="cursor-pointer report-close">close</mat-icon>
  </div>
  <div class="ul-container"></div>
  <app-candidate-primary-skills-report [report]="reportUrl"></app-candidate-primary-skills-report>
</div>
