<div class="timelion app-container" ng-controller="timelion">
  <!-- Local nav. -->
  <kbn-top-nav name="timelion" config="topNavMenu">
    <!-- Transcluded elements. -->
    <div data-transclude-slots>
      <div data-transclude-slot="topLeftCorner">
        <span class="kuiLocalTitle" ng-show="opts.savedSheet.id">
          {{opts.savedSheet.lastSavedTitle}}
          &nbsp;
          <span class="fa fa-bolt" ng-click="showStats = !showStats"></span>
          &nbsp;
          <span class="timelion-stats" ng-show="showStats">
            Query Time {{stats.queryTime - stats.invokeTime}}ms /
            Processing Time {{stats.sheetTime - stats.queryTime}}ms
          </span>
        </span>
      </div>

      <!-- Search. -->
      <form
        data-transclude-slot="bottomRow"
        class="fullWidth"
        role="form"
        ng-submit="search()"
      >
        <div class="kuiLocalSearch timelionLocalSearch">
          <input
            input-focus
            ng-model="state.sheet[state.selected]"
            timelion-expression="{{state.sheet[state.selected]}}"
            placeholder="Expression..."
            aria-label="Expression input"
            type="text"
            class="kuiLocalSearchInput timelion-expression"
          >

          <timelion-interval model="state.interval"></timelion-interval>

          <button
            type="submit"
            aria-label="Search"
            class="kuiLocalSearchButton"
          >
            <span class="fa fa-play"></span>
          </button>
        </div>
      </form>
    </div>
  </kbn-top-nav>

  <div class="timelion-container">
    <div class="timelion-container-sheet">
      <div class="timelion-container-sheet-margin">
        <timelion-fullscreen
          ng-show="transient.fullscreen"
          transient="transient"
          state="state"
          series="sheet[state.selected]"
          expression="state.sheet[state.selected]"
          on-search="search"
        ></timelion-fullscreen>

        <timelion-cells
          ng-show="!transient.fullscreen"
          transient="transient"
          state="state"
          sheet="sheet"
          on-search="search"
          on-select="setActiveCell"
        ></timelion-cells>
        </div>
      </div>
    </div>
  </div>
</div>
