<!-- vertical progress -->
<app-pg-vertical-progress>
  <app-pg-vertical-progress-item state='success'>
    <p class="field-display">
      <label>Test Scheduled</label>
      <br/>@ {{ primarySkillsTimeline.scheduledAt | date:'d MMM y h:mm a z'}}
    </p>
  </app-pg-vertical-progress-item>
  <app-pg-vertical-progress-item state='success' *ngIf="email">
    <p class="field-display">
      <label>Test Link mail 1 sent</label>
      <br/>@ {{email.SENT_DT | date:'d MMM y h:mm a z'}}
    </p>
  </app-pg-vertical-progress-item>

  <ng-container [ngSwitch]="state">

    <app-pg-vertical-progress-item state='success' *ngSwitchCase="'rejected'">
      <span class="label label-danger">Failed</span>
      <ng-container *ngTemplateOutlet="viewReport"></ng-container>
    </app-pg-vertical-progress-item>

    <app-pg-vertical-progress-item state='success' *ngSwitchCase="'pending'">
      <span class="label label-warning">Approval Pending</span>
      <ng-container *ngTemplateOutlet="viewReport"></ng-container>
    </app-pg-vertical-progress-item>

    <app-pg-vertical-progress-item state='success' *ngSwitchCase="'accepted'">
      <span class="label label-success">Passed</span>
      <ng-container *ngTemplateOutlet="viewReport"></ng-container>
    </app-pg-vertical-progress-item>

    <app-pg-vertical-progress-item *ngSwitchDefault>
      <p class="field-display">
        <label>Result</label>
      </p>
    </app-pg-vertical-progress-item>
  </ng-container>

  <ng-template #viewReport>
    <br/>
    <a href="javascript:void(0);" (click)=viewReportClicked()>
      <mat-icon>description</mat-icon>
      View Report
    </a>
  </ng-template>

</app-pg-vertical-progress>
