<div class='mydata-panel ng-cloak' ng-show="StateService.panelOpen == 'mydataPanel'" ng-style="style()">
  <!-- Start of default panel -->
  <section class ='defaultPanel' ng-style="{true: {left: '0px'}}[StateService.panelOpen == 'mydataPanel']"> 
    <header>
      <ul class="nav nav-tabs left top">
        <li ng-class="{'all': 'active'}[currentFlag]" ng-style="{width: tabWidth + '%'}"><a href="" ng-click="filter('all')" ng-class="{'all': 'active'}[currentFlag]" bo-text="'all' | translate : 'labels'"></a></li>
        <li ng-class="{'note': 'active'}[currentFlag]" ng-style="{width: tabWidth + '%'}"><a href="" ng-click="filter('note')" ng-class="{'note': 'active'}[currentFlag]" bo-text="'notes' | translate : 'labels'"></a></li>
        <li ng-class="{'highlight_normal,highlight_important': 'active'}[currentFlag]" ng-style="{width: tabWidth + '%'}"><a href="" ng-click="filter('highlight_normal,highlight_important')" ng-class="{'highlight_normal,highlight_important': 'active'}[currentFlag]" bo-text="'highlight' | translate : 'labels'"></a></li>
        <li ng-class="bookmarkClass()" ng-show="Helpers.isVisible('bookMarkShow') && CONFIG.clientName == 'Anaya'" ng-style="{width: tabWidth + '%'}"><a href="" ng-click="filter('bookmarks')" ng-class="bookmarkClass()" bo-text="'bookmarks' | translate : 'labels'"></a></li>
      </ul>
    </header>

    <section id="mydata-panel-button">
      <div class="buttonContainer">
        <div class="share" ng-hide='!CONFIG.showSharing'>
         <button class="allData" ng-show="CONFIG.clientName == 'Hurix'" ng-class="{'active':false}" bo-text="'alldata' | translate : 'buttons'"></button>       
         <button class="sharedWithMe" ng-show="CONFIG.clientName == 'Hurix'" ng-class="{'active':false}" bo-text="'shared' | translate : 'buttons'"></button>       
        </div>
        <div class="impButton" ng-click="toggleHighlightImportant()" ng-class="{'true':'active'}[enableImportant]" ng-show="currentFlag != 'bookmarks'">
          <div class="name" bo-text="'important' | translate : 'labels'"></div>
        </div>          
        
        <div class="wrapper" ng-hide="true">
         <button class="pull-right btn important" ng-class="{'Chapter': 'active'}[sortType]"  ng-click="toggleSortType('Chapter')" bo-text="'chapter' | translate : 'labels'"></button>
          <button class="pull-right btn important"  ng-class="{'Date': 'active'}[sortType]"  ng-click="toggleSortType('Date')" bo-text="'date' | translate : 'labels'"></button>   
        </div>
      </div>
    </section>

    <section class="shareHighlight" ng-show="CONFIG.clientName == 'Hurix' && teacherMessage">
      <div class="shareMessage">Tina Arora has started sharing highlights with you</div>  
      <button class="select accept"></button>
      <button class="select reject"></button>
    </section>

    <section id='mydata-panel-content' vcustom-scrollbar allow-scroll ng-style="{top: (CONFIG.clientName == 'Hurix') ? ((teacherMessage == true ) ? 163 : 112 ) : 112  + 'px', bottom:(CONFIG.clientName == 'Hurix'  && CONFIG.showSharing == true)? 52 : 0  + 'px'}"> 
      <div >
        <div>
          <table class="table table-bordered message">
            <tr ng-show="checkdata() && currentFlag=='note'"><td bo-text="'noNotesFound' | translate : 'messages'"></td></tr>  
            <tr ng-show="checkdata() && currentFlag=='all'"><td bo-text="'noSearchesFound' | translate : 'messages'"></td></tr>
            <tr ng-show="checkdata() && (currentFlag=='highlight_normal,highlight_important')"><td bo-text="'noHighlightsFound' | translate : 'messages'"></td></tr>
            <tr ng-show="checkdata() && currentFlag=='bookmarks'"><td bo-text="'noBookmarksFound' | translate : 'messages'"></td></tr> 
          </table>
            <table class="table table-bordered" ng-repeat="chapter in arrChapters track by $index" ng-show='chapter.Notes.length>0'>
              <tbody>              
                <tr ng-repeat='notes in chapter.Notes track by $index' class="navigateNote needsclick">
                  <td ng-click="jumpAndOpenNote(notes.page,notes.id,notes)">
                    <div class="book-mark" ng-class="{'highlight_important': notes.flag =='highlight_important','highlight_normal': notes.flag=='highlight_normal','note_normal': notes.type=='note_normal','note_important': notes.type=='note_important'}"></div> 
                   </td>
                 <td ng-show="isNote(notes)" >                            
                    <div class="media-body">  
                      <!-- <h5 class="media-heading" ng-bind="notes.note | unescape"></h5>-->    
                      <div ng-click="jumpAndOpenNote(notes.page,notes.id,notes)">
                        <div class="chapterWrapper">                
                          <span bo-text="'chapter' | translate : 'labels'" class="chpNameAndDetails"></span>
                          <span class="chpNameAndDetails">:</span>
                          <span ng-bind="chapter.chapterName || chapter.date" class="chpNameAndDetails" ></span>     
                        </div>
                        <!-- <small class='pull-right' ng-bind="placeDate(notes.created)"></small> -->
                        <div class="chpNameAndDetails">
                          <span class="details" style="padding-left:0px;">{{placeTime(notes.created)}}</span>
                          <span class="details" style="padding-left:0px;">{{placeDate(notes.created)}}</span>
                        </div>
                        <h5 class="media-heading noteTarget" ng-bind-html="to_trusted(notes.noteTarget)"></h5>
                        <!-- <div class="alert" ng-show="notes.note">
                          <p ng-bind="notes.noteTarget"></p>                       
                        </div> -->
                        <h5 class="media-note" ng-bind="notes.comment | unescape"></h5> 
                        <!-- <h5><a ng-href="{{notes.url | unescape}}" target="_blank" ng-bind="notes.url | unescape"></a></h5> -->
                      </div>
                      <button class="comment" ng-show="CONFIG.clientName == 'Hurix' && (notes.type == 'note_normal' || notes.type == 'note_important') && CONFIG.showSharing == true" bo-text="'comment' | translate : 'buttons'"  animate-panels="{'chapter':chapter, 'notes':notes}"></button>
                      <button class="share" ng-show="CONFIG.clientName == 'Hurix' && (notes.type == 'note_normal' || notes.type == 'note_important')  && CONFIG.showSharing == true" bo-text="'share' | translate : 'buttons'" animate-panels="{'chapter':chapter, 'notes':notes}"></button>    
                    </div>                       
                  </td>
                  <td ng-show="!isNote(notes)" ng-click="jumpAndOpenNote(notes.page,notes.id,notes)">                  
                    <div class="bookmarkDetails">                
                      <span bo-text="'chapter' | translate : 'labels'" class="chpNameAndDetails"></span>
                      <span class="chpNameAndDetails">:</span>
                      <span ng-bind="chapter.chapterName || chapter.date" class="chpNameAndDetails" ></span>     
                    </div>
                    <div class="bookmarkNameAndDetails">
                      <span class="details" style="padding-left:0px;">{{placeTime(notes.created)}}</span>
                      <span class="details" style="padding-left:0px;">{{placeDate(notes.created)}}</span>
                    </div>       
                    <div class='bookmark-title'>{{notes.title}}</div>                    
                  </td>
                </tr>
              </tbody>
            </table>
        </div>                   
      </div>
    </section> 
    <section class ='settingsPanel' ng-show="CONFIG.clientName == 'Hurix' && CONFIG.showSharing == true">
      <div class="settings" animate-panels="{'chapter':chapter, 'notes':notes}">
      <div class="name" bo-text="'settings' | translate : 'labels'"></div>
    </section>
  </section>
  <!-- End of default panel -->

  <!-- Start of Comment panel -->
   <section class= "mydata-panel-comment" ng-style="{true: {left: '100%'}}[StateService.panelOpen == 'mydataPanel']">
    <div class="header">
      <div class="backArrow commentBackButton" back-to-default-panel></div>
      <div class="name" bo-text="'comment' | translate : 'buttons'"></div>
    </div>
      <table class="table table-bordered commentTable">
        <tbody>              
          <tr class="navigateNote needsclick">
            <td>
              <div class="book-mark" ng-class="{'note_normal': sharNote.type=='note_normal','note_important': sharNote.type=='note_important'}"></div>
            </td>
            <td>                            
              <div class="media-body">                    
                <div class="chapterWrapper">                
                  <span bo-text="'chapter' | translate : 'labels'" class="chpNameAndDetails"></span>
                  <span class="chpNameAndDetails">:</span>
                  <span ng-bind="shareChapter.chapterName || shareChapter.date" class="chpNameAndDetails" ></span>     
                </div>                   
                <div class="chpNameAndDetails">
                  <span class="details" style="padding-left:0px;">{{placeTime(sharNote.created)}}</span>
                  <span class="details" style="padding-left:0px;">{{placeDate(sharNote.created)}}</span>
                </div>
                <h5 class="media-heading noteTarget" ng-bind="sharNote.noteTarget"></h5>                    
                <h5 class="media-note" ng-bind="sharNote.comment | unescape"></h5>                                 
              </div>                       
            </td>             
          </tr>
        </tbody>
      </table>
      <div class='commments' vcustom-scrollbar allow-scroll>
        <div style="margin-top:20px;">
          <span class="heading" bo-text="'comment' | translate : 'buttons'"></span><br>
          <div class="commentsDetail">
            <span class="teacherMessage">Tina Arora said :</span><br>
            <span class="details" style="padding-left:0px;">{{placeTime(notes.created)}}</span>
            <span class="details" style="padding-left:0px;">{{placeDate(notes.created)}}</span><br> 
            <span>Prepare for nutrition next week</span>            
          </div>
          <div class="commentsDetail">
            <span class="teacherMessage">Tina Arora said :</span><br>
            <span class="details" style="padding-left:0px;">{{placeTime(notes.created)}}</span>
            <span class="details" style="padding-left:0px;">{{placeDate(notes.created)}}</span><br> 
            <span>Prepare for nutrition next week</span>            
          </div>
          <div class="commentsDetail">
            <span class="teacherMessage">Tina Arora said :</span><br>
            <span class="details" style="padding-left:0px;">{{placeTime(notes.created)}}</span>
            <span class="details" style="padding-left:0px;">{{placeDate(notes.created)}}</span><br> 
            <span>Prepare for nutrition next week</span>            
          </div>
          <div class="commentsDetail">
            <span class="teacherMessage">Tina Arora said :</span><br>
            <span class="details" style="padding-left:0px;">{{placeTime(notes.created)}}</span>
            <span class="details" style="padding-left:0px;">{{placeDate(notes.created)}}</span><br> 
            <span>Prepare for nutrition next week</span>            
          </div>
          <div class="commentsDetail">
            <span class="teacherMessage">Tina Arora said :</span><br>
            <span class="details" style="padding-left:0px;">{{placeTime(notes.created)}}</span>
            <span class="details" style="padding-left:0px;">{{placeDate(notes.created)}}</span><br> 
            <span>Prepare for nutrition next week</span>            
          </div>
          <div class="commentsDetail">
            <span class="teacherMessage">Tina Arora said :</span><br>
            <span class="details" style="padding-left:0px;">{{placeTime(notes.created)}}</span>
            <span class="details" style="padding-left:0px;">{{placeDate(notes.created)}}</span><br> 
            <span>Prepare for nutrition next week</span>            
          </div>
          <div class="commentsDetail">
            <span class="teacherMessage">Tina Arora said :</span><br>
            <span class="details" style="padding-left:0px;">{{placeTime(notes.created)}}</span>
            <span class="details" style="padding-left:0px;">{{placeDate(notes.created)}}</span><br> 
            <span>Prepare for nutrition next week</span>            
          </div>
        </div>
      </div>
   </section>
   <!-- End of Comment panel -->

   <!-- Start of Share panel -->
  <section class= "mydata-panel-share" ng-style="{true: {left: '100%'}}[StateService.panelOpen == 'mydataPanel']">
    <div class="header">
      <div class="backArrow shareBackButton" back-to-default-panel></div>
      <div class="name" bo-text="'share' | translate : 'buttons'"></div>
    </div>     
    <table class="table table-bordered shareTable" >
      <tbody>              
        <tr class="navigateNote needsclick">
          <td>
            <div class="book-mark" ng-class="{'note_normal': sharNote.type=='note_normal','note_important': sharNote.type=='note_important'}"></div>
          </td>
          <td>                            
            <div class="media-body">                    
              <div class="chapterWrapper">                
                <span bo-text="'chapter' | translate : 'labels'" class="chpNameAndDetails"></span>
                <span class="chpNameAndDetails">:</span>
                <span ng-bind="shareChapter.chapterName || shareChapter.date" class="chpNameAndDetails" ></span>     
              </div>                   
              <div class="chpNameAndDetails">
                <span class="details" style="padding-left:0px;">{{placeTime(sharNote.created)}}</span>
                <span class="details" style="padding-left:0px;">{{placeDate(sharNote.created)}}</span>
              </div>
              <h5 class="media-heading noteTarget" ng-bind="sharNote.noteTarget"></h5>                    
              <h5 class="media-note" ng-bind="sharNote.comment | unescape"></h5>               
            </div>                       
          </td>             
        </tr>
      </tbody>
    </table>    
    <div class= "teacherStudentNames" vcustom-scrollbar allow-scroll>
      <div style="padding: 0 0 10px 0;">
        <div class='teacher' bo-text="'teacher' | translate : 'labels'"></div>
        <div class ="teacherName"></div><label class='tName'>Tina Arora</label><br> 
        <div class='student' style="top: 10px;" bo-text="'student' | translate : 'labels'"></div>
        <div class ="studentName" ></div><label class='sName'>All</label><br>
        <div class ="studentName" ></div><label class='sName'>Jessica</label><br>
        <div class ="studentName" ></div><label class='sName'>Rebecca</label><br>
        <div class ="studentName" ></div><label class='sName'>Stuart</label><br>
        <div class ="studentName" ></div><label class='sName'>Philip</label><br>
        <div class ="studentName" ></div><label class='sName'>John</label><br>
        <div class ="studentName" ></div><label class='sName'>Diana</label><br>      
        <div class ="studentName" ></div><label class='sName'>Jones</label><br>              
      </div>
    </div>    
    <section class ='footer' ng-show="CONFIG.clientName == 'Hurix'">
      <div class="buttonWrapper">
        <button class="cancel shareBackButton" bo-text="'cancel' | translate : 'buttons'" back-to-default-panel></button>
        <button  class="share" bo-text="'share' | translate : 'buttons'"></button>  
    </div>
    </section>
  </section>
  <!-- End of Share panel -->

  <!-- Start of Setting panel -->
  <section class="settingPanel" ng-style="{true: {left: '100%'}}[StateService.panelOpen == 'mydataPanel']">
    <div class="header">
      <div class="backArrow settingBackButton" back-to-default-panel></div>
      <div class="name" bo-text="'settings' | translate : 'labels'"></div>
    </div>
    <div class="highlightImage">     
      <div class='imageShare'><div class='shareText' bo-text="'share' | translate : 'buttons'"></div></div>
      <div class='imageReceive'><div class='receiveText' bo-text="'receive' | translate : 'buttons'"></div></div>     
    </div>  
    <div class= "teacherStudentNames" vcustom-scrollbar allow-scroll>
      <div style="padding: 0 0 10px 0;">
        <div class='teacher' bo-text="'teacher' | translate : 'labels'"></div>
          <label class='tName'>Tina Arora</label><div class="wrapper"><div class ="teacherShare"></div><div class ="teacherReceive"></div></div><br> 
        <div class='student' style="top: 10px;" bo-text="'student' | translate : 'labels'"></div>
        <div>
          <label class='sName'>All</label><div class="wrapper"><div class ="studentReceive"></div><div class ="studentShare"></div></div><br>
          <label class='sName'>Jessica</label><div class="wrapper"><div class ="studentReceive"></div><div class ="studentShare"></div></div><br>
          <label class='sName'>Rebecca</label><div class="wrapper"><div class ="studentReceive"></div><div class ="studentShare"></div></div><br>
          <label class='sName'>Stuart</label><div class="wrapper"><div class ="studentReceive"></div><div class ="studentShare"></div></div><br>
          <label class='sName'>Philip</label><div class="wrapper"><div class ="studentReceive"></div><div class ="studentShare"></div></div><br>
          <label class='sName'>John</label><div class="wrapper"><div class ="studentReceive"></div><div class ="studentShare"></div></div><br>
          <label class='sName'>Diana</label><div class="wrapper"><div class ="studentReceive"></div><div class ="studentShare"></div></div><br>
          <label class='sName'>Jones</label><div class="wrapper"><div class ="studentReceive"></div><div class ="studentShare"></div></div><br>
          <label class='sName'>Wilson</label><div class="wrapper"><div class ="studentReceive"></div><div class ="studentShare"></div></div><br>
          <label class='sName'>Johnson</label><div class="wrapper"><div class ="studentReceive"></div><div class ="studentShare"></div></div><br>      
        </div>
      </div>
    </div>
    <section class ='footer' ng-show="CONFIG.clientName == 'Hurix'">
      <div class="buttonWrapper">
        <button class="cancel settingBackButton" bo-text="'cancel' | translate : 'buttons'" back-to-default-panel></button>
        <button  class="done" bo-text="'done' | translate : 'buttons'" ng-click="togglePanel('mydataPanel')"></button>  
      </div>
    </section>
  </section>
  <!-- End of Setting panel -->
</div>   
<!-- MyData Panel Ends