<div ng-controller='query' ng-init="init()" class="query-panel">
  <div ng-repeat="id in (unPinnedQueries = (dashboard.current.services.query.ids|pinnedQuery:false))" ng-class="{'short-query': unPinnedQueries.length>1}">
    <form class="form-search" style="position:relative;margin:5px 0;" ng-submit="refresh()">
      <span class="begin-query">
        <i class="pointer" ng-class="queryIcon(dashboard.current.services.query.list[id].type)" ng-show="dashboard.current.services.query.list[id].enable" data-unique="1" bs-popover="'app/panels/query/meta.html'" data-placement="bottomLeft" ng-style="{color: dashboard.current.services.query.list[id].color}"></i>
        <i class="pointer icon-circle-blank" ng-click="dashboard.current.services.query.list[id].enable=true;dashboard.refresh();" ng-hide="dashboard.current.services.query.list[id].enable" bs-tooltip="'Activate query'" ng-style="{color: dashboard.current.services.query.list[id].color}"></i>
        <i class="icon-remove-sign pointer remove-query" ng-show="dashboard.current.services.query.ids.length > 1" ng-click="querySrv.remove(id);refresh()"></i>
      </span>
      <span>
        <input class="search-query panel-query" ng-disabled="!dashboard.current.services.query.list[id].enable" ng-class="{ 'input-block-level': unPinnedQueries.length==1, 'last-query': $last, 'has-remove': dashboard.current.services.query.ids.length > 1 }" bs-typeahead="panel.history" data-min-length=0 data-items=100 type="text" ng-model="dashboard.current.services.query.list[id].query" />
      </span>
      <span class="end-query">
        <i class="icon-search pointer" ng-click="refresh()" ng-show="$last"></i>
        <i class="icon-plus pointer" ng-click="querySrv.set({})" ng-show="$last"></i>
      </span>
    </form>
  </div>
  <div style="display:inline-block" ng-repeat="id in dashboard.current.services.query.ids|pinnedQuery:true">
    <span class="pointer badge pins" ng-show="$first" ng-click="panel.pinned = !panel.pinned">Pinned <i ng-class="{'icon-caret-right':panel.pinned,'icon-caret-left':!panel.pinned}"></i></span>
    <span ng-show="panel.pinned" class="badge pinned">
      <i class="icon-circle pointer" ng-show="dashboard.current.services.query.list[id].enable" ng-style="{color: dashboard.current.services.query.list[id].color}" data-unique="1" bs-popover="'app/panels/query/meta.html'" data-placement="bottomLeft"></i>
      <i class="pointer icon-circle-blank" bs-tooltip="'Activate query'" ng-click="dashboard.current.services.query.list[id].enable=true;dashboard.refresh();" ng-hide="dashboard.current.services.query.list[id].enable" ng-style="{color: dashboard.current.services.query.list[id].color}"></i>
      <span bs-tooltip="dashboard.current.services.query.list[id].query | limitTo:45"> {{dashboard.current.services.query.list[id].alias || dashboard.current.services.query.list[id].query}}</span>
    </span>
  </div>
  <span style="display:inline-block" ng-show="unPinnedQueries.length == 0">
    <i class="icon-search pointer" ng-click="refresh()"></i>
    <i class="icon-plus pointer" ng-click="querySrv.set({})"></i>
  </span>
</div>