<div class="container-fluid" ng-controller="TableSearchController">
  <ol class="breadcrumb">
    <li><a href="#/">Top</a></li>
    <li><a href="#/tables/">Tables</a></li>
    <li><a href="#/tables/{{table.name}}">{{table.name}}</a></li>
    <li class="active">Search</li>
  </ol>

  <div class="sidebar">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h2 class="panel-title">Save condition</h2>
      </div>
      <div class="panel-body">
        <div class="input-group">
          <button ng-click="search()" class="btn btn-default">
            <span title="Keep query as URL (Bookmark new URL)"
                  class="glyphicon glyphicon-bookmark"></span>
          </button>
          <button ng-click="clear()" class="btn btn-default">
            <span title="Clear"
                  class="glyphicon glyphicon-trash"></span>
          </button>
        </div>
      </div>

      <div class="panel-heading">
        <h2 class="panel-title">Auto refresh</h2>
      </div>
      <div class="panel-body">
        <div class="input-group">
          <!--span class="input-group-addon">
              <span class="glyphicon glyphicon-time"></span>
          </span-->
          <input type="number"
                 class="form-control"
                 ng-model="autoRefreshIntervalInSeconds"
                 ng-change="updateAutoRefresh()">
          <span class="input-group-addon">sec</span>
        </div>
      </div>

      <div class="panel-heading">
        <h2 class="panel-title">Columns</h2>
      </div>
      <div class="panel-body">
        <div class="table-columns">
          <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>
                  <input type="checkbox"
                         ng-model="toggleAllColumnsChecked"
                         ng-change="toggleAllColumns()">
                  <span title="Show"
                        class="glyphicon glyphicon-eye-open"></span>
                </th>
                <th>
                  <span title="Drilldown"
                        class="glyphicon glyphicon-filter"></span>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="column in table.allColumns track by $index">
                <td>{{column.name}}</td>
                <td><input type="checkbox"
                           ng-model="column.output"
                           ng-change="incrementalSearch()"></td>
                <td><input type="checkbox"
                           ng-model="column.drilldown"
                           ng-change="incrementalSearch()"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="panel panel-default"
         ng-repeat="drilldown in response.drilldowns track by $index">
      <div class="panel-heading">
        <h2 class="panel-title">
          {{drilldown.key}}({{drilldown.nTotalRecords}})
        </h2>
      </div>
      <div class="panel-body">
        <ul class="list-group">
          <li class="list-group-item"
              ng-repeat="record in drilldown.records track by $index">
            <a ng-click="selectDrilldown(drilldown.key, record._key)">
              {{record._key}}
              <span class="badge">{{record._nsubrecs}}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="main-content">
    <div class="alert alert-warning" ng-show="message.length &gt; 0">
      <p>{{message}}</p>
    </div>
    <form class="search-form" role="search">
      <div class="form-group">
        <div class="input-group">
          <span ng-repeat="indexedColumn in table.indexedColumns track by $index">
            <label>
              <input type="checkbox"
                     ng-model="indexedColumn.inUse"
                     ng-change="incrementalSearch()">
              {{indexedColumn.name}}
            </label>
          </span>
        </div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">Query</span>
          <input type="search"
                 class="form-control"
                 ng-model="parameters.query"
                 ng-change="incrementalSearch()">
          <span class="input-group-btn">
            <button ng-click="clearQuery()" class="btn btn-default">
              <span title="Clear query"
                    class="glyphicon glyphicon-erase"></span>
            </button>
          </span>
        </div>
      </div>
      <div class="form-group time-query"
           ng-repeat="timeColumn in table.timeColumns track by $index">
        <div class="input-group">
          {{timeColumn.name}}:
          <slider ng-model="timeColumn.range"
                  ng-change="timeColumn.onRangeChange()"
                  min="0"
                  step="1"
                  max="100"
                  formater="timeColumn.formater"
                  range="true"
                  tooltip="always"
                  tooltipsplit="true"></slider>
          <select ng-options="unit.label for unit in orderedTimeColumnUnits"
                  ng-model="timeColumn.unit"
                  ng-change="timeColumn.onUnitChange()"></select>
        </div>
      </div>
    </form>
    <p class="statistics">
      <span id="n-total-records">{{response.nTotalRecords}} records</span>
      <span id="elapsed-time">
        ({{response.elapsedTimeInMilliseconds | number : 3}}ms)
      </span>
    </p>

    <pagination total-items="response.nTotalRecords"
                items-per-page="nRecordsInPage"
                max-size="maxNPages"
                rotate="false"
                ng-model="currentPage"
                ng-change="incrementalSearch()">
    </pagination>

    <ul class="nav nav-tabs" role="tablist">
      <li role="tab" data-toggle="tab" class="active">
        <a ng-click="style = 'table'">Table</a>
      </li>
      <li role="tab" data-toggle="tab">
        <a ng-click="style = 'list'">List</a>
      </li>
      <li role="tab" data-toggle="tab">
        <a ng-click="style = 'raw'">Raw</a>
      </li>
    </ul>

    <div class="table-search-result" ng-show="style == 'table'">
      <table>
        <thead>
          <tr>
            <th ng-repeat="column in response.columns track by $index">
              {{column.name}}
              <div>
                <button type="button"
                        class="btn btn-default"
                        ng-click="toggleSort(column)">
                  <span class="glyphicon {{column.iconClass}}"></span>
                </button>
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="record in response.records track by $index">
            <td ng-repeat="element in record track by $index">
              {{element.formattedValue}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="list-search-result" ng-show="style == 'list'">
      <div class="row" ng-repeat="record in response.records track by $index">
        <div class="col-md12">
          <div class="table-responsive">
            <table>
              <tbody>
                <tr ng-repeat="item in record track by $index">
                  <th>{{item.column.name}}</th>
                  <td>{{item.formattedValue}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div ng-show="style == 'raw'">
      <pre><code id="groonga-command-line">{{commandLine}}</code></pre>
      <pre><code id="groonga-response">{{response.rawData | json}}</code></pre>
    </div>

    <pagination total-items="response.nTotalRecords"
                items-per-page="nRecordsInPage"
                max-size="maxNPages"
                rotate="false"
                ng-model="currentPage"
                ng-change="incrementalSearch()">
    </pagination>
  </div>
</div>
