<div class="assessment-wrapper row">

    <div class="col-12" style="padding: 0;">

        <app-assessment-header [isMobileView]="isMobileView" [autoSaveLabel]="autoSaveLabel" (exit)="exit()">
        </app-assessment-header>

        <p-progressBar [value]="workPreferenceQuestion.Percentage"></p-progressBar>

        <div class="assessment-body container">

            <div class="assessment-body-header">
                <div class="assessment-heading">Workplace Preferences</div>

                <span class="assessment-estimation">
                    <img src="assets/images/clck.png" alt="" style="width: 16px; margin-top: -2px;">
                    <strong>Estimated time to complete</strong>: 5 mins</span>
            </div>

            <div class="assessment-body-description">
                {{workPreferenceQuestion?.IntroductoryText}}
            </div>


            <div class="assessment-body-question-wrapper mc-card">
                <app-overlay [isActive]="isLoading"></app-overlay>

                <div class="question-completed">{{workPreferenceQuestion?.Percentage}}%</div>

                <div class="answer-options">
                    <div class="answer-option" *ngFor="let question of workPreferenceQuestion?.CultureElement?.Questions">
                        <p-radioButton [(ngModel)]="selectedAns" [label]="question.Description" name="ANSWER" [value]="question.ObjectID" (onClick)="submitAnswer(question)">
                        </p-radioButton>
                    </div>
                </div>

                <ng-container *ngIf="!isBack">
                    <hr class="mt-5">

                    <div class="d-flex justify-content-center mt-4">
                        <button class="ui-button-info mc-btn-primary" [disabled]="isLoading" (click)="initiateWorkPreference(true)" *ngIf="workPreferenceQuestion.QuestionNo > 1" pButton label="Go Back"></button>
                    </div>
                </ng-container>


            </div>
        </div>
    </div>

</div>
