<noscript><h3>{{ step }}</h3></noscript>
{{ step.get_help_text }}
{% include 'horizon/common/_form_errors.html' with form=form %}
<div class="row">
  <div class="col-sm-6">
    <div class="form-group{% if form.rule_name.errors %} has-error{% endif %} {{ form.rule_name.css_classes }}">
      <label class="control-label{% if form.rule_name.field.required %} {{ form.required_css_class }}{% endif %}" for="rule_name">{{ form.rule_name.label }}</label>
      {% if form.rule_name.help_text %}
        <span class="help-icon" data-toggle="tooltip" data-placement="top" title="{{ form.rule_name.help_text|safe }}"><span class="fa fa-question-circle"></span></span>
      {% endif %}
      <input class="form-control" id="rule_name" maxlength="{{ form.rule_name.field.max_length }}" name="rule_name" type="text" value="{{ form.rule_name.value }}" />
      {% for error in form.rule_name.errors %}
        <span class="help-block alert alert-danger {{ form.error_css_class }}">{{ error }}</span>
      {% endfor %}
    </div>

    <div class="form-group{% if form.comment.errors %} has-error{% endif %} {{ form.comment.css_classes }}">
      <label class="control-label{% if form.comment.field.required %} {{ form.required_css_class }}{% endif %}" for="comment">{{ form.comment.label }}</label>
      {% if form.comment.help_text %}
        <span class="help-icon" data-toggle="tooltip" data-placement="top" title="{{ form.comment.help_text|safe }}"><span class="fa fa-question-circle"></span></span>
      {% endif %}
      <textarea class="form-control" cols="40" id="comment" name="comment" rows="4">{{ form.comment.value }}</textarea>
      {% for error in form.comment.errors %}
        <span class="help-block alert alert-danger {{ form.error_css_class }}">{{ error }}</span>
      {% endfor %}
    </div>

    <div class="form-group{% if form.policy_table.errors %} has-error{% endif %} {{ form.policy_table.css_classes }}">
      <label class="control-label{% if form.policy_table.field.required %} {{ form.required_css_class }}{% endif %}" for="policy_table">{{ form.policy_table.label }}</label>
      {% if form.policy_table.help_text %}
        <span class="help-icon" data-toggle="tooltip" data-placement="top" title="{{ form.policy_table.help_text|safe }}"><span class="fa fa-question-circle"></span></span>
      {% endif %}
      <input class="form-control" id="policy_table" maxlength="{{ form.policy_table.field.max_length }}" name="policy_table" type="text" value="{{ form.policy_table.value }}" placeholder="e.g. error" pattern="[^0-9].*" title="Name cannot begin with a number" />
      {% for error in form.policy_table.errors %}
        <span class="help-block alert alert-danger {{ form.error_css_class }}">{{ error }}</span>
      {% endfor %}
    </div>

    <div class="form-group{% if form.policy_columns.errors %} has-error{% endif %} {{ form.policy_columns.css_classes }}">
      <label class="control-label{% if form.policy_columns.field.required %} {{ form.required_css_class }}{% endif %}" for="policy_columns">{{ form.policy_columns.label }}</label>
      {% if form.policy_columns.help_text %}
        <span class="help-icon" data-toggle="tooltip" data-placement="top" title="{{ form.policy_columns.help_text|safe }}"><span class="fa fa-question-circle"></span></span>
      {% endif %}
      <input class="hidden" id="policy_columns" name="policy_columns" type="text" value="{{ form.policy_columns.value }}" />
      <table id="policy_columns_table" class="table table-condensed">
        {% for column in policy_columns_list %}<tr id="policy_column_{{ forloop.counter0 }}">
          <td class="borderless input-cell">
            <input class="form-control policy-column-input" name="policy_column_{{ forloop.counter0 }}" type="text" value="{{ column }}" placeholder="e.g. name" pattern="[^0-9].*" title="Name cannot begin with a number" />
          </td>
          <td class="borderless button-cell">
            <a class="{% if forloop.first %}hidden {% endif %}remove-policy-column-button btn btn-xs btn-primary">&#8211;</a>
          </td>
        </tr>{% endfor %}
        <tr>
          <td colspan="2" class="borderless input-errors">
            {% for error in form.policy_columns.errors %}
              <span class="help-block alert alert-danger {{ form.error_css_class }}">{{ error }}</span>
            {% endfor %}
          </td>
        </tr>
      </table>
      <a id="add_policy_column_button" class="btn btn-xs btn-primary" data-count="{{ policy_columns_count }}">+</a>
    </div>
  </div>
</div>
