<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]="isComplete ? 'Complete' : 'Save & exit'" [disabled]="isSaving" (click)="exit()" class="ui-button-info"></button>
            </div>
        </div>

        <div class="assessment-body container">

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

                <span class="assessment-estimation"> <i class="fa fa-clock-o"></i> <strong>Estimated time to complete</strong>: 5 mins</span>
            </div>

            <div class="assessment-body-description">
                We'll ask you if you have certain skills, qualifications, knowledge, or experience that are somehow important to do this job.
            </div>


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

                <div class="question-wrapper" *ngFor="let diversity of diversityProfiles; let i = index;">
                    <div class="question-title">{{diversity.QuestionText}}?</div>

                    <div class="answer-options" *ngIf="!diversity.MultipleAnswers">
                        <div class="answer-option" *ngFor="let answer of diversity.Answers;">
                            <p-radioButton [value]="answer" [label]="answer.Answer" name="Q{{i}}" [(ngModel)]="selectedAnswers[diversity.ObjectID]">
                            </p-radioButton>
                        </div>
                    </div>

                    <div class="answer-options" *ngIf="diversity.MultipleAnswers">
                        <div class="answer-option" *ngFor="let answer of diversity.Answers; let i = index;">
                            <p-checkbox [label]="answer.Answer" name="M{{i}}" [value]="answer.ObjectID" [(ngModel)]="selectedAnswers[diversity.ObjectID]">
                            </p-checkbox>
                        </div>
                    </div>
                </div>

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

</div>
