
<div class='search-panel ng-cloak' ng-show="togglePanelDisplay()">
  <div class="panelWrapper">
    <div class="search-box">
      <div class='wsearch-icon-div'></div>
      <div class="input-prepend">
        <form class="form-search">
          <textarea type="text" class="search-query nowrap" ng-model="$parent.searchTerm" placeholder="{{ 'search' | translate : 'labels' }}" ng-keyup="$parent.searchIt($parent.searchTerm)" block-enter="$parent.searchIt($parent.searchTerm)" custom-ng-focus></textarea>         
        </form>
      </div>
    </div>
    <div class="search-within">
      <div class="search-within-header-container">
          <span class="search-within-header" bo-title="'searchwithin' | translate : 'labels'"></span>
      </div>
      <div class="search-type">
        <div class="all" ng-class="{'selected': 'all'==searchType, 'disable': filterdata.length == 0}" ng-click="toggleSearchType('all', $event)" bo-text="'all' | translate : 'labels'"></div>
        <div class="document" ng-class="{'selected': 1==searchType, 'disable': filterdata.length == 0 || indexOf(arrFilter, 1) == -1 }" ng-click="toggleSearchType('1', $event)" bo-title="'documents' | translate : 'tooltips'"></div>
        <div class="audio" ng-class="{'selected': 3==searchType, 'disable': filterdata.length == 0 || indexOf(arrFilter, 3) == -1 }" ng-click="toggleSearchType('3', $event)" bo-title="'audios' | translate : 'tooltips'"></div>
        <div class="video" ng-class="{'selected': 2==searchType, 'disable': filterdata.length == 0 || indexOf(arrFilter, 2) == -1}" ng-click="toggleSearchType('2', $event)" bo-title="'videos' | translate : 'tooltips'"></div>
        <div class="image" ng-class="{'selected': 4==searchType, 'disable': filterdata.length == 0 || indexOf(arrFilter, 4) == -1 }" ng-click="toggleSearchType('4', $event)" bo-title="'images' | translate : 'tooltips'"></div>
      </div>     
    </div> 
    <table class="table table-bordered">
      <tbody>     
        <tr>
          <td style="font-weight:bold !important;font-family: Trebuchet MS, Helvetica, Arial, sans-serif;padding-left:10px !important; border-left: 0px solid transparent;" ng-show='filterdata.length != 0'>
            <span><span bo-text="'resultsFound' | translate : 'messages'"></span> ({{searchCount}})</span>
          </td>
          <td style="font-weight:bold !important;font-family: Trebuchet MS, Helvetica, Arial, sans-serif;padding-left:10px !important; border-top: 1px solid transparent; border-left: 0px solid transparent;" ng-show=" filterdata.length == 0 && isSearched">
            <span><span bo-text="'resultsFound' | translate : 'messages'"></span> ({{searchCount}})</span>
          </td>
        </tr>               
      </tbody>
    </table>  
    <section class='search-panel-content' trigger-height-search vcustom-scrollbar >
      <div >
        <table class="table" style="margin-bottom: 0px;">
          <tbody>
            <tr class="needsclick" ng-repeat="data in filterdata track by $index" ng-show="isContainsResource(data.resources)" ng-click="openSearchPage(data.hname, data.pageno)" style="cursor:pointer">
              <td style="padding:0px;  padding-right:10px; border-top: 0px solid #dddddd;"><div style="border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; padding-bottom: 10px; padding-top: 10px;"><small>{{ 'page' | translate : 'labels' }} {{data.pageno || data.foliono}}</small><div style="word-wrap:break-word; margin-top: 3px; margin-bottom: -10px; margin-right: 10px;"><p ng-bind-html="data.name"></p></div><div class="searchresources" ng-show="data.resources.length > 0"><span ng-repeat="resource in data.resources track by $index" ng-class="{'1':'document','2':'video','3':'audio','4':'image','5':'weblink','6':'activity'}[resource]"></span></div></div></td>
            </tr>
            <tr ng-show=" filterdata.length == 0 && isSearched">
              <td style="padding-left:10px;border-top:0px !important;">
                <span bo-text="'noResultsFound' | translate : 'messages'" style="padding-left:30px; font-family: Trebuchet MS;"></span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  </div>
</div>