<header id="presentation-header" [ngClass]="[toggleHeaderStatus? 'presentation presentation-toggle-on' : 'presentation presentation-toggle-off']">
  <div>
    <div id="line-one" class="line"></div>
    <div class="content">
      <img src="{{imageUrl}}\assets\img\employee\dashboard\Choose_your_Course.png">
      <h4>Choose your Course</h4>
      <p>Pick up the course that you want to up skill and take the recommended course from your organisation</p>
    </div>
  </div>
  <div>
    <div id="line-two" class="line"></div>
    <div class="content">
      <img src="{{imageUrl}}\assets\img\employee\dashboard\Study _and_Assessment_Completion.png">
      <h4>Study and Assessment Completion</h4>
      <p>Study the course on your convenience and take up individual assessment or master skill the 3 level assessment</p>
    </div>
  </div>
  <div>
    <div id="line-three" class="line"></div>
    <div class="content">
      <img src="{{imageUrl}}\assets\img\employee\dashboard\Earn Skills_and_Credit_Points.png">
      <h4>Earn Skills and Credit Points</h4>
      <p>Hurray!!! Successful completion provides you course completion along with score points</p>
      <div id="presentation-toggle-button" (click)="toggleHeaderStatus = !toggleHeaderStatus">
        <mat-icon id="highlight_off">highlight_off</mat-icon>
      </div>
    </div>
  </div>
</header>

<div id="ct-tabs-header">
  <div id="tab-container">
    <ul>
      <li *ngFor="let tab of ct_tabs" (click)="setActive(tab)" [ngClass]="{ active: selectedTab.id === tab.id }">
        {{ tab.name }}
      </li>
    </ul>
  </div>
</div>
<div id="ct-tabs-content" [ngSwitch]="selectedTab.id">
  <ng-container *ngFor="let tab of ct_tabs">
    <div id="capability-transformation-content" *ngSwitchCase="tab.id">
      <app-employee-dashboard-home-ctcontent [coursesLists]="coursesLists[tab.id]" (assessmentEvent) = "gotoMiniAssessment($event)" (updateCourseEvent)="updateCourseEvent($event, tab.id)"></app-employee-dashboard-home-ctcontent>
    </div>
  </ng-container>
  <div id="presentation-toggle-button" (click)="toggleHeaderStatus = !toggleHeaderStatus" *ngIf="toggleHeaderStatus">
    <mat-icon id="info_outline">info_outline</mat-icon>
  </div>
</div>
