<div class="{{ if condition.validator.isInvalid 'warning'}}">

  <span class="glyphicon glyphicon-move"></span>

  {{input type="hidden" value=condition.position class="condition-position"}}
  {{#if allFieldsReady}}
    {{#x-select value=condition.field.content action=(action 'conditionFieldChanged') class="form-control input-sm" as |xs|}}
      <option>Choose Field...</option>
      {{#each allFields as |field|}}
        {{#xs.option value=field}}{{field.data_name}}{{/xs.option}}
      {{/each}}
    {{/x-select}}
  {{else}}
    Loading
  {{/if}}

  {{#x-select value=condition.operator action=(action 'conditionOperatorChanged') class="form-control input-sm" as |xs|}}
    <option>Choose Field...</option>
    {{#each availableOperators as |operator|}}
      {{#xs.option value=operator.value}}{{operator.name}}{{/xs.option}}
    {{/each}}
  {{/x-select}}

  <!-- Display Appropriate Widget -->
  {{#if useTextWidget}}
    {{input type="text" value=condition.value class="form-control input-sm"}}
  {{/if}}
  {{#if useSelectWidget}}
    {{#x-select value=selectValue action=(action 'conditionSelectValueChanged') class="form-control input-sm" as |xs|}}
      <option>Choose Field...</option>
      {{#each fieldOptions as |option|}}
        {{#xs.option value=option.id}}{{option.name}}{{/xs.option}}
      {{/each}}
    {{/x-select}}
  {{/if}}
  {{#if useNoWidget}}checked{{/if}}

  <button class="btn btn-xs btn-link" {{action "clickedDeleteCondition" condition bubbles=false}}>
    <span class="glyphicon glyphicon-trash"></span>
  </button>
</div>
