<div class="rule-box">
    <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>

    <div id="rule-metric-popup" data-role="popup">
        <ul class="rule-metric-list" data-role="listview">
            {{#each Mist.rulesController.metricList}}
            <li data-icon="false">
                <a href="#" title="{{unbound this}}">{{this}}</a>
            </li>
            {{/each}}
        </ul>
    </div>

    <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>

    <div id="rule-operator-popup" data-role="popup">
        <ul class="rule-operator-list" data-role="listview">
            {{#each Mist.rulesController.operatorList}}
            <li data-icon="false">
                <a href="#" title="{{unbound this.title}}">{{this.symbol}}</a>
            </li>
            {{/each}}
        </ul>
    </div>

    <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"}}>{{autoAction}}</a>

    <div id="rule-action-popup" data-role="popup">
        <ul class="rule-action-list" data-role="listview">
            {{#each Mist.rulesController.actionList}}
            <li data-icon="false">
                <a href="#" title="{{unbound this}}">{{this}}</a>
            </li>
            {{/each}}
        </ul>
    </div>

    <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>
