{{#each rule in model itemController="rule"}}
  <div {{bind-attr class=":field-preview :single-line-text :form-group :col-xs-12 :item"}}>
    {{input type="hidden" value=rule.position class="position"}}
    <ul class="controls list-inline">
      <li>
        <button class="btn btn-xs btn-link" {{action "deleteRule" rule}}>
          <span class="glyphicon glyphicon-trash"></span>
        </button>
      </li>
    </ul>
    <div class="col-xs-12">
      {{#if rule.hasMultipleConditions}}
        <div class="btn-group" role="group">
          <button type="button" {{bind-attr class=":btn :btn-primary :btn-xs rule.isAnd:active"}} {{action "setOperator" "and"}}>AND</button>
          <button type="button" {{bind-attr class=":btn :btn-primary :btn-xs rule.isOr:active"}} {{action "setOperator" "or"}}>OR</button>
        </div>
      {{/if}}

      <!-- Rule Conditions -->
      <h4>
        Conditions
        <button class="btn btn-xs btn-link" {{action "addCondition"}}>
          <span class="glyphicon glyphicon-plus-sign text-success"></span>
        </button>
      </h4>
      <ul {{bind-attr class=":rule-conditions :list-unstyled :form-inline rule.isOr:or"}}>
        {{#each condition in rule.conditions itemController="rulecondition"}}
          <li>
            <!--<span class="glyphicon glyphicon-question-sign"></span>-->

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

            {{input type="hidden" value=condition.position class="condition-position"}}
            {{#if condition.allFieldsReady}}
              {{view "select"
                selection=condition.field.content
                content=condition.allFields
                prompt="Choose Field"
                optionValuePath="content"
                optionLabelPath="content.name"
                class="form-control input-sm"}}
            {{else}}
              Loading
            {{/if}}
            {{view "select"
              value=condition.operator
              content=condition.availableOperators
              optionValuePath="content.value"
              optionLabelPath="content.name"
              class="form-control input-sm"}}
            {{input type="text" value="" class="form-control input-sm"}}
            <button class="btn btn-xs btn-link" {{action "removeCondition"}}>
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </li>
        {{/each}}
      </ul>

      <!-- Rule Results -->
      <h4>
        Results
        <button class="btn btn-xs btn-link" {{action "addResult"}}>
          <span class="glyphicon glyphicon-plus-sign text-success"></span>
        </button>
      </h4>
      <ul class="rule-results list-unstyled form-inline">
        {{#each result in rule.results itemController="ruleresult"}}
          <li>
            <span class="glyphicon glyphicon-circle-arrow-right"></span>
            {{view "select"
              value=result.action
              content=result.availableActions
              optionValuePath="content.value"
              optionLabelPath="content.name"
              class="form-control input-sm"}}
            {{#if result.allFieldsReady}}
              {{view "select"
                selection=result.field.content
                content=result.allFields
                prompt="Choose Field"
                optionValuePath="content"
                optionLabelPath="content.name"
                class="form-control input-sm"}}
            {{else}}
              Loading
            {{/if}}
          </li>
        {{/each}}
      </ul>
    </div>
  </div>
{{/each}}