<!-- TOC Panel Starts -->
<div class='toc-panel ng-cloak' ng-show="StateService.panelOpen == 'tocPanel'">
  <header>
    <ul class="nav nav-tabs center top">
      <li  ng-repeat=" tab in tabs track by $index" ng-class="toggleTOCTabClass(tab)"><a href="" ng-click="openTab(tab)" ng-bind="translateIt(tab,'labels')"></a></li>
    </ul>             
  </header>
  <section id='toc-panel-index-content' ng-show="tabOpen == 'index'">
    <div class='chapter'>
      <span bo-text="'index' | translate : 'labels'"></span>
      <div class='pull-right' style="padding-right: 15px;margin-top: -4px;">

        <form class="form-search" ng-keyup="searchPInToc(toc_search)">
          <button type="button" class="btn btn-primary" ng-hide="local_pchapters.length == 0 || currentPChapter || plocal_sections.length == 0" ng-click="backPath()">Back</button>
          <input type="text" style="width:auto;padding-left:25px; box-shadow: inset 0px 1px 1px 1px #999;" 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" ng-hide="plocal_chapters.length == 0" vcustom-scrollbar>
      <div >
        <div>
          <table class="table outer-grid" occupy-height="{exclude: 93}" style="margin:0px !important;"> <!-- 138 => 50px HEADER and 43px searchBar 45px footer -->
            <tbody>
              <tr>
                <td class="ng-cloak" ng-show="currentPUnit">
                  <table class="table table-bordered unit-table">
                    <tr class="needsclick" ng-repeat="unit in plocal_units track by $index" ng-click="redirectToPage(unit.pageIndex)">
                      <td ng-class="{true: 'selected'}[unit.id == currentPUnit]">
                        <div ng-bind="unit.id"></div>
                      </td>
                    </tr>
                  </table>
                </td>
                <td class="ng-cloak" style="width: 50%" ng-show="currentPUnit" ng-style="{true: {width: '50%'}, false:{width: '100%'}}[plocal_chapters.length > 0]">
                  <table class="table" ng-class="{true: 'section-table', false: 'chapter-table'}[currentPUnit==null]">
                    <tr ng-repeat="unit in plocal_units track by $index">
                      <td class="needsclick" ng-class="{true: 'selected'}[unit.id == currentPUnit]">
                          <div class="next-section" ng-show="checkChaptersLength(unit)" ng-click="openPChapters(unit)"></div>
                          <div class="section-count"  ng-click="redirectToPage(unit.pageIndex)">{{unit.pageIndex + 1}}</div>
                          <div class='chapter-name' ng-bind="unit.name"  ng-click="redirectToPage(unit.pageIndex)"></div>
                      </td>
                    </tr>
                  </table>
                </td>
                <td class="ng-cloak" ng-show="currentPUnit">
                  <table class="table table-bordered unit-table">
                    <tr class="needsclick" ng-repeat="chapter in plocal_chapters track by $index" ng-click="redirectToPage(chapter.pageIndex)">
                      <td ng-class="{true:'selected'}[chapter.id==currentPChapter]">
                        <div ng-bind="$index+1"></div>
                      </td>
                    </tr>
                  </table>
                </td>
                <td class="ng-cloak" style="width: 50%;" ng-show="currentPChapter">
                  <table class="table" ng-class="{true: 'section-table', false: 'chapter-table'}[currentPChapter==null]">
                    <tr ng-repeat="chapter in plocal_chapters track by $index">
                      <td class="needsclick" ng-class="{true:'selected'}[chapter.id==currentPChapter]">
                        <div class='next-section' ng-style="{false: {'visibility': 'hidden'}}[checkSectionsLength(chapter)]" ng-click="openPSections(chapter)"></div>
                        <div ng-class="{true: 'subsection-count', false: 'section-count'}[currentPChapter==null]" ng-click="redirectToPage(chapter.pageIndex)">{{chapter.pageIndex + 1}}<span></span></div>
                        <div  ng-bind="chapter.name" ng-click="redirectToPage(chapter.pageIndex)" ng-class="{true: 'section-name', false: 'chapter-name'}[currentPChapter==null]"></div>
                      </td>
                    </tr>
                  </table>
                </td>
                <td class="ng-cloak" ng-show="currentPUnit">
                  <table class="table table-bordered unit-table">
                    <tr class="needsclick" ng-repeat="section in plocal_sections track by $index" ng-click="redirectToPage(section.pageIndex)">
                      <td ng-class="{true:'selected'}[section.id==currentPSection]">
                        <div ng-bind="$index+1"></div>
                      </td>
                    </tr>
                  </table>
                </td>
                <td class="ng-cloak" style="width: 50%;" ng-show="currentPChapter || currentPSection">
                  <table class="table" ng-class="{true: 'section-table', false: 'chapter-table'}[currentPSection==null]">
                    <tr ng-repeat="section in plocal_sections track by $index">
                      <td class="needsclick" ng-class="{true:'selected'}[section.id==currentPSection]">
                        <div class="next-section" ng-style="{false: {'visibility': 'hidden'}}[checkSubSectionsLength(section)]" ng-click="openPSubSections(section)"></div>
                        <div  ng-class="{true: 'subsection-count', false: 'section-count'}[currentPSection==null]" ng-click="redirectToPage(section.pageIndex)">{{section.pageIndex + 1}}<span></span></div>
                        <div ng-bind="section.name" ng-class="{true: 'section-name', false: 'chapter-name'}[currentPSection==null]" ng-click="redirectToPage(section.pageIndex)"></div>
                      </td>
                    </tr>
                  </table>
                </td>
                <td class="ng-cloak" style="width: 50%;" ng-show="currentPSection || currentPSubSection">
                  <table class="table section-table">
                    <tr class="needsclick" ng-repeat="subsection in plocal_subsections track by $index" ng-click="redirectToPage(subsection.pageIndex)">
                      <td>
                        <div class="subsection-count">{{subsection.pageIndex + 1}}<span></span></div>
                        <div class="section-name" ng-bind="subsection.name"></div>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </tbody>
          </table> 
        </div>                   
      </div>
    </div>
  </section>

  <section id='toc-panel-bookmark-content' ng-show="tabOpen == 'bookmarks'">
    <div class='chapter'>
      <span bo-text="'bookmarks' | translate : 'labels'"></span>
      <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; 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 id="bookmark-iscroll-watcher" vcustom-scrollbar>
      <div >
        <div>
          <table class="table outer-grid ng-cloak" ng-show="sortType == 'Chapter'" occupy-height="{exclude: 93}" style="margin:0px !important;"> <!-- 138 => 50px HEADER, 46px searchBar, 42px filterBar -->
            <tbody>
              <tr>
                <!-- <td class="ng-cloak">
                  <table class="table table-bordered unit-table">
                    <tr>
                      <td ng-class="{true: 'selected'}[bookmarkChapter == 'All']"><div></div></td>
                    </tr>
                    <tr ng-repeat="chapter in local_bookmarks_chapters track by $index">
                      <td ng-class="{true: 'selected'}[chapter.id == bookmarkChapter]"><div ng-bind="displayUnit(chapter, $index)"></div></td>
                    </tr>
                  </table>                   
                </td> -->
                <td class="ng-cloak" style="width: 50%">
                  <table class="table chapter-table">
                    <tr class="needsclick" ng-click="chooseChapter('All')">
                      <td ng-class="{true: 'selected'}[bookmarkChapter == 'All']">
                        <div class='chapter-name' bo-text="'all' | translate : 'labels'" style="float: left;"></div>
                        <span class='bookmark-count'>{{arrBookmarks.length}}</span>
                      </td>
                    </tr>
                    <tr class="needsclick" ng-repeat="chapter in local_bookmarks_chapters track by $index" ng-click="chooseChapter(chapter.id)">
                      <td ng-class="{true: 'selected'}[chapter.id == bookmarkChapter]">
                        <div class="section-count">{{chapter.pageIndex + 1}}</div><div class='chapter-name' ng-bind="chapter.name"></div>
                      </td>
                    </tr>
                  </table>  
                </td>
                <td class="ng-cloak" style="width: 50%;">
                  <table class="table section-table">
                    <tr class="needsclick" ng-repeat="bookmark in arrBookmarks | filterBookmarksByChapter: bookmarkChapter track by $index" ng-click="redirectToBookmarkPage(bookmark)">
                      <td class='bookmark-row'>
                        <div class='bookmark-next' ng-click="redirectToBookmarkPage(bookmark)"></div>
                        <div class="bookmark-page">{{bookmark.page + 1}}</div>
                        <!--<div class='bookmark-title' style="visibility: hidden;">{{bookmark.title}}</div>-->
                        <div class='bookmark-chapter-name muted' ng-bind-html="placeChapterName(bookmark.page)"></div>
                        <div class='bookmark-date muted' ng-bind="placeDate(bookmark.created)"></div>
                      </td>                          
                    </tr>
                    <tr class='ng-cloak' ng-show="(arrBookmarks | filterBookmarksByChapter: bookmarkChapter).length == 0">
                      <td class='bookmark-error' bo-text="'noBookmarksFound' | translate: 'messages'"></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
          <table class="table outer-grid ng-cloak" ng-show="sortType == 'Date'" occupy-height="{exclude: 93}" style="margin:0px !important;"> <!-- 86 => 40px HEADER, 46px searchBar, 44px filterBar -->
            <tbody>
              <tr>
                <td class="ng-cloak" style="width: 50%">
                  <table class="table chapter-table">
                    <tr class="needsclick" ng-click="chooseDate('All')">
                      <td ng-class="{true: 'selected'}[bookmarkDate == 'All']">
                        <div class='chapter-name'  bo-text="'all' | translate : 'labels'" style="float: left;"></div>
                        <span class='bookmark-count'>{{arrBookmarks.length}}</span>
                      </td>
                    </tr>
                    <tr ng-repeat="bookmark_date in bookmark_dates track by $index" ng-click="chooseDate(bookmark_date)" ng-hide="(arrBookmarks | filterBookmarksByChapter: bookmarkChapter).length == 0" class='ng-cloak needsclick'>
                      <td ng-class="{true: 'selected'}[bookmark_date == bookmarkDate]">
                        <div class='chapter-name' ng-bind="bookmark_date"></div>
                      </td>
                    </tr>
                  </table>  
                </td>
                <td class="ng-cloak" style="width: 50%;">
                  <table class="table section-table">
                    <tr class="needsclick" ng-repeat="bookmark in arrBookmarks | filterBookmarksByDate: bookmarkDate track by $index" ng-click="redirectToPage(bookmark.page)">
                      <td class='bookmark-row'>
                        <div class="bookmark-page">{{bookmark.page + 1}}</div>
                        <!--<div class='bookmark-title' style="visibility: hidden;">{{bookmark.title}}</div>-->
                        <div class='bookmark-chapter-name muted' ng-bind-html="placeChapterName(bookmark.page)"></div>
                        <div class='bookmark-date muted' ng-bind="placeDate(bookmark.created)"></div>
                      </td>                          
                    </tr>
                    <tr class='ng-cloak' ng-show="(arrBookmarks | filterBookmarksByChapter: bookmarkChapter).length == 0">
                      <td class='bookmark-error' bo-text="'noBookmarksFound' | translate: 'messages'"></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </tbody>
          </table> 
        </div>                   
      </div>
    </div>
    <footer>
      <ul class="nav nav-tabs center bottom">
        <li ng-class="{'Chapter': 'active'}[sortType]"><a href="" ng-click="toggleSortType('Chapter')" bo-text="'chapter' | translate : 'labels'"></a></li>
        <li ng-class="{'Date': 'active'}[sortType]"><a href="" ng-click="toggleSortType('Date')" bo-text="'date' | translate : 'labels'"></a></li>
      </ul>         
    </footer>
  </section>

  <section id="toc-panel-resources-content" ng-show="tabOpen == 'resources'">
    <div class='chapter'>
        <span bo-text="'resources' | translate : 'labels'"></span>
        <div class='pull-right' style="padding-right: 15px;margin-top: -4px;">
          <form class="form-search" ng-keyup="searchInResources(resources_search)">
            <span style="Color:#555;font-weight:normal;font-family: Arial;font-size:14px;" bo-text="'show' | translate : 'labels'"></span>
            <div class="btn-group">
              <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                {{filterName}}
                <span class="caret"></span>
              </a>              
              <ul class="dropdown-menu">
                <li ng-click="toggleResourceType('All')"><img src="themes/fancy/images/image_icon.png" height="35" width="35" style="padding-right: 10px; border: 2px solid transparent; visibility:hidden;"><span bo-text="'all' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['All' == resourceType]"></span></li>
                <li ng-click="toggleResourceType('Image')" ng-show = "isContain('image')"><img src="themes/fancy/images/image_icon.png" height="35" width="35" style="padding-right: 10px; border: 2px solid transparent;"><span bo-text="'image' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['Image' == resourceType]"></span></li>
                <li ng-click="toggleResourceType('Audio')" ng-show = "isContain('audio')"><img src="themes/fancy/images/audio_icon.png" height="35" width="35" style="padding-right: 10px; border: 2px solid transparent;"><span bo-text="'audio' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['Audio' == resourceType]"></span></li>
                <li ng-click="toggleResourceType('Video')" ng-show = "isContain('video')"><img src="themes/fancy/images/video_icon.png" height="35" width="35" style="padding-right: 10px; border: 2px solid transparent;"><span bo-text="'video' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['Video' == resourceType]"></span></li>
                <li ng-click="toggleResourceType('Activity')" ng-show = "isContain('activity')"><img src="themes/fancy/images/activity_icon.png" height="35" width="35" style="padding-right: 10px; border: 2px solid transparent;"><span bo-text="'activity' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['Activity' == resourceType]"></span></li>
                <li ng-click="toggleResourceType('Document')" ng-show = "isContain('documents')"><img src="themes/fancy/images/doc_icon.png" height="35" width="35" style="padding-right: 10px; border: 2px solid transparent;"><span bo-text="'document' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['Document' == resourceType]"></span></li>
                <li ng-click="toggleResourceType('Weblink')" ng-show = "isContain('web links')"><img src="themes/fancy/images/weblink_icon.png" height="35" width="35" style="padding-right: 10px; border: 2px solid transparent;"><span bo-text="'weblink' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['Weblink' == resourceType]"></span></li>
                <li ng-click="toggleResourceType('HtmlWrap')" ng-show = "isContain('htmlwrap')"><img src="themes/fancy/images/activity_icon.png" height="35" width="35" style="padding-right: 10px; border: 2px solid transparent;"><span bo-text="'htmlwrap' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['HtmlWrap' == resourceType]"></span></li>
                <li ng-click="toggleResourceType('KalturaVideo')" ng-show = "isContain('kaltura_video')"><img src="themes/fancy/images/video_icon.png" height="35" width="35" style="padding-right: 10px; border: 2px solid transparent;"><span bo-text="'kalturavideo' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['KalturaVideo' == resourceType]"></span></li>
                <li ng-click="toggleResourceType('ExternalWebLink')" ng-show = "isContain('external_web_link')"><img src="themes/fancy/images/weblink_icon.png" height="35" width="35" style="padding-right: 10px; border: 2px solid transparent;"><span bo-text="'externalweblink' | translate : 'labels'"></span><span ng-class="{true: 'selected'}['ExternalWebLink' == resourceType]"></span></li>
              </ul>
              <div class="dropdown-menu arrow"></div>
            </div>
            <input type="text" style="width:auto;padding-left:25px;box-shadow: inset 0px 1px 1px 1px #999;" class="search-query search-icon-div" ng-model="$parent.resources_search" placeholder="{{ 'search' | translate : 'labels' }}" custom-ng-focus>
          </form>
        </div>
    </div>
    <div id="resource-iscroll-watcher" vcustom-scrollbar>
      <div >
        <div>
          <table class="table outer-grid" occupy-height="{exclude: 93}"> <!-- 138 => 50px HEADER and 46px searchBar 42px footer-->
            <tr>
              <!-- <td>
                <table class="table table-bordered unit-table">
                  <tr>
                    <td ng-class="{true: 'selected'}['All' == currentChapterResource]"><div></div></td>
                  </tr>
                  <tr ng-repeat="chapter in local_resources_chapters track by $index">
                    <td ng-class="{true: 'selected'}[chapter.xmlId == currentChapterResource]"><div ng-bind="displayUnit(chapter, $index)"></div></td>
                  </tr>
                </table>
              </td> -->
              <td style="width:50%">
                <table class="table chapter-table">
                  <tr ng-click="openChapterResources('All')">
                    <td ng-class="{true: 'selected'}['All' == currentChapterResource]">
                      <div class='chapter-name' bo-text="'all' | translate : 'labels'"></div>
                      <span class='resource-count'>{{local_resources.length}}</span>
                    </td>
                  </tr>
                  <tr class="needsclick" ng-repeat="chapter in local_resources_chapters track by $index" ng-click="openChapterResources(chapter.xmlId)">
                    <td ng-class="{true: 'selected'}[chapter.xmlId == currentChapterResource]"><div class="section-count">{{chapter.pageIndex + 1}}</div><div class='chapter-name' ng-bind="chapter.name"></div></td>
                  </tr>
                </table>
              </td>
              <td style="width:50%">
                <table class="table chapter-table">
                  <tr ng-show="local_resources.length == 0">
                    <td><div class='chapter-name' bo-text="'noResourcesFound' | translate : 'messages'"></div></td>
                  </tr>
                  <tr class="needsclick" ng-repeat="resource in local_resources track by $index" ng-click="jumpAndPlayResource(resource.pageIndex, resource.resourceId)">
                    <td><div class='resource-next'></div><div class="section-count">{{resource.pageIndex + 1}}</div><span class='resource-icon' ng-class="{'1':'document','2':'video','3':'audio','4':'image', '5':'weblink', '6':'htmlwrap', '7':'activity', '10':'video', '11':'weblink'}[resource.typeId]"></span><div class='chapter-name'>{{resource.title}}</div></td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </section>
  <section id="toc-panel-glossary-content" ng-show="tabOpen == 'glossary'">
     <div class='chapter'>
         <span bo-text="'glossary' | translate : 'labels'"></span>
         <div class='pull-right' style="padding-right: 15px;margin-top: -4px;">
           <form class="form-search" ng-keyup="searchInGlossary(glossary_search)">
             <input type="text" style="width:auto;padding-left:25px; box-shadow: inset 0px 1px 1px 1px #999;" class="search-query search-icon-div" ng-model="$parent.glossary_search" placeholder="{{ 'search' | translate : 'labels' }}" custom-ng-focus>
           </form>
         </div>
     </div>
     <div >
       <div>
         <div>
           <table class='noGloassaryTable'>
             <tr ng-show="!local_glossaryItems || local_glossaryItems.length == 0">
               <td><div class='noGloassaryMessage' bo-text="'noGlossaryFound' | translate : 'messages'"></div></td>
             </tr>
           </table>            
           <table class="table outer-grid"  ng-show="local_glossaryItems" occupy-height="{exclude: 96}" style="margin:0px !important;"> <!-- 96 => 50px HEADER and 42px searchBar -->
            <tr>
              <td>
                <div id="glossary-alphabets" vcustom-scrollbar>
                  <div >
                    <div>
                      <table class="table table-bordered unit-table">
                        <tr class="needsclick" ng-repeat="glossaryitem in local_glossaryItems track by $index" ng-click="openGlossaryKeyWord(glossaryitem)" style="cursor:pointer;">
                          <td ng-class="{true: 'selected'}[currentWord == glossaryitem.word]" style="padding: 0px;"><div ng-bind="glossaryitem.word" style="border-right: 1px solid #ccc;height: 48px;text-align:center;padding-right:12px;"></div></td>
                        </tr>
                      </table>
                     </div>
                  </div>
                </div>
              </td>
              <td style="width:50%">
                <div id="glossary-chapter" ng-style="keywordStyle()" vcustom-scrollbar>
                  <div >
                    <div>
                      <table class="table chapter-table" style="padding-right: 3px;">
                        <tr class="needsclick" ng-repeat="glossarykeyword in local_glossaryKeywords track by $index" ng-click="openKeywordDescription(glossarykeyword)">
                          <td ng-class="{true: 'selected'}[currentKeyword  == glossarykeyword.keyword]"><div class='chapter-name'  ng-bind="glossarykeyword.keyword"></div></td>
                        </tr>
                      </table>
                    </div>
                  </div>  
                </div>
              </td>
              <td style="width:50%">
                <div id="glossary-content" ng-style="descriptionStyle()" vcustom-scrollbar> 
                  <div >
                    <div>
                      <table class="table chapter-table">
                        <tr ng-repeat="keyworddescription in local_keywordDescriptions track by $index">
                          <td><div class="section-count">{{keyworddescription.split('!$!')[1]}}</div><div class='chapter-name'>{{keyworddescription.split('!$!')[0]}}</div></td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </section>   
</div>
<!-- TOC Panel Ends