<div [hidden]="!reports">
  <div class="row">
    <div class="col-lg-3">
      <div class="mantidaryImg-container" *ngIf="_technicalAssessment.recommended">
        <img src="{{imageUrl}}Mandatory.png">
      </div>
    </div>

    <div class="col-lg-6"></div>
    <div class="col-lg-3">
      <div class="status-container" id="todo" *ngIf="!isResult && isStart">
        <div class="todo">
          <img src="{{imageUrl}}todo.png">
          <h2>To Do</h2>
        </div>
      </div>
      <div class="status-container" id="inprogress" *ngIf="!isResult && !isStart">
        <div class="inprogress">
          <img src="{{imageUrl}}inprogress_icon.png">
          <h2>In Progress</h2>
        </div>
      </div>

      <div class="status-container" id="underReview" *ngIf="isunderReview">
        <div class="underReview">
          <img src="{{imageUrl}}UR.png">
          <h2>Under Review</h2>
        </div>
      </div>

      <div class="status-container" id="reviewComplete" *ngIf="reviewComplete">
        <div class="reviewComplete">
          <img src="{{imageUrl}}completed.png">
          <h2>Review Complete</h2>
        </div>
      </div>


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

  <div class="row">
    <div class="primary-details">
      <app-bny-usecase [useCase]="_technicalAssessment.technical[0]"></app-bny-usecase>
    </div>
  </div>

  <div class="row score-card" [hidden]="reviewScore == 0">
    <div class="col-md-2">
      <circle-progress [percent]="reviewScore" [outerStrokeColor]="getOuterStrokeColour(reviewScore)" [subtitle]="'SCORE'"></circle-progress>
    </div>
    <div class="col-md-10 review-comments">
      <p class="reviewer-name">Reviewer {{reviewerId}}</p>
      <p>{{getReviewComments()}}</p>
    </div>
  </div>

  <div class="row under-review" *ngIf="getReviewAvatar()">
    <div class="col-md-2">
      <div class="image image-panel">
         <img src="{{imageUrl}}avatar_circle.png">
       </div>
    </div>
    <div class="col-md-10 review-comments">
      <!-- <p class="reviewer-name">Reviewer {{reviewerId}}</p> -->
      <div class="underReview">
        <img src="{{imageUrl}}UR.png">
        <h2>Under Review</h2>
      </div>
    </div>
  </div>

  <div class="row" [hidden]="isResult">
    <div>
      <div class="oval-container" [hidden]="isStart">
        <div class="oval-big">
          <div class="oval-small">
          </div>
        </div>
        <h2>Upon completion of Usecase Check in the Artifacts in Git hub using the following credentials</h2>
      </div>
      <div class="git-details-container" [hidden]="isStart">
        <div>
          <div class="v1-line"></div>
        </div>
        <div class="lineAftrDiv">
          <div class="git-details-rectangle">
            <h2 class=" git-login-label">User Name</h2>
            <h2 class=" git-login-value">{{resp.createUser.username}}</h2>
          </div>
          <div class="git-details-rectangle">
            <h2 class=" git-login-label">Password</h2>
            <h2 class=" git-login-value">{{resp.createUser.username }}@123</h2>
          </div>
          <div class="git-url-Div">
            <h3 (click)="gotoGitUrl(resp.createRepo.web_url)" class="git-url">{{resp.createRepo.web_url}}</h3>
          </div>
        </div>
        <div>
        </div>
      </div>
      <div class="oval-container">
        <div [hidden]="isStart">
          <div class="oval-big">
            <div class="oval-small">
            </div>
          </div>
          <h2>Curious to know the quality of your code?</h2>
          <div class="" [hidden]="!isRoport">
            <h3>After Check-in please come back for code quality report generation</h3>
            <div class="git-report-btn" (click)="generateRoport(_technicalAssessment)">
              <h4>Generate Report</h4>
            </div>
          </div>
          <div>
          </div>
          <div class="git-report-details" [hidden]="isRoport">
            <div [hidden]="!isSonarQReport">
              <img src="{{imageUrl}}Group.png" />
              <div class="git-report-details-container">
                <h1>Report generated successfully</h1>
              </div>
              <div class="git-report-btn-container">
                <div class="git-report-btn" (click)="viewReport(_technicalAssessment)">
                  <h4>View Report</h4>
                </div>
                <div class="git-re-report-btn" (click)="generateRoport(_technicalAssessment)">
                  <h4> Re-generate Report</h4>
                </div>
              </div>
            </div>
            <div [hidden]="isSonarQReport">
              <!--<pre>{{isSonarQReport}}</pre>-->
              <div class="UnsuccessReport">
                <img src="{{imageUrl}}exclamation.png">
                <div class="UnsuccessReport-details-container">
                  <h4>Report generation failed</h4>
                  <a class="need-help" (click)="needHelpR()">Need Help?</a>
                </div>
                <div class="sonarQ-regenrate-container">
                  <div class="sonarQ-re-report-btn" (click)="generateRoport(_technicalAssessment)">
                    <h4> Re-generate Report</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="git-report-container">

      </div>
      <!-- <div [hidden]="!isRoport && isSonarQReport || isStart"> -->
      <div [hidden]="!isSubmitEnabled">
        <button class="btn btn-primary start-btn" (click)="assessmentComplete(_technicalAssessment)">SUBMIT ASSESSMENT</button>
      </div>
    </div>
    <div [hidden]="!isStart">

      <button class="btn btn-primary start-btn" (click)="assessmentStart(_technicalAssessment)">START ASSESSMENT</button>

    </div>
  </div>
  <div class="row" [hidden]="!isResult">
    <div>
      <img class="img-score" src="{{imageUrl}}success_icon%20_right.png">
    </div>
    <div class="viewReport-container">
      <h1>Awesome,</h1>
      <h2>Your artifacts are submitted for review</h2>
      <button class="go-to-dashboard-btn" (click)="goToDashboard()">Goto Dashboard</button>
    </div>
  </div>
</div>
<div [hidden]="reports">
  <div class="row">
    <div>
      <img (click)="needHelpR()" class="closeImg" src="{{imageUrl}}close%20-%20simple-line-icons.png">

    </div>
  </div>
  <div class="row">
    <div class="col-lg-4"></div>
    <div class="col-lg-4">
      <img class="decortImg" src="{{imageUrl}}decortn.png">
      <img class="unSuccessImg" src="{{imageUrl}}unsuccess.png">
    </div>
    <div class="col-lg-4"></div>
  </div>
  <div class="row">

    <div class="unSuccessText">
      <h2>Your report generation unsuccessful</h2>
      <h3>Please verify your job logs in GitLab repository</h3>
    </div>

  </div>
  <div class="row">
    <div class="unSuccessText2">
      <h4 class="followText">Follow the below procedure to verify your GitLab repository</h4>
    </div>
    <div class="listData">
      <div class="oval-blue">
        <div class="oval-index">1</div>
      </div>
      <div class="textDiv">
        <h2 class="leftText">Click on</h2>
        <b class="boldTex">‘CI/CD’</b>
        <h2 class="rightText"> menu which is in the left navigation menu</h2>
      </div>
    </div>
    <div>
      <div class="oval-blue">
        <div class="oval-index">2</div>
      </div>
      <div class="textDiv">
        <h2 class="leftText">Find</h2>
        <b class="boldTex">‘Failed Jobs’</b>
        <h2 class="rightText"> tab and see the logs</h2>
      </div>

    </div>
  </div>
  <div class="row">
    <div>
      <img src="{{imageUrl}}ref_img.png">
    </div>
  </div>
</div>
