<div class="assessment-wrapper row">

    <div class="col-12" style="padding: 0;">
        <div class="assessment-header">
            <div class="header-logo" *ngIf="!isMobileView">
                <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
            </div>

            <div class="header-actions">
                <span class="auto-saved" *ngIf="autoSaveLabel">Auto saved {{autoSaveLabel}}</span>

                <button pButton label="Save & exit" (click)="exit()" class="ui-button-info"></button>
            </div>
        </div>
        <p-progressBar [value]="workStyleQuestion.Percentage"></p-progressBar>

        <div class="assessment-body container">

            <div class="assessment-body-header">
                <div class="assessment-heading">Work Style</div>


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

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


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

                <div class="question-title">{{workStyleQuestion.Title}}</div>
                <div class="question-completed">{{workStyleQuestion.Percentage}}%</div>


                <div class="question-tag">{{workStyleQuestion.Question?.Description}}</div>

                <div class="answer-wrapper" *ngIf="!isMobileView">
                    <span class="extreme-label-left">{{workStyleQuestion.LeftScaleText}}</span>
                    <div class="answer-options">
                        <span class="option-value" [class.selected]="selectedAns === scale"  *ngFor="let scale of answerScales;" (click)="submitAnswer(scale)">{{scale}}</span>
                    </div>
                    <span class="extreme-label-right">{{workStyleQuestion.RightScaleText}}</span>
                </div>

                <div class="answer-wrapper" *ngIf="isMobileView">
                    <div class="answer-options">
                        <span class="option-value" [class.selected]="selectedAns === scale" *ngFor="let scale of answerScales;" (click)="submitAnswer(scale)">{{scale}}</span>
                    </div>
                    <div class="answer-option-labels">
                        <span class="extreme-label-left">{{workStyleQuestion.LeftScaleText}}</span>
                        <span class="extreme-label-right">{{workStyleQuestion.RightScaleText}}</span>
                    </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" (click)="initiateWorkStyle(true)" *ngIf="workStyleQuestion.QuestionNo > 1" pButton label="Go Back"></button>
                    </div>
                </ng-container>

            </div>

        </div>
    </div>

</div>
