<div layout="column" flex="100">

<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">

    <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">
  <md-button class="md-icon-button">
    <md-icon md-svg-src="<%-get_icon('material/keyboard-arrow-left')%>"></md-icon>
  </md-button>
  <md-button class="md-icon-button">
    <md-icon md-svg-src="<%-get_icon('material/keyboard-arrow-right')%>"></md-icon>
  </md-button>
  <span flex="auto">  </span>
    <md-button ng-href="<%-get_path('manager/accounts/search')%>">
      Expand
    </md-button>
</div>

</div>
