<div class="chalange-box {{boxBorderColor}}" (click)="checkForSuccess()" [ngClass]="taskStatus === 'task_dissabled'? 'no-shadow':''">
  <!-- <div class="not-applicable" *ngIf="notApplicable">
    <p class="not-appl-text">Not Applicable</p>
  </div> -->
  <!-- Start default styling for all card -->
  <div class="challange-not-enabled" *ngIf="(taskStatus === 'task_dissabled') || (notApplicable === true) ; else otherTaskStatus">
    <div *ngIf="challengeName === 'Primary Challenge'">
      <div class="box-body">
        <div class="header-box">
          <div class="row no-margin">
            <div class="col-xs-2 no-padding lock-box lock-box-color-dissable">
              <img src="{{img_link + 'lock_white.svg'}}" alt="lock-closed">
            </div>
            <div class="col-xs-10 no-padding box-heading text-left">
              <h3 class="heading-text {{statusColor}}">{{challengeName}}</h3>
              <p class="task-status disable-grayOut">
                Solve technical problem in live environment.
              </p>
            </div>
          </div>
        </div>
        <div class="box-disc disable-grayOut">
          <div class="row no-margin">
            <div class="col-xs-2 no-padding"></div>
            <div class="col-xs-10 no-padding">
              <div class="col-xs-6 no-padding text-left">
                <p class="heading-disc duration-count-disc">Duration</p>
                <p class="duration-count">
                  <span>1&nbsp;hr</span>
                </p>
              </div>
              <div class="col-xs-6 no-padding text-right">
                <p class="heart-count">+20
                  <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                </p>
                <p class="heading-disc heart-count-disc">
                  for finishing within 45 min
                </p>
              </div>
            </div>
          </div>
          <div class="row no-margin">
            <div class="col-xs-2 no-padding"></div>
            <div class="col-xs-10 no-padding separator-line">
            </div>
          </div>
          <div class="row no-margin">
            <div class="col-xs-2 no-padding"></div>
            <div class="col-xs-10 no-padding">
              <div class="col-xs-6 no-padding text-left">
                <p class="heading-disc duration-count-disc">Win upto</p>
                <p class="duration-count">500
                  <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="box-footer disable-grayOut">
          <div class="col-xs-4 no-padding">
            <div class="footer-left">
              <img class="status-img" src="{{img_link + 'leadership_pass_sm.png'}}" alt="primery-card-img">
              <div class="status-box">
                <p class="status-disc text-left">Win</p>
                <p class="status text-left">BC Pass</p>
              </div>
            </div>
          </div>
          <div class="col-xs-8 no-padding chal-btn-box">
            <div class="footer-right">
              <button class="take-chalenge-btn">TAKE CHALLENGE</button>
            </div>
          </div>
        </div>
        <div class="not-enabled-box">
          <p *ngIf="(notApplicable === true); else taskLocked" class="locked">Not Applicable</p>
          <ng-template #taskLocked>
            <p class="locked">Locked</p>
          </ng-template>
        </div>
      </div>
    </div>
    <div *ngIf="challengeName === 'Coding Challenge'">
      <div class="box-body">
        <div class="header-box">
          <div class="row no-margin">
            <div class="col-xs-2 no-padding lock-box lock-box-color-dissable">
              <img src="{{img_link + 'lock_white.svg'}}" alt="lock-closed">
            </div>
            <div class="col-xs-10 no-padding box-heading text-left">
              <h3 class="heading-text {{statusColor}}">{{challengeName}}</h3>
              <p class="task-status disable-grayOut">
                Solve technical problem in live environment.
              </p>
            </div>
          </div>
        </div>
        <div class="box-disc disable-grayOut">
          <div class="row no-margin">
            <div class="col-xs-2 no-padding"></div>
            <div class="col-xs-10 no-padding">
              <div class="col-xs-6 no-padding text-left">
                <p class="heading-disc duration-count-disc">Duration</p>
                <p class="duration-count">
                  <span>1&nbsp;hr</span>
                </p>
              </div>
              <div class="col-xs-6 no-padding text-right">
                <p class="heart-count">+20
                  <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                </p>
                <p class="heading-disc heart-count-disc">
                  for finishing within 45 min
                </p>
              </div>
            </div>
          </div>
          <div class="row no-margin">
            <div class="col-xs-2 no-padding"></div>
            <div class="col-xs-10 no-padding separator-line">
            </div>
          </div>
          <div class="row no-margin">
            <div class="col-xs-2 no-padding"></div>
            <div class="col-xs-10 no-padding">
              <div class="col-xs-6 no-padding text-left">
                <p class="heading-disc duration-count-disc">Win upto</p>
                <p class="duration-count">1000
                  <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="box-footer disable-grayOut">
          <div class="col-xs-4 no-padding">
            <div class="footer-left">
              <img class="status-img" src="{{img_link + 'leadership_pass_sm.png'}}" alt="primery-card-img">
              <div class="status-box">
                <p class="status-disc text-left">Win</p>
                <p class="status text-left">BC Pass</p>
              </div>
            </div>
          </div>
          <div class="col-xs-8 no-padding chal-btn-box">
            <div class="footer-right">
              <button class="take-chalenge-btn">TAKE CHALLENGE</button>
            </div>
          </div>
        </div>
        <div class="not-enabled-box">
          <p *ngIf="(notApplicable === true); else taskLocked" class="locked">Not Applicable</p>
          <ng-template #taskLocked>
            <p class="locked">Locked</p>
          </ng-template>
        </div>
      </div>
    </div>
    <div *ngIf="challengeName === 'Whiteboard Discussion'">
      <div class="box-body">
        <div class="header-box">
          <div class="row no-margin">
            <div class="col-xs-2 no-padding lock-box lock-box-color-dissable">
              <img src="{{img_link + 'lock_white.svg'}}" alt="lock-closed">
            </div>
            <div class="col-xs-10 no-padding box-heading text-left">
              <h3 class="heading-text {{statusColor}}">{{challengeName}}</h3>
              <p class="task-status disable-grayOut">
                Solve technical problem in live environment.
              </p>
            </div>
          </div>
        </div>
        <div class="box-disc disable-grayOut">
          <div class="row no-margin">
            <div class="col-xs-2 no-padding"></div>
            <div class="col-xs-10 no-padding">
              <div class="col-xs-6 no-padding text-left">
                <p class="heading-disc duration-count-disc">Duration</p>
                <p class="duration-count">
                  <span>1&nbsp;hr</span>
                </p>
              </div>
              <div class="col-xs-6 no-padding text-right">
                <p class="heart-count">+150
                  <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                </p>
                <p class="heading-disc heart-count-disc">
                  for finishing within 45 min
                </p>
              </div>
            </div>
          </div>
          <div class="row no-margin">
            <div class="col-xs-2 no-padding"></div>
            <div class="col-xs-10 no-padding separator-line">
            </div>
          </div>
          <div class="row no-margin">
            <div class="col-xs-2 no-padding"></div>
            <div class="col-xs-10 no-padding">
              <div class="col-xs-6 no-padding text-left">
                <p class="heading-disc duration-count-disc">Win upto</p>
                <p class="duration-count">1500
                  <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="box-footer disable-grayOut">
          <div class="col-xs-4 no-padding">
            <div class="footer-left">
              <img class="status-img" src="{{img_link + 'leadership_pass_sm.png'}}" alt="primery-card-img">
              <div class="status-box">
                <p class="status-disc text-left">Win</p>
                <p class="status text-left">LC Pass</p>
              </div>
            </div>
          </div>
          <div class="col-xs-8 no-padding chal-btn-box">
            <div class="footer-right">
              <button class="take-chalenge-btn">TAKE CHALLENGE</button>
            </div>
          </div>
        </div>
        <div class="not-enabled-box">
          <p *ngIf="(notApplicable === true); else taskLocked" class="locked">Not Applicable</p>
          <ng-template #taskLocked>
            <p class="locked">Locked</p>
          </ng-template>
        </div>
      </div>
    </div>
    <div *ngIf="challengeName === 'Leadership Connect'">
      <div class="box-body">
        <div class="header-box">
          <div class="row no-margin">
            <div class="col-xs-2 no-padding lock-box lock-box-color-dissable">
              <img src="{{img_link + 'lock_white.svg'}}" alt="lock-closed">
            </div>
            <div class="col-xs-10 no-padding box-heading text-left">
              <h3 class="heading-text {{statusColor}}">{{challengeName}}</h3>
              <p class="task-status disable-grayOut">
                Build Leadership Assets and submit.
              </p>
            </div>
          </div>
        </div>
        <div class="box-disc disable-grayOut">
          <div class="row no-margin">
            <div class="col-xs-2 no-padding"></div>
            <div class="col-xs-10 no-padding">
              <div class="col-xs-6 no-padding text-left">
                <p class="heading-disc duration-count-disc">Duration</p>
                <p class="duration-count">
                  <span>1&nbsp;hr</span>
                </p>
              </div>
              <div class="col-xs-6 no-padding text-right">
                <p class="heart-count">+150
                  <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                </p>
                <p class="heading-disc heart-count-disc">
                  for finishing within 20 min
                </p>
              </div>
            </div>
          </div>
          <div class="row no-margin">
            <div class="col-xs-2 no-padding"></div>
            <div class="col-xs-10 no-padding separator-line">
            </div>
          </div>
          <div class="row no-margin">
            <div class="col-xs-2 no-padding"></div>
            <div class="col-xs-10 no-padding">
              <div class="col-xs-6 no-padding text-left">
                <p class="heading-disc duration-count-disc">Win upto</p>
                <p class="duration-count">2500
                  <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="box-footer disable-grayOut">
          <div class="col-xs-4 no-padding">
          </div>
          <div class="col-xs-8 no-padding chal-btn-box">
            <div class="footer-right">
              <button class="take-chalenge-btn">TAKE CHALLENGE</button>
            </div>
          </div>
        </div>
        <div class="not-enabled-box">
          <p *ngIf="(notApplicable === true); else taskLocked" class="locked">Not Applicable</p>
          <ng-template #taskLocked>
            <p class="locked">Locked</p>
          </ng-template>
        </div>
      </div>
    </div>
  </div>
  <!--End default styling for all card -->
  <ng-template #otherTaskStatus>
    <div class="box-body" [ngClass]="notApplicable === true ? 'display-gray-out':''">
      <div class="header-box">
        <div class="row no-margin">
          <div *ngIf="taskStatus === 'task_dissabled'" class="col-xs-2 no-padding lock-box lock-box-color-dissable">
            <img src="{{img_link + 'lock_white.svg'}}" alt="lock-closed">
          </div>
          <div *ngIf="taskStatus === 'task_enabled'" class="col-xs-2 no-padding lock-box lock-box-color-enabled">
            <img src="{{img_link + 'unlock_white.svg'}}" alt="lock-closed">
          </div>
          <div *ngIf="taskStatus === 'task_passed'" class="col-xs-2 no-padding lock-box lock-box-color-passed">
            <img src="{{img_link + 'tick_white.svg'}}" alt="lock-closed">
          </div>
          <div *ngIf="taskStatus === 'task_failed'" class="col-xs-2 no-padding lock-box lock-box-color-failed">
            <img src="{{img_link + 'reject_white.svg'}}" alt="lock-closed">
          </div>
          <div class="col-xs-10 no-padding box-heading text-left">
            <h3 class="heading-text {{statusColor}}">{{challengeName}}</h3>
            <p class="task-status task-AwaitingInitiation-heading" *ngIf="((userStatus === 'METTL_CLEARED') && (challengeName === 'Coding Challenge')); else otherThanthis">
              Awaiting Initiation
            </p>
            <ng-template #otherThanthis>
              <p class="task-status {{statusTextColor}}">
                {{statusText}}
              </p>
            </ng-template>
            <!-- <p  *ngIf="(userStatus === 'METTL_INITIATED') || (userStatus === 'CODING_CHALLENGE_INITIATED')"  class="task-status task-initiated-heading">
                Initiated
              </p>
              <p *ngIf="(userStatus === 'METTL_IN_PROGRESS') || (userStatus === 'CODING_CHALLENGE_STARTED') || (userStatus === 'WHITEBOARD_READY') || (userStatus === 'LEADERSHIP_CONNECT_READY')" class="task-status task-InProgress-heading">
                In Progress
              </p>
              <p *ngIf="(userStatus === 'METTL_REVIEW') || (userStatus === 'CODING_CHALLENGE_COMPLETED')" class="task-status task-OnHold-heading">
                On Hold
              </p>
              <p *ngIf="(userStatus === 'METTL_CLEARED') || (userStatus === 'CODING_CHALLENGE_CLEARED') || (userStatus === 'WHITEBOARD_CLEARED') || (userStatus === 'LEADERSHIP_CONNECT_CLEARED')" class="task-status task-completed-heading">
                completed
              </p>    
              <p *ngIf="(userStatus === 'METTL_FAILED') || (userStatus === ' CODING_CHALLENGE_REJECTED') || (userStatus === 'WHITEBOARD_REJECTED') || (userStatus === 'LEADERSHIP_CONNECT_REJECTED')" class="task-status task-Rejected-heading">
                Rejected
              </p> 
              <p *ngIf="(userStatus === 'CODING_CHALLENGE_READY')" class="task-status task-AwaitingInitiation-heading">
                Awaiting Initiation
              </p>
              <p *ngIf="(userStatus === 'CODING_CHALLENGE_INITIATED')" class="task-status task-ChallengeInitiated-heading">
                Challenge Initiated
              </p>                                -->
          </div>
        </div>
        <div class="box-disc" [ngClass]="taskStatus === 'task_dissabled'? 'display-gray-out':''">
          <!-- <div [ngSwitch] = "taskStatus"> -->
          <div *ngIf="taskStatus === 'task_dissabled'">
            <div class="row no-margin">
              <div class="col-xs-2 no-padding"></div>
              <div class="col-xs-10 no-padding">
                <div class="col-xs-6 no-padding text-left">
                  <div *ngIf="challengeDetails?.testDuration">
                    <p *ngIf="challengeDetails?.testDuration" class="heading-disc duration-count-disc">Duration</p>
                    <p class="duration-count">
                      <span *ngIf="challengeDetails?.testDuration">{{challengeDetails?.testDuration}}</span>
                      min
                    </p>
                  </div>
                </div>
                <div class="col-xs-6 no-padding text-right">
                  <p class="heart-count">+10
                    <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                  </p>
                  <p class="heading-disc heart-count-disc">
                    for finishing within 45 min
                  </p>
                </div>
              </div>
            </div>
            <div class="row no-margin">
              <div class="col-xs-2 no-padding"></div>
              <div class="col-xs-10 no-padding separator-line">
              </div>
            </div>
            <div class="row no-margin">
              <div class="col-xs-2 no-padding"></div>
              <div class="col-xs-10 no-padding">
                <div class="col-xs-6 no-padding text-left">
                  <p class="heading-disc duration-count-disc">Win upto</p>
                  <p class="duration-count">500
                    <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                  </p>
                </div>
                <div class="col-xs-6 no-padding text-right">
                  <p class="heart-count">+5
                    <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                  </p>
                  <p class="heading-disc heart-count-disc">
                    for each right answer
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div *ngIf="taskStatus === 'task_enabled'">
            <div class="row no-margin">
              <div class="col-xs-2 no-padding"></div>
              <div class="col-xs-10 no-padding">
                <div class="col-xs-6 no-padding text-left">
                  <p *ngIf="challengeDetails?.testDuration" class="heading-disc duration-count-disc">Duration</p>
                  <p class="duration-count">
                    <span *ngIf="challengeDetails?.testDuration && (challengeName === 'Primary Challenge')">{{challengeDetails?.testDuration}}
                      min</span>
                    <span *ngIf="(challengeName === 'Coding Challenge')">120 min</span>
                  </p>
                </div>
                <div class="col-xs-6 no-padding text-right">
                  <p class="heart-count">+10
                    <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                  </p>
                  <p class="heading-disc heart-count-disc">
                    for finishing within 45 min
                  </p>
                </div>
              </div>
            </div>
            <div class="row no-margin">
              <div class="col-xs-2 no-padding"></div>
              <div class="col-xs-10 no-padding separator-line">
              </div>
            </div>
            <div class="row no-margin">
              <div class="col-xs-2 no-padding"></div>
              <div class="col-xs-10 no-padding">
                <div class="col-xs-6 no-padding text-left">
                  <p class="heading-disc duration-count-disc">Win upto</p>
                  <p class="duration-count">500
                    <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                  </p>
                </div>
                <div class="col-xs-6 no-padding text-right">
                  <p class="heart-count">+5
                    <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                  </p>
                  <p class="heading-disc heart-count-disc">
                    for each right answer
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div *ngIf="taskStatus === 'task_passed'">
            <div class="row no-margin" *ngIf="(challengeName === 'Primary Challenge'); else showOther">
              <div class="col-xs-2 no-padding"></div>
              <div class="col-xs-10 no-padding">
                <div class="col-xs-6 no-padding text-center verical-separator">
                  <div>
                    <div class="score-details">
                      <p class="heading-disc duration-count-disc">Your score</p>
                      <p class="score-count no-margin" *ngIf="(challengeName === 'Primary Challenge')">
                        <span *ngIf="dashboardDetails?.primaryChallenge?.testDetails?.score !== null">{{dashboardDetails?.primaryChallenge?.testDetails?.score}}</span>
                      </p>
                    </div>
                    <p class="score-count no-margin" *ngIf="(challengeName === 'Coding Challenge')">
                      <span></span>
                    </p>
                    <p class="duration-count no-margin">500
                      <img src="{{img_link + 'heart_small.svg'}}" alt="heart count">
                    </p>
                  </div>
                </div>
                <div class="col-xs-6 no-padding text-center">
                  <p class="passed-heart-img">
                    <img *ngIf="(challengeName === 'Primary Challenge')" src="{{img_link + 'cc_pass_success@2x.png'}}"
                      alt="heart count">
                    <img *ngIf="(challengeName === 'Coding Challenge')" src="{{img_link + 'wb_pass_success@2x.png'}}"
                      alt="heart count">
                    <img *ngIf="(challengeName === 'Whiteboard Discussion')" src="{{img_link + 'lcpass_success@2x.png'}}"
                      alt="heart count">
                    <img *ngIf="(challengeName === 'Leadership Connect')" src="{{img_link + 'welldone@2x.png'}}" alt="heart count">
                  </p>
                  <p class="awarded-text text-center">
                    <span *ngIf="(challengeName === 'Primary Challenge')">CC Pass Awarded</span>
                    <span *ngIf="(challengeName === 'Coding Challenge')">WD Pass Awarded</span>
                    <span *ngIf="(challengeName === 'Whiteboard Discussion')">LC Pass Awarded</span>
                  </p>
                </div>
              </div>
            </div>
            <ng-template #showOther>
              <div class="row no-margin">
                <div class="col-xs-12 no-padding">
                  <p class="passed-heart-img">
                    <img *ngIf="(challengeName === 'Coding Challenge')" src="{{img_link + 'wb_pass_success@2x.png'}}"
                      alt="heart count">
                    <img *ngIf="(challengeName === 'Whiteboard Discussion')" src="{{img_link + 'lcpass_success@2x.png'}}"
                      alt="heart count">
                    <img *ngIf="(challengeName === 'Leadership Connect')" src="{{img_link + 'welldone@2x.png'}}" alt="heart count">
                  </p>
                  <p class="awarded-text text-center">
                    <span *ngIf="(challengeName === 'Coding Challenge')">WD Pass Awarded</span>
                    <span *ngIf="(challengeName === 'Whiteboard Discussion')">LC Pass Awarded</span>
                  </p>
                </div>
              </div>
            </ng-template>
          </div>
          <div *ngIf="taskStatus === 'task_failed'">
            <div class="row no-margin">
              <div class="col-xs-2 no-padding"></div>
              <div class="col-xs-10 no-padding m-top">
                <div class="col-xs-6 no-padding text-center verical-separator">
                  <div *ngIf="(challengeName === 'Primary Challenge') || (challengeName === 'Coding Challenge')">
                    <p class="heading-disc duration-count-disc">Your score</p>
                    <p class="score-count no-margin" *ngIf="(challengeName === 'Primary Challenge')">
                      <span class="fail-score" *ngIf="dashboardDetails?.primaryChallenge?.testDetails?.score !== null">{{dashboardDetails?.primaryChallenge?.testDetails?.score}}</span>
                    </p>
                    <p class="score-count no-margin" *ngIf="(challengeName === 'Coding Challenge')">
                      <span></span>
                    </p>
                  </div>
                </div>
                <div class="col-xs-6 no-padding text-center">
                  <p class="heading-disc duration-count-disc">Time Taken</p>
                  <p class="score-count no-margin" *ngIf="(challengeName === 'Primary Challenge')">
                    <!-- <span class="time-taken" *ngIf="dashboardDetails?.primaryChallenge?.testDetails?.score !== null">{{dashboardDetails?.primaryChallenge?.testDetails?.score}}</span> -->
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="taskStatus === 'task_failed'; else otherThanFail">
      <div class="col-xs-12 no-padding task-failed-footer">
        <p class="error-heading no-margin">Sorry!</p>
        <p class="error-disc" *ngIf="(challengeName === 'Primary Challenge')">You couldn't clear the Primary challenge</p>
        <p class="error-disc" *ngIf="(challengeName === 'Coding Challenge')">You couldn't clear the Coding challenge</p>
        <p class="error-disc" *ngIf="(challengeName === 'Whiteboard Discussion')">You couldn't clear the Whiteboard
          Discussion</p>
        <p class="error-disc" *ngIf="(challengeName === 'Leadership Connect')">You couldn't clear the Leadership
          Connect</p>
      </div>
    </div>
    <ng-template #otherThanFail>
      <div class="box-footer">
        <div *ngIf="(challengeName === 'Whiteboard Discussion') || (challengeName === 'Leadership Connect'); else otherThanWDandLC">
          <div class="wd-or-lc-completed" *ngIf="(dashboardDetails?.whiteboardSession?.event?.eventStatus === 'PASSED') && (challengeName === 'Whiteboard Discussion')">
            <div>
              <span class="congrats-text">Congratulations!</span>
              <br>
              <span class="completed-msg">You have completed the Whiteboard Discussion </span>
            </div>
          </div>
          <div class="wd-or-lc-completed" *ngIf="(dashboardDetails?.leadershipConnect?.event?.eventStatus === 'PASSED') && (challengeName === 'Leadership Connect')">
            <div>
              <span class="congrats-text">Congratulations!</span>
              <br>
              <span class="completed-msg">You have completed the Leadership Connect </span>
            </div>
          </div>
          <div class="wd-or-lc-initiated" *ngIf="(dashboardDetails?.whiteboardSession?.event?.eventStatus === 'INPROGRESS') && (challengeName === 'Whiteboard Discussion')">
            <div class="whiteboardText">Our coach will connect with you in a moment</div>
          </div>
          <div class="wd-or-lc-initiated" *ngIf="(dashboardDetails?.leadershipConnect?.event?.eventStatus === 'INPROGRESS') && (challengeName === 'Leadership Connect')">
            <div class="">Our leaders will connect with you in a moment</div>
          </div>
          <div *ngIf="(dashboardDetails?.whiteboardSession?.event?.eventStatus === 'ACTIVE') && (challengeName === 'Whiteboard Discussion')">
            <div class="col-xs-4 no-padding">
              <div class="footer-left">
                <img class="status-img" src="{{img_link + 'leadership_pass_sm.png'}}" alt="primery-card-img">
                <div class="status-box">
                  <p class="status-disc text-left">Win</p>
                  <p class="status text-left">LC Pass</p>
                </div>
              </div>
            </div>
            <div class="col-xs-8 no-padding chal-btn-box">
              <div class="footer-right">
                <button class="take-chalenge-btn {{statusColor}}" (click)="getEventStatus($event)">TAKE CHALLENGE</button>
              </div>
            </div>
          </div>
          <div *ngIf="(dashboardDetails?.leadershipConnect?.event?.eventStatus === 'ACTIVE') && (challengeName === 'Leadership Connect')">
            <div class="col-xs-4 no-padding">
              <div class="footer-left">
                <!-- <img class="status-img" src="{{img_link + 'coding_pass_sm.png'}}" alt="primery-card-img"> -->
                <div class="status-box">
                  <!-- <p class="status-disc text-left">Win</p>
                      <p class="status text-left">TC Pass</p> -->
                </div>
              </div>
            </div>
            <div class="col-xs-8 no-padding chal-btn-box">
              <div class="footer-right">
                <button class="take-chalenge-btn {{statusColor}}" (click)="getEventStatus($event)">TAKE CHALLENGE</button>
              </div>
            </div>
          </div>
        </div>
        <ng-template #otherThanWDandLC>
          <div [ngClass]="(taskStatus === 'task_dissabled') || (notApplicable === true)? 'display-gray-out':''">
            <div class="text-center" *ngIf="taskStatus === 'task_passed'; else notCompletedFooter">
              <div class="col-xs-12 view-details no-padding">
                <div *ngIf="(challengeName === 'Coding Challenge'); else otherDetails">
                  <button class="view-details-btn" (click)="viewCoadingDetails()">VIEW DETAIL</button>
                </div>
                <ng-template #otherDetails>
                  <button class="view-details-btn" (click)="getEventStatus($event)">VIEW DETAIL</button>
                </ng-template>
              </div>
            </div>
            <ng-template #notCompletedFooter>
              <div class="col-xs-4 no-padding">
                <div class="footer-left" *ngIf="(userStatus === 'METTL_IN_PROGRESS') || (userStatus === 'CODING_CHALLENGE_STARTED'); else holdbtn">
                  <button *ngIf="(challengeName === 'Coding Challenge')" class="take-chalenge-btn resumeBtn pc-color" (click)="getEventStatus($event)">Resume</button>
                  <div *ngIf="(challengeName === 'Primary Challenge')">
                    <img class="status-img" src="{{img_link + 'coding_pass_sm.png'}}" alt="primery-card-img">
                    <div class="status-box">
                      <p class="status-disc text-left">Win</p>
                      <p class="status text-left">CC Pass</p>
                    </div>
                  </div>
                </div>
                <ng-template #holdbtn>
                  <div class="footer-left">
                    <img class="status-img" *ngIf="(challengeName === 'Primary Challenge')" src="{{img_link + 'coding_pass_sm.png'}}"
                      alt="primery-card-img">
                    <img class="status-img" *ngIf="(challengeName === 'Coding Challenge')" src="{{img_link + 'whiteboard_pass_sm.png'}}"
                      alt="primery-card-img">
                    <div class="status-box">
                      <p class="status-disc text-left">Win</p>
                      <p class="status text-left" *ngIf="(challengeName === 'Primary Challenge')">CC Pass</p>
                      <p class="status text-left" *ngIf="(challengeName === 'Coding Challenge')">WD Pass</p>
                    </div>
                  </div>
                </ng-template>
              </div>
              <div class="col-xs-8 no-padding text-right">
                <div class="footer-right" *ngIf="((userStatus === 'CODING_CHALLENGE_READY') || ((userStatus === 'METTL_CLEARED') && (challengeName === 'Coding Challenge'))); else showTakeChallange">

                </div>
                <ng-template #showTakeChallange>
                  <div class="footer-right">
                    <div *ngIf="taskStatus === 'task_enabled'; else noLinkBtn">
                      <!-- <a href="{{linkDetails}}" target="_blank"> -->
                      <div *ngIf="(userStatus === 'METTL_REVIEW') || (userStatus === 'CODING_CHALLENGE_COMPLETED'); else notOnHold">

                      </div>
                      <ng-template #notOnHold>
                        <div *ngIf="(userStatus === 'METTL_IN_PROGRESS') || (userStatus === 'CODING_CHALLENGE_STARTED'); else showTakeChallange">
                          <button class="take-chalenge-btn resumeBtn {{statusColor}}" (click)="getEventStatus($event)">Complete</button>
                        </div>
                        <ng-template #showTakeChallange>
                          <button class="take-chalenge-btn {{statusColor}}" (click)="getEventStatus($event)">TAKE
                            CHALLENGE</button>
                        </ng-template>
                      </ng-template>
                      <!-- </a> -->
                    </div>
                    <ng-template #noLinkBtn>
                      <button class="take-chalenge-btn no-link-btn {{statusColor}}">TAKE CHALLENGE</button>
                    </ng-template>
                  </div>
                </ng-template>
              </div>
            </ng-template>
          </div>
        </ng-template>
      </div>
    </ng-template>
  </ng-template>
</div>