<div ng-controller="discoverW" class="app-container">


  <div class="container-fluid" role="main">
    <div class="row">
      <div class="discover-wrapper col-md-10" style="width: 100% !important;">
        <div class="discover-content">

          <div ng-show="resultState === 'none'">
            <div class="discover-overlay" style="position: relative !important; opacity: 1 !important;">
              <h2 aria-hidden="true"><i aria-hidden="true" class="fa fa-meh-o"></i></h2>
              <h4>No results found</h4>
            </div>
          </div>

          <!-- loading -->
          <div ng-show="resultState === 'loading'">
            <div class="discover-overlay" style="position: relative !important; opacity: 1 !important;">
              <h2>Searching</h2>
              <div ng-show="fetchStatus">{{fetchStatus.complete}}/{{fetchStatus.total}}</div>
            </div>
          </div>

          <!-- result -->
          <div class="results" ng-show="resultState === 'ready'">
            <div class="discover-timechart" ng-if="opts.timefield" ng-show="false">
              <header>
                <center class="small">
                  <span tooltip="To change the time, click the clock icon in the navigation bar">{{timeRange.from | moment}} - {{timeRange.to | moment}}</span>                  &mdash;

                  <span class="results-interval" ng-hide="showInterval">
                    <a
                      ng-click="toggleInterval()">
                      {{ intervalName }}
                    </a>
                  </span>

                  <span ng-show="showInterval" class="results-interval form-inline">
                    <select
                      class="form-control"
                      ng-model="state.interval"
                      ng-options="interval.val as interval.display for interval in intervalOptions | filter: intervalEnabled"
                      >
                    </select>
                  </span>
                </center>

              </header>

              <visualize ng-if="vis && rows.length != 0" vis="vis" ui-state="uiState" es-resp="mergedEsResp" search-source="searchSource">
              </visualize>
            </div>

            <div class="discover-table" fixed-scroll ng-style="{ 'height': tableHeight }">
              <doc-table hits="rows" index-pattern="indexPattern" sorting="state.sort" columns="state.columns" infinite-scroll="true"
                filter="filterQuery" on-add-column="addColumn" on-remove-column="removeColumn">
              </doc-table>

              <div ng-if="rows.length == opts.sampleSize" class="discover-table-footer">
                <center>
                  These are the first {{opts.sampleSize}} documents matching the search.
                </center>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
