<div class="container" *ngIf="newDashBoard">
  <div class="row text-center">
    <ul class="togglecontainer" *ngIf="!showArow">
      <li class="" [ngClass]="{'activetoggle': mytaskview == true}" (click)="viewchange('mytaskview')">My Tasks</li>
      <li class="" [ngClass]="{'activetoggle': myfeedbackview == true}" (click)="viewchange('myfeedbackview')">My Reviews</li>
    </ul>
  </div>
  <app-employee-task *ngIf="mytaskview" (getBackErrow)="goPrevPage($event)"></app-employee-task>
  <app-employee-review *ngIf="myfeedbackview"></app-employee-review>
</div>

<div id="dashboard-content-main" *ngIf="!newDashBoard">

  <!-- Dashboard content main section -->
  <div id="dashboard-content-main-section" [ngClass]="[togglePanelStatus? 'content-toggle-on' : 'content-toggle-off']">

    <!-- Search and tabs section-->
    <div id="dashboard-content-main-header" class="hide">

      <div id="dashboard-content-search">
        <div id="search-form">
          <div class="search-form-input">
            <input type="text" placeholder="What are you looking for?">
            <mat-icon>search</mat-icon>
          </div>
        </div>
      </div>
      <div id="sandbox-button">
        <a routerLink="../../employee/sandbox">
          <img src='{{imageUrl}}/assets/img/sandbox/Sandbox_icon_smaller.png'>Sandbox</a>
      </div>
      <div id="dashboard-content-main-tabs">
        <div id="tab-container">
          <ul>
            <li *ngFor="let tab of view_tabSections" (click)="setActiveTab(tab)" [ngClass]="{ active: view_selectedTabSection.id === tab.id }">
              <p class="title">{{ tab.name }}</p>
              <p class="subtitle">{{ tab.details }}</p>
            </li>
          </ul>
        </div>
      </div>

    </div>

    <!-- Content section-->
    <div id="dashboard-content-body-content">

      <div id="switch-content" [ngSwitch]="view_selectedTabSection.id">
        <div id="capability-transformation-content" *ngSwitchCase="enumEmployeeDashboardTabNames.capability">
          <app-employee-dashboard-home-ct [courseCounters]="coursesCountStatus"></app-employee-dashboard-home-ct>
        </div>
        <div id="capability-transformation-content" *ngSwitchCase="enumEmployeeDashboardTabNames.platform">
          <app-platform-tab [platformData]='platform_data'></app-platform-tab>
        </div>
        <div id="capability-transformation-content" *ngSwitchCase="enumEmployeeDashboardTabNames.innovation">
          <app-innovation-tab></app-innovation-tab>
        </div>
      </div>
    </div>

  </div>

  <!-- Panel section -->
  <div id="dashboard-panel-wrapper" class="hide">

    <div id="dashboard-panel-button" [ngClass]="[togglePanelStatus? 'button-toggle-on' : 'button-toggle-off']">
      <div id="panel-button" (click)="togglePanelStatus = !togglePanelStatus">
        <mat-icon id="chevron_right" *ngIf="!togglePanelStatus">chevron_right</mat-icon>
        <mat-icon id="chevron_left" *ngIf="togglePanelStatus">chevron_left</mat-icon>
      </div>
    </div>

    <div id="dashboard-panel-section" [ngClass]="[togglePanelStatus? 'panel-toggle-on' : 'panel-toggle-off']">

      <!-- Filters -->
      <div id="filter-form">
        <img src="/assets/img/employee/dashboard/more_settings@2x.png" alt="More">
        <div id="filter-group">
          <button>Week</button>
          <button>Month</button>
          <button>Year</button>
        </div>
      </div>

      <!-- Status section -->
      <div id="left-panel" class="card" *ngIf="coursesCountStatus !== undefined ">

        <div class="card-icon-status">
          <div>
            <div class="icon"><img src="{{imageUrl}}/assets/img/employee/dashboard/completed_icon@2x.png" alt="Completed"></div>
            <div class="text"><span>Completed</span></div>
          </div>
          <div>
            <div class="text"><h3>{{ coursesCountStatus.statusCount.Completed }}</h3></div>
          </div>
        </div>

        <div class="card-icon-status">
          <div>
            <div class="icon"><img src="{{imageUrl}}/assets/img/employee/dashboard/assesment_icon@2x.png" alt="Assesment"></div>
            <div class="text"><span>Assesment</span></div>
          </div>
          <div>
            <div class="text"><h3>{{ coursesCountStatus.statusCount.Assessment }}</h3></div>
          </div>
        </div>

        <div class="card-icon-status">
          <div>
            <div class="icon"><img src="{{imageUrl}/assets/img/employee/dashboard/recommended_icon@2x.png" alt="Recommended"></div>
            <div class="text"><span>Recommended</span></div>
          </div>
          <div>
            <div class="text"><h3>{{ coursesCountStatus.statusCount.Recommended }}</h3></div>
          </div>
        </div>

        <div class="card-icon-status">
          <div>
            <div class="icon"><img src="{{imageUrl}}/assets/img/employee/dashboard/inprogress_icon@2x.png" alt="In Progress"></div>
            <div class="text"><span>In Progress</span></div>
          </div>
          <div>
            <div class="text"><h3>{{ coursesCountStatus.statusCount["In Progress"] }}</h3></div>
          </div>
        </div>

        <div class="card-icon-status">
          <div>
            <div class="icon"><img src="{{imageUrl}}/assets/img/employee/dashboard/overdue_icon@2x.png" alt="Overdue"></div>
            <div class="text"><span>Overdue</span></div>
          </div>
          <div>
            <div class="text"><h3>{{ coursesCountStatus.statusCount.Overdue }}</h3></div>
          </div>
        </div>

        <div class="card-icon-status">
          <div>
            <div class="icon"><img src="{{imageUrl}}/assets/img/employee/dashboard/whishlist_icon@2x.png" alt="Wihlist"></div>
            <div class="text"><span>Wishlist</span></div>
          </div>
          <div>
            <div class="text"><h3>{{ coursesCountStatus.statusCount.Wishlist }}</h3></div>
          </div>
        </div>

      </div>

      <!-- Platform and concept -->
      <div id="right-panel">
        <div class="card-icon-left card">
          <div class="icon">
            <img src="{{imageUrl}}/assets/img/employee/dashboard/Component_icon@2x.png" alt="Platform Component Usage">
          </div>
          <div class="text">
            <h3>{{ view_employeeDetails?.componentCount }}</h3>
            <span>Component Contribution</span>
          </div>
        </div>

        <div class="card-icon-left card">
          <div class="icon">
            <img src="{{imageUrl}}/assets/img/employee/dashboard/POC_icon@2x.png" alt="Proof Of Concepts">
          </div>
          <div class="text">
            <h3>{{ view_employeeDetails?.innovationCount }}</h3>
            <span>Innovation</span>
          </div>
        </div>
      </div>

      <!-- Leader board section -->
      <div id="leaderboard-container">
        <div id="leaderboard-title"><span>Leader Board (CT)</span></div>
        <div id="leaderboard-img"><img src="{{imageUrl}}/assets/img/employee/dashboard/more_settings@2x.png" alt="More"></div>
      </div>

      <!-- Employee cards -->
      <div class="leaderboard-cards">
        <app-employee-dashboard-leader-board (manageLeaderBoard)="manageLeaderBoard()"></app-employee-dashboard-leader-board>
        <app-employee-dashboard-leader-board (manageLeaderBoard)="manageLeaderBoard()"></app-employee-dashboard-leader-board>
        <app-employee-dashboard-leader-board (manageLeaderBoard)="manageLeaderBoard()"></app-employee-dashboard-leader-board>
        <app-employee-dashboard-leader-board (manageLeaderBoard)="manageLeaderBoard()"></app-employee-dashboard-leader-board>
      </div>

    </div>

  </div> <!-- Panel wrapper -->

</div>
