<div class="panel panel-primary">
  <div class="panel-heading">Basic</div>
  <div class="panel-body">
    {% include 'promgen/error_block.html' with warning=form.name.errors only %}
    {{ form.name.label_tag }}
    {{ form.name }}
    <br />
    {% include 'promgen/error_block.html' with warning=form.enabled.errors only %}
    {{ form.enabled.label_tag }}
    {{ form.enabled }}
    <br />
    {% include 'promgen/error_block.html' with warning=form.duration.errors only %}
    {{ form.duration }}
    <p>
      Examples:
      <code title="30 seconds" data-copyto="#id_duration">30s</code>
      <code title="1 minute" data-copyto="#id_duration">1m</code>
      <code title="5 minutes" data-copyto="#id_duration">5m</code>
      <code title="10 minutes" data-copyto="#id_duration">10m</code>
      <code title="1 hour" data-copyto="#id_duration">1h</code>
    </p>
    <p class="help-block">Prometheus will wait a certain duration between first encountering a new expression output vector element (like an instance with a high HTTP error rate) and counting an alert as firing for this element. Elements that are active, but not firing yet, are in pending state.</p>
    <br />
    {% include 'promgen/error_block.html' with warning=form.description.errors only %}
    {{ form.description.label_tag }}
    {{ form.description }}
    <p class="help-block">This description is not used by Prometheus. It is for Developer's to add aditional context only</p>
  </div>
</div>

<div class="panel panel-primary">
  <div class="panel-heading">
    {{ form.clause.label_tag }}
  </div>

  <div class="panel-body">
    <ul class="list-inline">
      <li>Prometheus:</li>
      <li><a rel="noopener noreferrer" href="https://prometheus.io/docs/querying/basics/">Basics</a></li>
      <li><a rel="noopener noreferrer" href="https://prometheus.io/docs/querying/operators/">Operators</a></li>
      <li><a rel="noopener noreferrer" href="https://prometheus.io/docs/querying/functions/">Functions</a></li>
      <li><a rel="noopener noreferrer" href="https://prometheus.io/docs/querying/examples/">Examples</a></li>
      <li>Promgen:</li>
      <li><a rel="noopener noreferrer" href="https://promgen.readthedocs.io/en/latest/rules.html">Rules</a></li>
    </ul>
    <ul class="list-inline">
      <li>Example Query</li>
      <li>
        <code
          data-href="{% url 'rule-test' rule.id %}"
          data-source="self"
          data-target="#ajax-clause-check"
          data-content_type="{{rule.content_type.name}}"
          data-object_id="{{rule.object_id}}"
          >
          node_load1{% templatetag openbrace %}{{rule.content_type.model}}="{{ rule.content_object.name }}", {{ macro }}} > 5
        </code>
      </li>
    </ul>
  </div>
  <div class="panel-body">
    {% include 'promgen/error_block.html' with errors=form.clause.errors only %}
    {{ form.clause }}
  </div>
  <div class="panel-body">
      <select
        data-target="#id_clause"
        data-ajax="{% url 'proxy-label' '__name__' %}"
        data-append='{% templatetag openbrace %}{{rule.content_type.name}}="{{ rule.content_object.name }}"}'
        class="form-control"
        >
        <option value="">- insert metric at cursor -</option>
      </select>
  </div>
  <div class="panel-body">
    <a
      class="btn btn-primary btn-sm"
      data-href="{% url 'rule-test' rule.id %}"
      data-source="#id_clause"
      data-target="#ajax-clause-check"
      data-content_type="{{rule.content_type.name}}"
      data-object_id="{{rule.object_id}}"
      >Test Query</a>
  </div>
</div>

<div id="ajax-clause-check" class="panel-body" style="display:none;"></div>
