<div class="right-sidebar">
    <app-overlay [isActive]="isLoading"></app-overlay>
    <div class="user-profile">
        <i class="fa fa-bell" *ngIf="!isMobileView"></i>
        <div class="user-profile-avatar-wrapper" [ngStyle]="{backgroundImage: avatarBorder, backgroundColor: backgroundColor}">
            <div class="user-profile-avatar">
                <img src="assets/my-career-web/svgs/avatar.svg" alt="">
            </div>
        </div>
        <div class="user-profile-label">Profile 0% complete</div>

        <hr style="border-bottom: 1px solid #E0E0E0; margin: 24px 0;">

        <div class="user-profile-name">{{careerProfile.Candidate.User.FirstName}} {{careerProfile.Candidate.User.LastName}}</div>
        <div class="user-profile-role" style="margin-top: 5px;">{{careerProfile.Candidate?.OccupationPreference?.JobTitle}}</div>


        <div class="user-profile-completion">
            <div class="user-profile-sections">

                <div class="user-profile-section" *ngFor="let task of profileTasks;" [ngClass]="{completed: careerProfile[task.key] === 100, active: task.active}">
                    <span>{{task.label}}</span>

                    <div class="section-completed-mark" *ngIf="careerProfile[task.key] === 100">
                        <i class="fa fa-check"></i>
                    </div>
                    <span class="section-percentage">{{careerProfile[task.key] || 0}}%</span>

                    <button pButton label="Get Started" [routerLink]="task.link" class="ui-button-info section-start">
                    </button>

                    <div class="section-edit" [routerLink]="task.link" *ngIf="careerProfile[task.key] === 100">
                        <i class="fa fa-edit"></i> Edit
                    </div>

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