<kbn-settings-app section="objects">
  <kbn-settings-objects class="container">
    <div class="header">
      <h2 class="title">Edit Saved Objects</h2>
      <button class="btn btn-default controls" ng-click="exportAll()"><i aria-hidden="true" class="fa fa-download"></i> Export Everything</button>
      <button file-upload="importAll(fileContents)" class="btn btn-default controls" ng-click><i aria-hidden="true" class="fa fa-upload"></i> Import</button>
    </div>
    <p>
      From here you can delete saved objects, such as saved searches. You can also edit the raw data of saved objects. Typically objects are only modified via their associated application, which is probably what you should use instead of this screen. Each tab is limited to 100 results. You can use the filter to find objects not in the default list.
    </p>
    <form role="form">
      <input aria-label="Filter" ng-model="advancedFilter" class="form-control span12" type="text" placeholder="Filter"/>
    </form>

    <ul class="nav nav-tabs">
      <li class="kbn-settings-tab" ng-class="{ active: state.tab === service.title }" ng-repeat="service in services">
        <a title="{{ service.title }}" ng-click="changeTab(service)">{{ service.title }}
          <small>
          ({{service.data.length}}<span ng-show="service.total > service.data.length"> of {{service.total}}</span>)
          </small>
        </a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="action-bar">
        <label>
          <input type="checkbox" ng-checked="currentTab.data.length > 0 && selectedItems.length == currentTab.data.length" ng-click="toggleAll()" />
          Select All
        </label>
        <a ng-disabled="selectedItems.length == 0"
          confirm-click="bulkDelete()"
          confirmation="Are you sure want to delete the selected {{currentTab.title}}? This action is irreversible!"
          class="btn btn-xs btn-danger" aria-label="Delete"><i aria-hidden="true" class="fa fa-trash"></i> Delete</a>
        <a ng-disabled="selectedItems.length == 0"
          ng-click="bulkExport()"
          class="btn btn-xs btn-default" aria-label="Export"><i aria-hidden="true" class="fa fa-download"></i> Export</a>
      </div>
      <div ng-repeat="service in services" ng-class="{ active: state.tab === service.title }" class="tab-pane">
        <ul class="list-unstyled">
          <li class="item" ng-repeat="item in service.data | orderBy:'title'">
            <div class="actions pull-right">
              <button
                ng-click="edit(service, item)"
                class="btn btn-default"
                aria-label="Edit">
                <span class="sr-only">Edit</span>
                <i aria-hidden="true" class="fa fa-pencil"></i>
              </button>

              <button
                ng-click="open(item)"
                class="btn btn-info"
                aria-label="Hide">
                <span class="sr-only">Hide</span>
                <i aria-hidden="true" class="fa fa-eye"></i>
              </button>
            </div>

            <div class="pull-left">
              <input
                ng-click="toggleItem(item)"
                ng-checked="selectedItems.indexOf(item) >= 0"
                type="checkbox" >
            </div>

            <div class="item-title">
              <a ng-click="edit(service, item)">{{ item.title }}</a>
            </div>
          </li>
          <li ng-if="!service.data.length" class="empty">No "{{service.title}}" found.</li>
        </ul>
      </div>
    </div>

  </kbn-settings-objects>
</kbn-settings-app>
