<div class="ui equal width form">
  <div class="flexberry-colsconfig content">
    {{#each filterColumns as |column|}}
      <div class="fields object-list-view-filters">
        <div class="field">
          {{flexberry-textbox
            value=column.header
            readonly=true
          }}</div>
        <div class="field">
          {{#if column.filter.conditions}}
            {{flexberry-dropdown
              value=column.filter.condition
              items=column.filter.conditions
              displayCaptions=(not (is-array column.filter.conditions))
              class="compact fluid"
              placeholder=(t "components.object-list-view.filter-condition")
              needChecksOnValue=false
              onChange=(action "filterConditionChanged" column.filter)
            }}
          {{/if}}
        </div>
        <div class="field">
          {{#if column.filter.component.name}}
            {{component column.filter.component.name
              value=column.filter.pattern
              readonly=(or
                (eq column.filter.condition "empty")
                (eq column.filter.condition "nempty")
              )
              dynamicProperties=column.filter.component.properties
            }}
          {{/if}}
        </div>
        {{#if column.filter.component.name}}
          <button
            type="button"
            class="ui basic icon button"
            title={{t "components.filters-dialog-content.clear-this-filter"}}
            {{action "clearFilterField" column.filter}} >
            <i class="trash icon"></i>
          </button>
        {{/if}}
      </div>
    {{/each}}
    <div class="field">
      <button type="button" class="ui right floated primary button" {{action "applyFilters"}}>{{t "components.filters-dialog-content.apply"}}</button>
      <button type="button" class="ui right floated basic button" {{action "clearFiltersFields"}}>{{t "components.filters-dialog-content.clear"}}</button>
    </div>
  </div>
</div>
