<h1>{{ _('Metric thresholds') }}</h1>

<div class='row'>
    <div class='col-md-4'>
        <a href="#" data-toggle="modal" data-target="#threshold_modal">
            <button id="threshold_button" type="submit" class="btn btn-primary">{{ _('Add threshold') }}</button>
        </a>
    </div>
</div>

<div class='row row-bordered'>
    <div class='col-md-1'>
    </div>
    <div class='col-md-5'>
      <strong>{{ _('Name') }}</strong>
    </div>
    <div class='col-md-2'>
      <strong>{{ _('Higher is better') }}</strong>
    </div>
    <div class='col-md-2'>
      <strong>{{ _('Value') }}</strong>
    </div>

    <div class='col-md-2'>
      <strong>{{ _('Action') }}</strong>
    </div>
</div>
<div class='row row-bordered' ng-repeat="threshold in thresholds">
    <div class='col-md-1'>
        <i class='fa fa-line-chart'></i>
    </div>
    {% raw %}
    <div class='col-md-5'>
        {{ threshold.name }}
    </div>
    <div class='col-md-2'>
        <input type="checkbox" ng-if="!threshold.is_higher_better" disabled="disabled" />
        <input type="checkbox" ng-if="threshold.is_higher_better" disabled="disabled" checked="checked" />
    </div>
    <div class='col-md-2'>
        {{ threshold.value }}
    </div>
    {% endraw %}
    <div class='col-md-2'>
        <a href="#" data-toggle="modal" data-target="#threshold_modal" ng-click="setThreshold(threshold)" style="color: inherit; text-decoration: none;">
            <i class='fa fa-pencil'></i>
        </a>
        <a ng-click="removeThreshold(threshold)" style="color: inherit; text-decoration: none;">
            <i class='fa fa-trash'></i>
        </a>
    </div>
</div>

<!-- Modal HTML -->
<div id="threshold_modal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="modalClosed()">&times;</button>
        <h4 class="modal-title">{{ _('Metric threshold') }}</h4>
      </div>
      <form class="well" id="threshold_form" ng-submit="updateMetricThreshold()">
        <div class="modal-body">
          {% raw %}
          <p ng-repeat="(name, errs) in errors" class="alert alert-danger errors"><strong>{{ name }}</strong>: {{ errs.join(', ') }}</p>
          {% endraw %}

          <div class="row form-group">
            <label for="name" class="col-md-3 control-label">{{ _('Metric name:') }}</label>
            <div class="col-md-10">
              <select id="metric_name" name="name" ng-model="currentThreshold.name" style="width: 100%;">
              {% for metric in metrics %}
                <option value="{{ metric.name }}">{{ metric.name }}</option>
              {% endfor %}
              </select>
            </div>
          </div>
          <div class="row form-group">
            <label for="value" class="col-md-3 control-label">{{ _('Value:') }}</label>
            <div class="col-md-10">
              <input id="value" name="value" ng-model="currentThreshold.value" style="width: 100%;" />
            </div>
          </div>
          <div class="row form-group">
            <label for="is_higher_better" class="col-md-4 control-label">{{ _('Higher is better:') }}</label>
            <div class="col-md-2">
              <input id="is_higher_better" type="checkbox" name="is_higher_better" ng-model="currentThreshold.is_higher_better" />
            </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="modalClosed()">{{ _('Close') }}</button>
        <button class="btn btn-primary">{{ _('Save') }}</button>
      </div>
      </form>
    </div>
  </div>
</div>
