<div class="stepper">
    <div *ngFor="let candidateStep of candidateStepDetails; index as i" class="col-md-12 no-padding">
        <div class="col-md-12 no-padding">
            <div *ngIf="candidateStep.taskStatus === 'task_dissabled'" class="col-md-6  no-padding step-circle lock-box-color-dissable">
                <img src="{{img_path + 'locked_gray.svg'}}" alt="lock-closed">
            </div>
            <div *ngIf="candidateStep.taskStatus === 'task_enabled'" class="col-md-6 no-padding step-circle lock-box-color-enabled">
                <img src="{{img_path + 'unlock_white.svg'}}" alt="lock-closed">
            </div>
            <div *ngIf="candidateStep.taskStatus === 'task_passed'" class="col-md-6  no-padding step-circle lock-box-color-passed">
                <img src="{{img_path + 'tick_white.svg'}}" alt="lock-closed">
            </div>
            <div *ngIf="candidateStep.taskStatus === 'task_failed'" class="col-md-6  no-padding step-circle lock-box-color-failed">
                <img src="{{img_path + 'reject_white.svg'}}" alt="lock-closed">
            </div>
            <div *ngIf="candidateStep.taskStatus === 'got_offer'" class="col-md-6  no-padding step-circle lock-box-color-dissable {{candidateStep.colorStatus}}">
                <img *ngIf="candidateStep.taskStatus === 'got_offer'" src="{{img_path + 'offer_gray.svg'}}" class="offer-hand"
                    alt="lock-closed">
                <!-- <ng-template #otherImg>
                            <img src="{{img_path + 'offer_gray.svg'}}" alt="lock-closed">                            
                        </ng-template> -->
            </div>
            <div *ngIf="candidateStepDetails.length > i+1" class="col-md-6 no-padding no-margin stepper-bar"></div>
        </div>
        <div>
            <div class="col-md-6 no-padding stepper-text {{candidateStep.colorStatus}}" *ngIf="candidateStep.colorStatus === 'all-done'; else otherText">
                Offer Received
            </div>
            <ng-template #otherText>
                <div class="col-md-6 no-padding stepper-text {{candidateStep.colorStatus}}">
                    {{candidateStep.taskName}}
                </div>
            </ng-template>
        </div>
    </div>
</div>