<div id='arrow'></div>

<section>
    <div id="user-initials">
        <img [src]="profileImgUrl" *ngIf="profileImgUrl; else displayInitials">
        <ng-template #displayInitials>
            <p>{{ userInitials }}</p>
        </ng-template>
        <!-- <app-avatar-pic [pic]="profileImgUrl" [initials]="userInitials"></app-avatar-pic> -->
        <!-- <p>{{ userInitials }}</p> -->
    </div>
    <div>
        <p>{{ userRoles['fullName'] }}</p>

        <div *ngIf="forCandidateOnly; else userInitial">
            <p class="user-name" *ngIf="userInfo.fullName">{{userInfo.fullName}}</p>
        </div>
        <ng-template #userInitial>
            <p>Staffing</p>
            <button *ngIf="userInfo?.roleName !== userRoles?.Candidate && role !== userRoles?.Candidate" (click)="gotoEmployeeProfile();">My Profile</button>
        </ng-template>
    </div>
</section>
<footer>
    <a (click)="logout()">
        <i class="material-icons">power_settings_new</i> Logout
    </a>
</footer>