<visualize-app class="app-container vis-editor vis-type-{{ vis.type.name }}">
  <!-- Local nav. -->
  <kbn-top-nav name="visualize" config="topNavMenu">
    <!-- Transcluded elements. -->
    <div data-transclude-slots>
      <!-- Breadcrumbs. -->
      <bread-crumbs
        data-transclude-slot="topLeftCorner"
        page-title="getVisualizationTitle()"
        use-links="true"
        omit-current-page="true"
        omit-pages="['edit']"
      ></bread-crumbs>

      <!-- Search. -->
      <div
        data-transclude-slot="bottomRow"
        ng-show="chrome.getVisible()"
        class="fullWidth"
      >
        <div ng-if="vis.type.requiresSearch && state.linked">
          Linked to Saved Search &ldquo;{{ savedVis.savedSearch.title }}&rdquo;
          &nbsp;
          <a
            href=""
            ng-dblclick="unlink()"
            tooltip="Double click to unlink from Saved Search"
          >
            <span aria-hidden="true" class="kuiIcon fa-chain-broken"></span>
          </a>
        </div>

        <div ng-if="vis.type.requiresSearch && vis.type.options.showQueryBar" class="fullWidth">
          <query-bar
            query="state.query"
            app-name="'visualize'"
            on-submit="updateQueryAndFetch($query)"
            disable-auto-focus="true"
          >
          </query-bar>
        </div>
      </div>
    </div>
  </kbn-top-nav>

  <!-- Filters. -->
  <filter-bar
    ng-if="vis.type.options.showFilterBar && state.query.language === 'lucene'"
    state="state"
    index-patterns="[indexPattern]"
  ></filter-bar>

  <visualize
    saved-obj="savedVis"
    ui-state="uiState"
    app-state="state"
    editor-mode="true"
    data-shared-item
    render-counter
    data-title="{{savedVis.lastSavedTitle}}"
    data-description="{{savedVis.description}}"
    show-spy-panel="chrome.getVisible()">
  </visualize>

</visualize-app>
