<div id="searchPortlet" class="uiSearchPortlet">

  <div id='resultLoading' class="resultLoading">
  &{unifiedsearch.searching.label}
  </div>

  <div id="searchPage">

    <div id="searchForm" class="searchContainer">
      <div class="pull-left searchForm">
        <input type="text" id="txtQuery" style="width: 220px;">
        <button type="button" class="btn btn-primary" id="btnSearch" value="Search">&{unifiedsearch.index.label}</button>
      </div>      
      <div id="resultSort" class="pull-right resultSort">
        <div class="btn-group uiDropdownWithIcon pull-right">
          <a data-toggle="dropdown" class="btn dropdown-toggle">
            <span id="sortField">&{unifiedsearch.index.relevancy.label}</span>
            <span class="spiter"></span>
            <i class="uiIconMiniArrowDown uiIconLightGray"></i>
          </a>
          <ul id="sortOptions" class="dropdown-menu">
            <li><a href="#" sort="relevancy">&{unifiedsearch.index.relevancy.label}<i class="uiIconSortDown"></i></a></li>
            <li><a href="#" sort="date">&{unifiedsearch.index.date.label}</i></a></li>
            <li><a href="#" sort="title">&{unifiedsearch.index.title.label}</a></li>
          </ul>
        </div>
        <span>&{unifiedsearch.index.sortBy.label}:</span>
      </div>      
      <div id="resultHeader" class="center resultHeader"></div>
    </div>
      <div class="clearfix">

        <div id="facetsFilter" class="filterContainer pull-left">
          <div class="uiBox">
            <h5 class="title">&{unifiedsearch.index.filterBy.label}</h5>
            <div class="uiContentBox">
              <div id="siteFilter" class="siteFilter">
                <h6><span class="uiCheckbox"><input type="checkbox" class="checkbox" name="site" value="all"><span></span></span>&{unifiedsearch.index.allsites.label}</h6>
                <ul id="lstSites" class="listFilter"></ul>
              </div>

              <div class="contentTypeFilter">
                <h6><span class="uiCheckbox"><input class="checkbox" type="checkbox" name="contentType" value="all"><span></span></span>&{unifiedsearch.index.contentTypes.label}</h6>
                <ul id="lstContentTypes" class="listFilter"></ul>
              </div>
            </div>
          </div>
        </div>

        <div id="resultPage" class="resultPage uiBox">
          <div id="result"></div>          
          <div class="noResultInfo">
            <h3>&{unifiedsearch.index.noResult.label}</h3>
            <p>&{unifiedsearch.index.notMatch.label}
            <br />
            &{unifiedsearch.index.tryDiffWord.label}
            </p>
          </div>
          <div id="showMore" class="showMore"><button type="button" class="btn" id="btnShowMore" value="&{unifiedsearch.index.showmore.label}">&{unifiedsearch.index.showmore.label}</button></div>
        </div>	       
      </div>
  </div>
</div>

<script>
window.require(["PORTLET/unified-search/UnifiedsearchPortlet"], function() {
  initSearch();
});  
</script>
