filter.html

<template>
  <div repeat.for="filter of filters" class="filters">
    <div repeat.for="field of filter">
      <div class="col-md-12">
        <div class="col-md-4">
          <form-field
              change.delegate="onChange($parent.$index, $index) & debounce:200"
              value.bind="field.data.field"
              element.bind="field.field">
          </form-field>
        </div>

        <div class="col-md-4">
          <form-field
              change.delegate="onChange($parent.$index, $index) & debounce:200"
              value.bind="field.data.operator"
              element.bind="field.operator">
          </form-field>
        </div>

        <div class="col-md-4">
          <div class="input-group">
            <div class="${field.data.hasError ? 'has-error' : ''}">
              <form-field
                  keydown.delegate="onChange($parent.$index, $index, true) & debounce:50"
                  value.bind="field.data.value"
                  element.bind="field.value">
              </form-field>
            </div>

            <div class="input-group-btn">
              <button
                  class="btn btn-primary add-filter "
                  if.bind="$last"
                  click.delegate="create($parent.$index)"
                  t="${$first ? '+ And' : '+'}">+
              </button>
              <button
                  class="btn btn-danger remove-filter"
                  if.bind="filter.length > 1"
                  click.delegate="destroy($parent.$index, $index)"
                  t="${$first ? '- And' : '-'}">-
              </button>
            </div>
          </div>
        </div>
      </div>

      <div if.bind="field.data.operator === 'between'" class="col-md-12">
        <div class="col-md-4">
          <input type="text" class="form-control disabled" disabled>
        </div>

        <div class="col-md-4">
          <input type="text" class="form-control disabled" disabled value="and" t="[value]and">
        </div>

        <div class="col-md-4" style="margin-bottom: 15px;">
          <form-field
              keypress.delegate="onChange($parent.$index, $index, true) & debounce:500"
              value.bind="field.data.between"
              element.bind="field.value">
          </form-field>
        </div>
      </div>
    </div>

    <div class="col-md-12">
      <div class="col-md-offset-4 col-md-4">
        <div class="btn-group btn-group btn-group-justified">
          <a
              class="btn btn-primary add-block btn-sm"
              if.bind="$last"
              click.delegate="create()"
              t="+ Or">+
          </a>
          <a
              class="btn btn-danger remove-block btn-sm"
              if.bind="filters.length > 1"
              click.delegate="destroy($index)"
              t="- Or">-;
          </a>
        </div>
      </div>
    </div>

    <div class="col-md-12" if.bind="!$last">
      <hr>
    </div>

    <div class="clearfix"></div>
  </div>
</template>