<div *ngIf="loader; else notLoader">
    <img class="loading-img" src="{{imagelink + 'Blocks.gif'}}">
</div>

<ng-template #notLoader>
<div class="container">
    <div class="row">
      <div class="col-md-5 left-panel">
          <div class="employee-details">
              <div class="row">
                <div class="col-md-2 image-panel">
                    <div class="image">
                        <!-- <img class="image" src="../assets/img/employee/newdashboard/user.PNG" alt="user"> -->
                       <app-avatar-pic [pic]=""  [initials]="getInitials(empData.name)"></app-avatar-pic>
                     </div>
                </div>
                <div class="col-md-4 emp-header">
                    <div class="emp employee-name">
                        {{empData.name}}
                      </div>
                      <div class="emp employee-id">
                        {{empData.id}}
                      </div>
                      <div class="emp employee-profile">
                        {{empData.skillTrackName}}
                      </div>
                      <div class="emp mail">
                        {{empData.eventDtlsId}}
                      </div>
                </div>
              </div>
            </div>
            <div *ngFor="let reviewer of reviewData">
              <div class="employee-tab" [ngClass]="eventDetailsId === reviewer.eventDetailsId ? 'menu-selected' : 'menu-unselected'">
                <div class="emp user-authentication">
                  <a role="button" (click)="submit(getStatus(reviewer), reviewer)">{{reviewer.assessmentName}}</a>
                </div>
                <div class="emp web-development">
                  <div class="align-80-left">
                    {{reviewer.skillTrackName}}
                  </div>
                  <div class="align-20-right">
                    <div style="width: 30%; float:left; text-align:left">
                      <img [src]="getImageByValue(getStatus(reviewer))" alt="overdue">
                    </div>
                    <div style="width: 70%; float:right">
                      <div [ngClass]="getClassByValue(getStatus(reviewer))">{{getStatus(reviewer)}}</div>
                    </div>
                  </div>
                </div>
                <div class="emp level">{{reviewer.experienceLevel | titlecase}} Level</div>
              </div>
          </div>
      </div>
      <div class="col-md-7 right-panel">
          <div [ngSwitch]=reviewStatus>
              <app-employee-review-info *ngSwitchCase="'To Do'" [reviewData]= "empData" (valueChange)='updateStatus($event)'></app-employee-review-info>
              <app-employee-review-info *ngSwitchCase="'Overdue'"  [reviewData]="empData" (valueChange)='updateStatus($event)'></app-employee-review-info>
              <app-employee-review-feedback *ngSwitchCase="'Feedback'"  [reviewData]="empData" (valueChange)='updateStatus($event)'></app-employee-review-feedback>
              <app-employee-review-done *ngSwitchCase="'Done'" [reviewData]="empData" [reviewerId]="reviewerId"></app-employee-review-done>
            </div>
      </div>
    </div>
  </div> 
</ng-template>
