---
name: home
url: /search?query
controller: HomeController as hc
---
<zf-offcanvas position="left"></zf-offcanvas>
<div class="grid-frame vertical">

  <!-- Top Bar -->
  <nav class="primary title-bar">
    <span class="center">
      <form name="searchForm" class="show-for-medium" ng-submit="hc.search()">
        <span class="inline-label search-label">
          <search-box query="hc.searchQuery" on-select="hc.search()" class="search-box-outer"></search-box>
          <a href="#" class="success button" ng-click="hc.search()"><img
            zf-iconic=""
            icon="magnifying-glass"
            data-direction="top"
            size="small"
            class="iconic-color-secondary"></a>
        </span>
      </form>
      <span class="show-for-small-only">
        <a class="title"><img ng-if="::hc.logoLocation" ng-src="{{::hc.logoLocation}}" /><span ng-if="::(!hc.logoLocation)">{{::hc.appName}}</span></a>
      </span>
    </span>
    <!-- Mobile Search bar -->
    <ul class="left menu-bar primary condense">
      <li ng-show="hc.showFacets" class="show-for-small-only">
        <a zf-toggle="sidebar"><img
          zf-iconic=""
          icon="menu"
          data-direction="top"
          size="small"
          class="iconic-color-secondary"></a></a>
      </li>
      <li class="show-for-medium">
        <a class="title"><img ng-if="::hc.logoLocation" ng-src="{{::hc.logoLocation}}" /><span ng-if="::(!hc.logoLocation)">{{::hc.appName}}</span></a>
      </li>
    </ul>
    <ul class="right menu-bar primary condense">
      <li class="show-for-medium">
        <a ui-sref="login" ng-click="hc.logout()">Logout</a>
      </li>
    </ul>
  </nav>
  <nav class="primary title-bar show-for-small-only">
    <form ng-submit="hc.search()">
      <span class="inline-label search-label">
        <search-box query="hc.searchQuery" class="search-box-outer"></search-box>
        <a href="#" class="success button" ng-click="hc.search()"><img
          zf-iconic=""
          icon="magnifying-glass"
          data-direction="top"
          size="small"
          class="iconic-color-secondary"></a>
      </span>
    </form>
  </nav>
  <!-- Secondary Top Bar -->
  <div class="title-bar">
    <span class="left">
      <div class="row">
        <div class="small-2 columns">{{hc.numFoundFormatted}} results</div>
      </div>
    </span>
    <span class="right">
      <!-- TODO: Not working as of now -->
      <!-- <sort></sort> -->
      <!-- Hence disabled -->
      <span zf-action-sheet="" ng-if="hc.sorting.sortOptions.length > 1">
        <zf-as-button>
          <span class="button secondary sort-button" style="margin: 0;">Sort <img zf-iconic="" icon="arrow_down" data-direction="top" size="small" /></span>
        </zf-as-button>
        <span zf-as-content="" position="bottom"><ul class="block-list">
          <li ng-repeat="sort in ::hc.sorting.sortOptions">
            <label for="{{::(sort.label + sort.order)}}" ng-click="hc.sorting.switchSort(sort);">{{sort.label}}<span ng-if="sort.order">&nbsp;{{sort.order}}</span></label>
          </li>
        </ul></span>
      </span>
    </span>
  </div>


  <!-- Main Content Frame -->
  <div class="grid-block vertical" ng-include="'templates/home_main-content-frame.html'"></div>

</div>