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

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

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

    <input type="number"
        data-type="range"
        data-highlight="true"
        class="rule-value"
        value="{{unbound value}}"
        min="0"
        max="100" />

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

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

    <div class="delete-rule-container">
        <button class="delete-rule-button"
                data-role="button"
                data-icon="delete"
                data-theme="d"
                data-mini="true"
                {{action deleteRuleClicked target="view"}}>&nbsp;</button>
    </div>
</div>
