<!-- TOC Panel Starts -->
<div class='toc-panel ng-cloak' ng-show="StateService.panelOpen == 'tocPanel'">
  <div class='panelWrapper'>
    <header>
      <ul class="nav nav-tabs center top">
        <li  ng-class="toggleTOCTabClass('index')" ng-show="isVisible('tableOfContents')"><a href="" ng-click="openTab('index')" ng-bind="translateIt('index','labels')"></a></li>
        <li  ng-class="toggleTOCTabClass('note')" ><a href="" ng-click="openTab('note')" ng-bind="translateIt('notes','labels')"></a></li>
        <li  ng-class="toggleTOCTabClass('bookmarks')" ng-show="isVisible('bookMarkShow')"><a href="" ng-click="openTab('bookmarks')" ng-bind="translateIt('bookmarks','labels')"></a></li>
        <li  ng-class="toggleTOCTabClass('highlight')"><a href="" ng-click="openTab('highlight')" ng-bind="translateIt('highlight','labels')"></a></li>
      </ul>
      <p class="bar"></p>             
    </header>

    <!-- TOC tab Starts -->
    <section id='toc-panel-index-content' ng-show="tabOpen == 'index'">
      <div class='chapter'>
        <div class='pull-right' style="padding-right: 9px;margin-top: -4px;">
          <form class="form-search" ng-keyup="searchPInToc(toc_search)">
            <input type="text" style="width:auto;padding-left:25px; border-radius: 0px !important;" class="search-query search-icon-div" ng-model="$parent.toc_search" placeholder="{{ 'search' | translate : 'labels' }}" custom-ng-focus>
          </form>
        </div>
      </div>
      <table class='noIndexTable'>
        <tr ng-show="plocal_chapters.length == 0">
          <td><div class='noIndexMessage' bo-text="'noSearchesFound' | translate : 'messages'"></div></td>
        </tr>
      </table>   
      <div id="index-iscroll-watcher" class="wChap" ng-hide="plocal_chapters.length == 0" trigger-height-toc vcustom-scrollbar>
        <div >
          <div>
            <div ng-repeat="chapter in plocal_chapters track by $index" class="wChapter">
              <div class="wChapter-content"  ng-click="openPSections(chapter)">
                <div class="wrapper">
                  <div class="wChapter-name">{{chapter.name}}</div>
                  <div ng-show="checkSectionsLength(chapter)" class="wNext-section" ng-class="{'open':chapter.id==currentWChapter }"></div>
                </div>
              </div>
              <div ng-show="chapter.id==currentWChapter" class="wSection" ng-repeat="section in plocal_sections track by $index">
                <div ng-click="openPSubSections(section)" class="wSection-name">
                  {{section.name}}
                </div>
                <div ng-show="section.id==currentWSection" class="wSubsection-name" ng-click="redirectToPage(subsection.pageIndex)" ng-repeat="subsection in plocal_subsections track by $index">{{subsection.name}}
                </div>
              </div>
            </div>
          </div>                   
        </div>
      </div>
    </section>


     <!-- notes tab Starts -->
    <section id="toc-panel-note-content" ng-show="tabOpen == 'note'">
      <div class= "note-error" ng-show='checkdata()'  bo-text="'noNotesFound' | translate: 'messages'"></div>
      <div id="note-iscroll-watcher" class="wNote" ng-hide="plocal_chapters.length == 0" trigger-height-toc vcustom-scrollbar>
        <div >
          <div>
            <div class= 'wrapNotes'>
              <div ng-repeat="data in myData track by $index" ng-show='data.Notes.length>0' class="wNote">
                <div ng-repeat="notes in data.Notes" class="wNote-content" ng-click="jumpAndOpenNote(notes.page,notes.id,notes)">
                  <div class="wNote-selectedText" ng-bind-html="to_trusted(notes.noteTarget)" ng-show="notes.note"></div>
                  <div class="wNote-pageNo" bo-text="setPageNo(notes.page)"></div>
                  <div class="wNote-chapterName">{{data.chapterName}}</div>
                  <div class="arrow" ng-show="notes.note"></div>
                  <div class="alert wNote-alert" ng-show="notes.note">
                    <strong bo-text="('youWrote' | translate : 'labels')+' :'"></strong> 
                     <span class="media-heading" ng-bind="notes.note | unescape"></span>
                  </div>                
                  <div ng-bind="notes.pageNote" style="padding-left: 10px;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- bookmarks tab Starts -->
    <section id='toc-panel-bookmark-content' ng-show="tabOpen == 'bookmarks'">
      <!-- <div class='chapter'>
        <div class='pull-right' style="padding-right: 15px;margin-top: -4px;">
          <form class="form-search" ng-keyup="searchInBookmarks(bookmark_search)">
            <input type="text" style="width:auto;padding-left:25px;border-radius: 0px !important; box-shadow: inset 0px 1px 1px 1px #999;" class="search-query search-icon-div" ng-model="$parent.bookmark_search" placeholder="{{ 'search' | translate : 'labels' }}" custom-ng-focus>
          </form>
        </div>
      </div> -->
      <div class='ng-cloak' ng-show="(arrBookmarks | filterBookmarksByChapter: bookmarkChapter).length == 0">
        <div class='bookmark-error' bo-text="'noBookmarksFound' | translate: 'messages'"></div>
      </div>
      <div id="bookmark-iscroll-watcher" trigger-height-toc vcustom-scrollbar class="wBookmark">
        <div>
          <div>
            <div ng-repeat="data in myData track by $index" ng-show='data.Notes.length>0' class="wBookmark-content">
              <div ng-repeat="notes in data.Notes" class="wBookmark-row" ng-click="jumpAndOpenNote(notes.page,notes.id,notes)">
                <div>
                  <div class="wBookmark-icon" ng-class="{'whighlight_important': notes.flag =='highlight_important','whighlight_normal': notes.flag=='highlight_normal'}"></div>
                  <div class="wBookmark-pageNo">{{'page' | translate : 'labels'}}. {{notes.page + 1}}</div>
                  <div class="wBookmark-text">
                    <div style="line-height: 16px;">{{data.chapterName}}</div>
                    <div class='bookmark-date muted' ng-bind="placeDate(data.created)" style="font-height: 14px;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>                   
        </div>
      </div>
    </section>

    <!-- highlight tab Starts -->
    <section id="toc-panel-highlight-content" ng-show="tabOpen == 'highlight'" class="wHighlight">      
      <div class="wHighlight-button-div">
        <div class="pull-right wHighlight-button" ng-click="toggleImportant()" bo-text="'important' | translate : 'labels'"></div>
      </div>      
      <div id="highlight-iscroll-watcher" class="wHigh" ng-hide="plocal_chapters.length == 0" trigger-height-toc vcustom-scrollbar>
        <div >
          <div>
            <div class="wrapHighlight">
              <div ng-repeat="data in myData track by $index" ng-show='data.Notes.length>0' class="wHighlight-content">
                <div ng-repeat="notes in data.Notes" class="wHighlight-row" ng-click="jumpAndOpenNote(notes.page,notes.id,notes)">
                  <div>   
                   <div class="wHighlight-pageNo" bo-text="setPageNo(notes.page)"></div>               
                    <div class="wHighlight-icon" ng-class="{'whighlight_important': notes.flag =='highlight_important','whighlight_normal': notes.flag=='highlight_normal'}"></div>
                    <div class="wHighlight-text">
                      <div ng-bind-html="to_trusted(notes.noteTarget)"></div>
                      <div class="wHighlight-chapter">{{data.chapterName}}</div>
                      <div class='date' ng-bind="placeDate(data.created)"></div>   
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class= "highlight-error" ng-show='checkdata()'  bo-text="'noHighlightsFound' | translate: 'messages'"></div>
    </section>
  </div>
</div>
<!-- TOC Panel Ends