<div class="panel panel-primary">
  <div class="panel-heading">{{ rule.name|default:"New Rule" }}</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 }}
    <!--
      The ON/OFF toggle button generated by "form.enabled" is rendered as an
      inline-block element. On this particular page we would like it to be
      rendered as a block element, so to simulate that behaviour we wrap it
      inside a "div" element.
    -->
    <div>{{ form.enabled }}</div>

    <br />

    {% include 'promgen/error_block.html' with warning=form.duration.errors only %}
    {{ form.duration.label_tag }}
    {{ 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" style="margin-bottom: 0">
      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" style="margin-bottom: 0">
      This description is not used by Prometheus. It is for Developer's to add
      additional context only.
    </p>

    <br />

    {% include 'promgen/error_block.html' with errors=form.clause.errors only %}
    {{ form.clause.label_tag }}
    {{ form.clause }}
    <p>
      Example Query:
      <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 }}} &gt; 5
      </code>
      {% if rule.parent %}
      <br />
      <a href="{% url 'rule-detail' rule.parent.pk %}" />Parent Query</a>:
      <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}}"
      >
          {{rule.parent.clause}}
      </code>
      {% endif %}
    </p>
    <p class="help-block">
      Prometheus:
      <span style="word-spacing: 0.5rem;">
        <a rel="noopener noreferrer" href="https://prometheus.io/docs/querying/basics/">Basics</a>
        <a rel="noopener noreferrer" href="https://prometheus.io/docs/querying/operators/">Operators</a>
        <a rel="noopener noreferrer" href="https://prometheus.io/docs/querying/functions/">Functions</a>
        <a rel="noopener noreferrer" href="https://prometheus.io/docs/querying/examples/">Examples</a>
      </span>
      Promgen:
      <a rel="noopener noreferrer" href="https://line.github.io/promgen/user/rules.html">Rules</a>
    </p>

    {% if rule.parent %}
    {% if macro not in rule.parent.clause %}
    <div class="alert alert-warning" role="alert">
      <span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
      <span class="sr-only">Warning:</span>
      Missing <strong>{{ macro }}</strong> macro in parent rule. Please reffer to Promgen's documentation regarding
      <a rel="noopener noreferrer" class="alert-link" href="https://line.github.io/promgen/user/rules.html">rule overrides</a>
    </div>
    {% endif %}
    {% endif %}

    <div>
      <a
        class="btn btn-primary"
        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 class="panel-body"> -->
</div><!-- <div class="panel panel-primary"> -->

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