<div class='analytics-panel ng-cloak' ng-show="togglePanelDisplay()" ng-style="style()">  
  <div class="analytics-box">
    <table>
      <tr>
        <td style="width:60%;border-right:1px solid rgba(239, 239, 239, 0.1)"></td>
        <td style="width:19.9%;color: #bababa !important;border-right:1px solid rgba(239, 239, 239, 0.1)">Coverage</td>
        <td style="width:20%;color: #bababa !important;">Time Spent</td>
      </tr>
    </table>
  </div>

  <div ng-switch on="role">

    <!-- Student View -->
    <section id='analytics-panel-content-student' ng-switch-when="LEARNER">
      <div >
        <table class="classTable" style="border: none;" >
          <tr class="rowAnalytics">
            <td ng-class="{false : 'iconAnalytics', true : 'iconAnalyticsBorder'}[showClassView]"><div class="needsclick" ng-class="{false : 'openTabClass',true : 'closeTabClass'}[showClassView]" ng-click="toggleClassView(studentClass.classId, $index)"></div></td>
            <td ng-class="{false : 'classAnalytics',true : 'classAnalyticsBorder'}[showClassView]"><span ng-repeat="class in classes">{{class.className}}</span></td>
            <td ng-class="{false : 'coverageAnalytics',true : 'coverageAnalyticsBorder'}[showClassView]">
              <div pie-progress="{percentage: '{{(classDetails.totalPagesViewed/classDetails.totalPages)*100}}'}"></div>
            </td>
            <td ng-class="{false : 'timeAnalytics',true : 'timeAnalyticsBorder'}[showClassView]">{{classDetails.totalTime}}</td>
          </tr>
        </table>

        <div vcustom-scrollbar allow-scroll ng-show="showClassView" class="classViewStudent" ng-style="setHeightForClass()">
          <div>
            <table class="classTable" style="width:100%;" ng-repeat="chapters in classDetails.chapters">
              <tr class="rowAnalytics">
                <td class="iconAnalyticsSubTable">&nbsp;</td>
                <td class="classAnalyticsSubTable">{{chapters.name}}</td>
                <td class="coverageAnalyticsSubTable">
                 <div pie-progress="{percentage:'{{(chapters.pagesViewed/chapters.totalPages)*100}}', size: 44, baseColor: '#0B1618'}"></div>
               </td>
               <td class="timeAnalyticsSubTable">{{chapters.time}}</td>
             </tr>
            </table>
          </div>
        </div>
        <table class="classTable">
          <tr class="rowAnalyticsStudentView">
            <td ng-class="{'iconAnalyticsBorder' : students[0].collapse == true,'iconAnalytics' : students[0].collapse == false }">
              <div class="needsclick" ng-class="{true: 'closeTabClass',false: 'openTabClass'}[students[0].collapse]" ng-click="toggleMyView(0, students[0].userId)"></div>
            </td>
            <td ng-class="{'classAnalyticsBorder' : students[0].collapse == true,'classAnalytics' : students[0].collapse == false }">
              <span bo-text="'myView' | translate : 'labels'"></span>
            </td>
            <td ng-class="{'coverageAnalyticsBorder' : students[0].collapse == true,'coverageAnalytics' : students[0].collapse == false }">
              <div pie-progress="{percentage: '{{(students[0].pagesViewed/students[0].totalPages)*100}}'}"></div>
            </td>
            <td ng-class="{'timeAnalyticsBorder' : students[0].collapse == true,'timeAnalytics' : students[0].collapse == false }">
              {{students[0].totalTime}}
            </td>
          </tr>
        </table>
        <div vcustom-scrollbar allow-scroll update-scroll="{{showClassView}}" ng-show="students[0].collapse" class="updateScroll" ng-style="toggleHeightMyView()">
          <div>
            <table class="classTable" ng-repeat="chapter in students[0].chapters">
                <tr  class="rowAnalytics">
                  <td class="iconAnalyticsSubTable">&nbsp;</td>
                  <td class="classAnalyticsSubTable">{{chapter.name}}</td>
                  <td class="coverageAnalyticsSubTable">
                   <div pie-progress="{percentage: '{{(chapter.pagesViewed/chapter.totalPages)*100}}', size: 44, baseColor: '#0B1618'}"></div>
                 </td>
                 <td class="timeAnalyticsSubTable">{{chapter.time}}</td>
               </tr>
            </table>
          </div>
        </div>
      </div>
    </section>

    <!-- Teacher View -->
    <section id='analytics-panel-content-teacher' ng-switch-when="INSTRUCTOR">
      <div >
        <table class="classTable" style="border: none;">
          <tr class="rowAnalytics">
            <td ng-class="{false : 'iconAnalytics',true : 'iconAnalyticsBorder'}[showClassView]"><div class="needsclick" ng-class="{false : 'openTabClass',true : 'closeTabClass'}[showClassView]" ng-click="toggleClassView()"></div></td>
            <td  ng-class="{false : 'classAnalytics',true : 'classAnalyticsBorder'}[showClassView]">
              <div class="classNameAnalytics" ng-click="toggleClassNameForTeacher()" ng-repeat="class in classes">{{class.className}}</div>
              <div  class="parentClassNameTeacher" ng-click="toggleClassNameForTeacher()" ng-style="{true: {visibility: 'visible'}, false: {visibility: 'hidden'}}[classNameForTeacher]" >
                <div ng-repeat="class in classes">{{class.className}}</div>
              </div>
            </td>
            <td ng-class="{false : 'coverageAnalytics',true : 'coverageAnalyticsBorder'}[showClassView]">
              <div pie-progress="{percentage: '{{(classDetails.totalPagesViewed/classDetails.totalPages)*100}}'}"></div>
            </td>
            <td ng-class="{false : 'timeAnalytics',true : 'timeAnalyticsBorder'}[showClassView]">{{classDetails.totalTime}}</td>
          </tr>
        </table>
        <div vcustom-scrollbar allow-scroll class="teacherScrollPanel">
          <div>
            <div   ng-show="showClassView">
              <div>
                <table class="classTable" style="width:100%;" >
                  <tr class="rowAnalytics" ng-repeat="chapters in classDetails.chapters">
                    <td class="iconAnalyticsSubTable">&nbsp;</td>
                    <td class="classAnalyticsSubTable">{{chapters.name}}</td>
                    <td class="coverageAnalyticsSubTable">
                      <div pie-progress="{percentage: '{{(chapters.pagesViewed/chapters.totalPages)*100}}', size: 44, baseColor: '#0B1618'}"></div>
                    </td>
                    <td class="timeAnalyticsSubTable">{{chapters.time}}</td>
                  </tr>
                </table>
              </div>
            </div>
            <div ng-repeat="student in students">
              <table class="classTable" >
                <tr class="rowAnalyticsStudentView">
                  <td ng-class="{'iconAnalyticsBorder' : student.collapse == true,'iconAnalytics' : student.collapse != true }">
                    <div class="needsclick" ng-class="{'openTabClass' : student.collapse != true,'closeTabClass' : student.collapse == true }" ng-click="fetchChapterByUser($index, student.userId)">
                    </div>
                  </td>
                  <td ng-class="{'classAnalyticsBorder' : student.collapse == true,'classAnalytics' : student.collapse != true }">
                    <span>{{student.firstName+' '+student.lastName}}</span>
                  </td>
                  <td ng-class="{'coverageAnalyticsBorder' : student.collapse == true,'coverageAnalytics' : student.collapse != true }">
                    <div pie-progress="{percentage: '{{(student.pagesViewed/student.totalPages)*100}}'}"></div>
                  </td>
                  <td ng-class="{'timeAnalyticsBorder' : student.collapse == true,'timeAnalytics' : student.collapse != true }">{{student.time}}</td>
                </tr>
              </table>
              <div ng-show="student.collapse">
                <div>
                  <table class="classTable">
                    <tr  class="rowAnalytics" ng-repeat="chapter in student.chapters">
                      <td class="iconAnalyticsSubTable">&nbsp;</td>
                      <td class="classAnalyticsSubTable">{{chapter.name}}</td>
                      <td class="coverageAnalyticsSubTable">
                        <div pie-progress="{percentage: '{{(chapter.pagesViewed/chapter.totalPages)*100}}', size: 44, baseColor: '#0B1618'}"></div>
                      </td>
                      <td class="timeAnalyticsSubTable">{{chapter.time}}</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

</div>