<section>

  <div bst-global-notification></div>

  <div class="row nutupane-bar">
    <h2 class="col-sm-2">
      <span data-block="header">
        REPLACE ME
      </span>
    </h2>
  </div>

  <div class="row nutupane-bar">

    <div class="row">
      <div class="col-sm-12">
        <div data-block="search-filter"></div>
      </div>
    </div>

    <div class="col-sm-3 nutupane-info">
      <form role="form" class="search-pf has-button">
        <div class="form-group has-clear">
          <div class="search-pf-input-group">
            <label for="table-search" class="sr-only" translate>Search</label>

            <input id="table-search"
                   type="search"
                   class="form-control"
                   placeholder="{{ 'Search...' | translate }}"
                   bst-on-enter="table.search(table.searchTerm)"
                   ng-model="table.searchTerm"
                   ng-trim="false"
                   uib-typeahead="item.label for item in table.autocomplete($viewValue)"
                   typeahead-template-url="components/views/autocomplete-scoped-search.html"/>

            <button type="button" class="clear" aria-hidden="true" ng-show="table.searchTerm" ng-click='table.clearSearch()'>
              <span class="pficon pficon-close"></span>
            </button>
          </div>
        </div>

        <div class="form-group">
          <button class="btn btn-default" type="button" ng-click="table.search(table.searchTerm)" >
            <span class="fa fa-search"></span>
          </button>
        </div>
        <div uib-dropdown class="form-group">
          <button uib-dropdown-toggle class="btn btn-default">
            <i class="fa fa-caret-down"></i>
          </button>
          <ul bst-bookmark uib-dropdown-menu controller-name="controllerName" query="table.searchTerm" class="pull-right"></ul>
        </div>
      </form>
    </div>

    <div class="col-sm-3 nutupane-info">
      <span translate>Showing {{ table.rows.length }} of {{ table.resource.subtotal }} ({{ table.resource.total }} Total)</span>
    </div>

    <div class="fr">
      <div class="nutupane-info fl" ng-if="table.rowSelect">
        <span translate>{{ table.numSelected }} Selected</span>
      </div>

      <div class="fl">
        <div data-block="actions"></div>
      </div>
    </div>
  </div>

  <div class="row nutupane" bst-table="table" nutupane-table ng-class="{'table-reduced': $root.$state.current.collapsed}">
    <div class="loading-mask" ng-show="table.refreshing" ng-class="{ 'loading-mask-collapsed': $root.$state.current.collapsed }">
      <i class="fa fa-spinner fa-spin"></i>
      <span ng-hide="$root.$state.current.collapsed">{{ "Loading..." | translate }}</span>
    </div>

    <p bst-alert="info" ng-show="table.rows.length === 0 && !table.working && !table.searchTerm && !table.searchCompleted">
      <span data-block="no-rows-message"></span>
    </p>
    <p bst-alert="info" ng-show="table.rows.length === 0 && !table.working && (table.searchTerm || table.searchCompleted)">
      <span data-block="no-search-results-message"></span>
    </p>

    <div ng-show="table.rows.length > 0" bst-container-scroll data="table.rows">
      <div infinite-scroll="table.nextPage()" infinite-scroll-container="'.container-scroll-wrapper'" infinite-scroll-listen-for-event="nutupane:loaded"
           ui-view="table"></div>
    </div>
  </div>

  <span class="action-panel" ui-view="action-panel"></span>

</section>