{% load i18n %}

<noscript><h3>{{ step }}</h3></noscript>
<div id="ruleListSortContainer" class="sort-container">
  <div class="col-sm-6">
    <h4 id="selected_rule_label">{% trans "Selected Rules" %}</h4>
    <ul id="selected_rule" class="rulelist box-list"></ul>
    <h4>{% trans "Available Rules" %}</h4>
    <ul id="available_rule" class="rulelist box-list"></ul>
  </div>
  <div class="col-sm-6">
    {% include "project/firewalls/_update_rule_help.html" %}
  </div>
</div>

<div id="ruleListIdContainer">
  <div class="actions">
    <div id="ruleListId">
      {% include "horizon/common/_form_fields.html" %}
    </div>
  </div>
  <div class="help_text">
    {{ step.get_help_text }}
  </div>
</div>

<script>
  if (typeof $ !== 'undefined') {
    horizon.firewalls.workflow_init($(".workflow"));
  } else {
    addHorizonLoadEvent(function() {
      horizon.firewalls.workflow_init($(".workflow"));
    });
  }
</script>