<div class="kuiLocalNav">
  <div class="kuiLocalNavRow">
    <div class="kuiLocalNavRow__section">
      <div class="kuiLocalTitle" role="heading" aria-level="1">
        Surrounding Documents in {{ contextApp.state.queryParameters.indexPatternId }}
      </div>
    </div>
  </div>
  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
    <div class="kuiLocalTabs">
      <div class="kuiLocalTab kuiLocalTab-isSelected" >
        {{ contextApp.state.queryParameters.anchorType }}#{{ contextApp.state.queryParameters.anchorId }}
      </div>
    </div>
  </div>
</div>

<filter-bar index-patterns="[contextApp.indexPattern]"></filter-bar>

<!-- Error feedback -->
<div
  class="kuiViewContent kuiViewContentItem"
  ng-if="contextApp.state.loadingStatus.anchor.status === contextApp.constants.LOADING_STATUS.FAILED"
>
  <div class="kuiInfoPanel kuiInfoPanel--error kuiVerticalRhythm">
    <div class="kuiInfoPanelHeader">
      <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--error fa-warning"></span>
      <span class="kuiInfoPanelHeader__title">
        Failed to load the anchor document
      </span>
    </div>

    <div class="kuiInfoPanelBody">
      <div
        class="kuiInfoPanelBody__message"
        ng-if="contextApp.state.loadingStatus.anchor.reason === contextApp.constants.FAILURE_REASONS.INVALID_TIEBREAKER"
      >
        No searchable tiebreaker field could be found in the index pattern
        {{ contextApp.state.queryParameters.indexPatternId}}.

        Please change the advanced setting
        <code>context:tieBreakerFields</code> to include a valid field for this
        index pattern.
      </div>
      <div
        class="kuiInfoPanelBody__message"
        ng-if="contextApp.state.loadingStatus.anchor.reason === contextApp.constants.FAILURE_REASONS.UNKNOWN"
      >
        Please reload or visit
        <a ng-href="{{ contextApp.state.navigation.discover.url }}">Discover</a>
        to select a valid anchor document.
      </div>
    </div>
  </div>
</div>

<main
  class="kuiViewContent kuiViewContentItem"
  ng-if="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.FAILED"
>
  <!-- Controls -->
  <div class="kuiBar kuiVerticalRhythm">
    <div class="kuiBarSection">
      <context-loading-button
        data-test-subj="predecessorLoadMoreButton"
        is-disabled="![
          contextApp.constants.LOADING_STATUS.LOADED,
          contextApp.constants.LOADING_STATUS.FAILED,
        ].includes(contextApp.state.loadingStatus.predecessors.status)"
        icon="'fa-chevron-up'"
        ng-click="contextApp.actions.fetchMorePredecessorRows()"
      >
        Load {{ contextApp.state.queryParameters.defaultStepSize }} more
      </context-loading-button>
      <context-size-picker
        count="contextApp.state.queryParameters.predecessorCount"
        data-test-subj="predecessorCountPicker"
        is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
        on-change-count="contextApp.actions.fetchGivenPredecessorRows"
      ></context-size-picker>
      <span>newer documents</span>
      <span
        class="kuiStatusText kuiStatusText--warning"
        ng-if="(contextApp.state.loadingStatus.predecessors.status === contextApp.constants.LOADING_STATUS.LOADED)
          && (contextApp.state.queryParameters.predecessorCount > contextApp.state.rows.predecessors.length)"
      >
        <span class="kuiStatusText__icon kuiIcon fa-bolt"></span>
        <span ng-bind-template="Only {{ contextApp.state.rows.predecessors.length }} documents newer than the anchor could be found."></span>
      </span>
    </div>

    <div class="kuiBarSection">
    </div>
  </div>

  <!-- Loading feedback -->
  <div
    ng-if="[
      contextApp.constants.LOADING_STATUS.UNINITIALIZED,
      contextApp.constants.LOADING_STATUS.LOADING,
    ].includes(contextApp.state.loadingStatus.anchor.status)"
    class="kuiPanel kuiPanel--centered kuiVerticalRhythm"
  >
    <div class="kuiTableInfo">
      Loading&hellip;
    </div>
  </div>

  <!-- Table -->
  <div
    ng-if="contextApp.state.loadingStatus.anchor.status === contextApp.constants.LOADING_STATUS.LOADED"
    class="kuiPanel kuiVerticalRhythm"
  >
    <div class="discover-table" fixed-scroll>
      <doc-table
        filter="contextApp.actions.addFilter"
        hits="contextApp.state.rows.all"
        index-pattern="contextApp.indexPattern"
        sorting="contextApp.state.queryParameters.sort"
        columns="contextApp.state.queryParameters.columns"
        infinite-scroll="true"
        minimum-visible-rows="contextApp.state.rows.all.length"
      ></doc-table>
    </div>
  </div>

  <!-- Controls -->
  <div class="kuiBar kuiVerticalRhythm">
    <div class="kuiBarSection">
      <context-loading-button
        data-test-subj="successorLoadMoreButton"
        is-disabled="![
          contextApp.constants.LOADING_STATUS.LOADED,
          contextApp.constants.LOADING_STATUS.FAILED,
        ].includes(contextApp.state.loadingStatus.successors.status)"
        icon="'fa-chevron-down'"
        ng-click="contextApp.actions.fetchMoreSuccessorRows()"
      >
        Load {{ contextApp.state.queryParameters.defaultStepSize }} more
      </context-loading-button>
      <context-size-picker
        count="contextApp.state.queryParameters.successorCount"
        data-test-subj="successorCountPicker"
        is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
        on-change-count="contextApp.actions.fetchGivenSuccessorRows"
      ></context-size-picker>
      <div>older documents</div>
      <span
        class="kuiStatusText kuiStatusText--warning"
        ng-if="(contextApp.state.loadingStatus.successors.status === contextApp.constants.LOADING_STATUS.LOADED)
          && (contextApp.state.queryParameters.successorCount > contextApp.state.rows.successors.length)"
      >
        <span class="kuiStatusText__icon kuiIcon fa-bolt"></span>
        <span ng-bind-template="Only {{ contextApp.state.rows.successors.length }} documents older than the anchor could be found."></span>
      </span>
    </div>

    <div class="kuiBarSection">
    </div>
  </div>
</main>
