<div class="right-sidebar">
    <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 active">
                    <span>Personal Details</span>
                    <span class="section-percentage">{{careerProfile.CompletedPercentage || 0}}%</span>
                    <button pButton label="Get Started" routerLink="/my-career-web/dashboard/personal-details" class="ui-button-info section-start">
                    </button>
                </div>
                <div class="user-profile-section">
                    <span>Work Strengths</span>
                    <span class="section-percentage">0%</span>
                </div>
                <div class="user-profile-section">
                    <span>Career Values</span>
                    <span class="section-percentage">0%</span>
                </div>
                <div class="user-profile-section">
                    <span>Career History</span>
                    <span class="section-percentage">0%</span>
                </div>
                <div class="user-profile-section">
                    <span>Diversity</span>
                    <span class="section-percentage">0%</span>
                </div>
            </div>
        </div>
    </div>
</div>
