{% load i18n %}
<div ng-controller="alarmEditController" ng-init="init('{{ service }}')">
    <input type="hidden" name="{{ name }}" id="dimension"/>
    <input type="hidden" name="match_by" id="match"/>
    <div style="margin-bottom:5px;">
        <select id="function" class="form-control"
                ng-model="currentFunction" ng-options="f[0] as f[1] for f in {{func}}" ng-change="saveExpression()"></select>
        <select id="metric-chooser" class="form-control"
                ng-model="currentMetric"
                ng-options="metric for metric in metricNames"
                ng-change="metricChanged()">
                </select>
        <select id="comparators" class="form-control"
                ng-model="currentComparator" ng-options="f[0] as f[1] for f in {{comparators}}" ng-change="saveExpression()"></select>
        <input type="number" step="any" id="threshold" class="form-control" ng-model="currentThreshold" ng-change="saveExpression()"/>
    </div>
    <tags-input id="dimension-chooser" ng-model="tags"
                placeholder="{% trans 'Add a dimension' %}"
                add-from-autocomplete-only="true"
                on-tag-added="saveDimension()" on-tag-removed="saveDimension()">
        <auto-complete source="possibleDimensions($query)"
                       max-results-to-show="30" min-length="1">
        </auto-complete>
    </tags-input>
    <div class="topologyBalloon" id="metrics" style="position:static;display: block;">
        <div class="contentBody">
            <table class="detailInfoTable">
                <caption>Matching Metrics</caption>
                <tbody>
                <tr>
                    <th ng-repeat="name in dimnames">{$name$}</th>
                </tr>
                <tr ng-repeat="metric in matchingMetrics">
                    <td ng-repeat="dim in dimnames" style="white-space:normal">{$metric[dim] | spacedim $}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
