<div class="clearfix pt-10">
  <form class="form form-horizontal" on:submit="noOp(scope.event)">
    {{#if(filter.pinned)}}
    <div class="ml-1 col-3 col-sm-12">
      <label class="form-label">{{filter.alias}} {{filter.operatorField.alias}}</label>
    </div>
    <div class="ml-1 col-9 col-sm-12">
      {{>filter.valueComponent}}
    </div>

    {{else}}
    <button type="button" class="btn block float-left tooltip tooltip-right ml-1 mt-1" data-tooltip="Remove Filter" on:click="dispatchEvent('remove')">
      <i class="fa fa-trash"></i> {{filter.alias}}</button>
    <sp-select-field class="float-left ml-1 mt-1" properties:from="filter.operatorField" value:bind="filter.operator" inline:raw="true" /> 
    <div class="d-inline-block ml-1 mt-1">
      {{>filter.valueComponent}}
    </div>
    {{/if}}
  </form>
</div>