<div ng-controller='filtering' ng-init="init()">

  <div class='filtering-container'>

    <div ng-repeat="filter in filterSrv.list" class="small filter-panel-filter">
      <div>
        <i class="filter-action pointer icon-remove" bs-tooltip="'Remove'" ng-click="remove(filter)"></i>
        <i class="filter-action pointer icon-edit" ng-hide="filter.editing" bs-tooltip="'Edit'" ng-click="filter.editing = true"></i>
      </div>

      <div ng-hide="filter.editing" style="margin-right: 45px;">
        <ul class="unstyled">
          <li ng-if="filter.name" class="dropdown">
            {{filter.name}} :
            <a class="dropdown-toggle" data-toggle="dropdown">
              {{filter.current.text}}
            </a>
              <ul class="dropdown-menu">
                <li ng-repeat="option in filter.options">
                  <a ng-click="filterSrv.filterOptionSelected(filter, option)">{{option.text}}</a>
                </li>
              </ul>
          </li>
        </ul>
      </div>

      <form ng-show="filter.editing">
        <ul class="unstyled">
          <li>
            <strong>name</strong>:<br/>
            <input type='text' ng-model="filter.name">
          </li>
          <li>
            <strong>filter.query</strong>:<br/>
            <input type='text' ng-model="filter.query">
          </li>
          <li>
            <label for="includeAll">Include all:</label>
            <input id="includeAll" type='checkbox' ng-model="filter.includeAll">
          </li>
        </ul>
        <div>
          <input type="submit" value="Apply" ng-click="applyFilter(filter)" class="filter-apply btn btn-success btn-mini" bs-tooltip="'Save and refresh'"/>

          <button ng-click="filter.editing=undefined" class="filter-apply btn btn-mini" bs-tooltip="'Save without refresh'">Save</button>
        </div>
      </form>
    </div>
    <i class="pointer icon-plus-sign add-filter-action" ng-click="add()" bs-tooltip="'Add metric filter / param'" data-placement="right"></i>
  </div>
</div>