<div class="sidebar-list">
  <div ng-show="indexPatternList.length > 1">
    <div class="index-pattern" ng-click="showIndexPatternSelection = !showIndexPatternSelection"
    ng-class="{active: showIndexPatternSelection === true}">
      <div css-truncate title="{{indexPattern.id}}">{{indexPattern.id}}</div>
      <i ng-hide="showIndexPatternSelection" class="fa fa-caret-down"></i>
      <i ng-show="showIndexPatternSelection" class="fa fa-caret-up"></i>
    </div>
    <div ng-show="showIndexPatternSelection">
      <ul class="list-unstyled sidebar-item index-pattern-selection">
        <li css-truncate class="sidebar-item-title" title="{{id}}" ng-repeat="id in indexPatternList | orderBy" ng-show="indexPattern.id != id" ng-click="setIndexPattern(id)">{{id}}</li>
      </ul>
    </div>
  </div>
  <div ng-hide="indexPatternList.length > 1">
    <div class="index-pattern">
      <div css-truncate>{{ indexPattern.id }}</div>
    </div>
  </div>

  <div class="sidebar-list-header">
    <h5>Selected Fields</h5>
  </div>
  <ul class="list-unstyled discover-selected-fields" >
    <discover-field ng-repeat="field in fields.raw|filter:{display:true}">
    </discover-field>
  </ul>

  <div class="sidebar-list-header sidebar-item">
    <h5>Available Fields
      <i
        ng-class="{ 'fa-chevron-right': !showFields, 'fa-chevron-down': showFields }"
        ng-click="showFields = !showFields"
        aria-hidden="true"
        class="fa visible-xs visible-sm pull-right field-collapse-toggle" ></i>
      <button
        ng-class="{ 'btn-default': !filter.active, 'btn-success': filter.active, 'hidden-xs': !showFields, 'hidden-sm': !showFields }"
        class="btn btn-xs btn-default pull-right discover-field-filter-toggle"
        ng-click="showFilter = !showFilter"
        aria-label="Field Settings"
        aria-haspopup="true"
        aria-expanded="{{showFilter}}">
        <i aria-hidden="true" class="fa fa-gear"></i>
      </button>
    </h5>
  </div>

  <div class="sidebar-item" ng-show="showFilter">
    <form role="form" class="discover-field-details">
      <div class="form-group">
        <label>
          Analyzed
        </label>
        <select
          ng-options="opt.value as opt.label for opt in filter.boolOpts"
          ng-model="filter.vals.analyzed"
          class="form-control">
        </select>
      </div>
      <div class="form-group">
        <label>
          Indexed
        </label>
        <select
          ng-options="opt.value as opt.label for opt in filter.boolOpts"
          ng-model="filter.vals.indexed"
          class="form-control">
        </select>
      </div>
      <div class="form-group">
        <label>
          Type
        </label>
        <select
          ng-options="field as field for field in fieldTypes"
          ng-model="filter.vals.type"
          class="form-control">
        </select>
      </div>
      <div class="form-group">
        <label>
          Field name
        </label>
        <input type="text" class="form-control" ng-model="filter.vals.name">
      </div>
      <div class="form-group">
        <label>
          <input type="checkbox" ng-model="filter.vals.missing">
          Hide Missing Fields
        </label>
      </div>
    </form>
    <div
      ng-click="filter.reset()"
      ng-disabled="!filter.active"
      class="sidebar-item-button danger ng-scope">
      Reset Filters
    </div>
  </div>

  <ul
    ng-show="(popularFields | filter:filter.isFieldFiltered).length > 0"
    ng-class="{ 'hidden-sm': !showFields, 'hidden-xs': !showFields }"
    class="list-unstyled sidebar-well discover-popular-fields">
    <li class="sidebar-item sidebar-list-header">
      <h6>Popular</h6>
    </li>
    <discover-field
      ng-repeat="field in popularFields | filter:filter.isFieldFiltered">
    </discover-field>
  </ul>

  <ul
    ng-class="{ 'hidden-sm': !showFields, 'hidden-xs': !showFields  }"
    class="list-unstyled discover-unpopular-fields">
    <discover-field
      ng-repeat="field in unpopularFields | filter:filter.isFieldFiltered">
    </discover-field>
  </ul>

</div>
