<discover-app class="app-container">
  <!-- Local nav. -->
  <kbn-top-nav name="discover" config="topNavMenu">
    <!-- Transcluded elements. -->
    <div data-transclude-slots>
      <!-- Breadcrumbs. -->
      <div data-transclude-slot="topLeftCorner" class="kuiLocalBreadcrumbs">
        <h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb">
          <span ng-show="opts.savedSearch.id" class="kuiLocalBreadcrumb__emphasis">
            <span data-test-subj="discoverCurrentQuery" ng-bind="opts.savedSearch.lastSavedTitle"></span>
            <i id="reload_saved_search" tabindex="0" aria-label="Reload Saved Search" tooltip="Reload Saved Search" ng-click="resetQuery();" class="fa fa-undo small"></i>&nbsp;
          </span>
          <span data-test-subj="discoverQueryHits" class="kuiLocalBreadcrumb__emphasis">{{(hits || 0) | number:0}}</span>
          <ng-pluralize count="hits" when="{'1':'hit', 'other':'hits'}"></ng-pluralize>
        </h1>
      </div>

      <!-- Search. -->
      <form
        data-transclude-slot="bottomRow"
        class="fullWidth"
        role="form"
        name="discoverSearch"
        ng-submit="fetch()"
      >
        <div class="typeahead" kbn-typeahead="discover" on-select="fetch()">
          <div class="kuiLocalSearch">
            <div class="kuiLocalSearchAssistedInput">
              <input
                parse-query
                input-focus
                kbn-typeahead-input
                ng-model="state.query"
                placeholder="Search... (e.g. status:200 AND extension:PHP)"
                aria-label="Search input"
                type="text"
                class="kuiLocalSearchInput kuiLocalSearchInput--lucene"
                ng-class="{'kuiLocalSearchInput-isInvalid': discoverSearch.$invalid}"
              >
              <div class="kuiLocalSearchAssistedInput__assistance">
                <p class="kuiText">
                  <a
                    class="kuiLink"
                    ng-href="{{queryDocLinks.luceneQuerySyntax}}"
                    target="_blank"
                  >
                    Uses lucene query syntax
                  </a>
                </p>
              </div>
            </div>
            <button
              type="submit"
              aria-label="Search"
              class="kuiLocalSearchButton"
              ng-disabled="discoverSearch.$invalid"
            >
              <span class="kuiIcon fa-search" aria-hidden="true"></span>
            </button>
          </div>
          <kbn-typeahead-items></kbn-typeahead-items>
        </div>
      </form>
    </div>
  </kbn-top-nav>

  <div class="container-fluid" role="main">
    <div class="row">
      <filter-bar
        state="state"
        index-patterns="[indexPattern]"
      ></filter-bar>
    </div>
    <div class="row">
      <div class="col-md-2 sidebar-container collapsible-sidebar">
        <disc-field-chooser
          columns="state.columns"
          hits="rows"
          field-counts="fieldCounts"
          index-pattern="searchSource.get('index')"
          index-pattern-list="opts.indexPatternList"
          state="state"
          on-add-field="addColumn"
          on-add-filter="filterQuery"
          on-remove-field="removeColumn"
        >
        </disc-field-chooser>
      </div>

      <div class="discover-wrapper col-md-10">
        <div class="discover-content">
          <discover-no-results ng-show="resultState === 'none'"></discover-no-results>

          <!-- loading -->
          <div ng-show="resultState === 'loading'">
            <div class="discover-overlay">
              <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">
              <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 form-inline">
                    <select
                      class="form-control"
                      ng-model="state.interval"
                      ng-options="interval.val as interval.display for interval in intervalOptions | filter: intervalEnabled"
                      ng-blur="toggleInterval()"
                      data-test-subj="discoverIntervalSelect"
                      >
                    </select>
                    <span ng-show="bucketInterval.scaled">
                      <kbn-info
                        placement="right"
                        class="kuiIcon--info"
                        info="This interval creates {{ bucketInterval.scale > 1 ? 'buckets that are too large' : 'too many buckets' }} to show in the selected time range, so it has been scaled to {{ bucketInterval.description }}">
                      </kbn-info>
                      Scaled to {{ bucketInterval.description }}
                    </span>
                  </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>
              <doc-table
                hits="rows"
                index-pattern="indexPattern"
                sorting="state.sort"
                columns="state.columns"
                infinite-scroll="true"
                filter="filterQuery"
                filters="state.filters"
                data-shared-item
                data-title="{{opts.savedSearch.lastSavedTitle}}"
                data-description="{{opts.savedSearch.description}}"
                render-counter
                on-add-column="addColumn"
                on-change-sort-order="setSortOrder"
                on-move-column="moveColumn"
                on-remove-column="removeColumn"
              ></doc-table>

              <div ng-if="rows.length == opts.sampleSize" class="discover-table-footer">
                These are the first {{opts.sampleSize}} documents matching
                your search, refine your search to see others.
                <a ng-click="toTop()">Back to top.</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</discover-app>
