<div style="height:100%;" layout="column">

  <div layout="row" class="search-list" layout-margin layout-align="start center">
    <input flex="auto" on-enter="search.query()" ng-model="search.text" placeholder="Search" aria-label="search page">
    <md-button class="md-icon-button" ng-click="search.query()">
      <md-icon md-svg-src="<%-get_icon('material/search')%>"></md-icon>
    </md-button>
    <md-button ng-show="search.active" class="md-icon-button" ng-click="search.clear()">
      <md-icon md-svg-src="<%-get_icon('material/close')%>"></md-icon>
    </md-button>
  </div>
  <md-progress-linear md-mode="{{search.loading?'indeterminate':'determinate'}}"></md-progress-linear>

  <md-content class="accounts">
    {{$ctrl.test}}
    <md-list-item ng-repeat="account in accounts.list" class="account md-long-text md-2-line" md-no-ink ng-click="change(account)">
      <%-template('ui/account-avatar')%>
        <div class="md-list-item-text">
          <h3>{{account.name}}
        </h3>
          <p>{{account.email}}</p>
        </div>
    </md-list-item>

  </md-content>

  <div class="nav" align="end" flex="noshrink" layout="row" layout-align="start center">
    <span>Total: {{accounts.count||'...'}}</span>
    <span flex="auto">  </span>
    <md-button ng-href="<%-get_path('manager/accounts/search')%>">
      Expand
    </md-button>
  </div>

</div>
