<div class="rule-box" id="{{unbound id}}">
    <div class="rule-if">if</div>

    <a href="#"
        class="rule-button metric"
        data-role="button"
        data-iconpos="right"
        data-inline="true"
        {{action "openMetricPopup" target="view"}}>{{metric}}</a>

    <a href="#"
        class="rule-button operator"
        data-role="button"
        data-icon="false"
        data-inline="true"
        {{action "openOperatorPopup" target="view"}}>{{operator.symbol}}</a>

    <div class="rule-unit">{{unit}}</div>
    <input type="number"
        data-type="range"
        data-highlight="true"
        class="rule-value"
        {{bindAttr value="value"}}
        min="0"
        {{bindAttr max="maxValue"}} />

    <div class="rule-then">then</div>

    <a href="#"
        class="rule-button action"
        data-role="button"
        data-icon="false"
        data-inline="true"
        {{action "openActionPopup" target="view"}}>{{actionToTake}}</a>

    {{#if pendingAction}}
    <div class="ajax-loader"></div>
    {{else}}
    <div class="delete-rule-container">
        <button class="delete-rule-button"
                data-role="button"
                data-icon="delete"
                data-iconpos="notext"
                data-mini="true"
                {{action deleteRuleClicked target="view"}}>&nbsp;</button>
    </div>
    {{/if}}

</div>
