{% load i18n %}

<noscript><h3>{{ step }}</h3></noscript>
<div id="portListSortContainer" class="sort-container">
  <div class="col-sm-6">
    <h4 id="selected_port_label">{% trans "Selected Ports" %}</h4>
    <ul id="selected_port" class="portlist box-list"></ul>
    <h4>{% trans "Available Ports" %}</h4>
    <ul id="available_port" class="portlist box-list"></ul>
  </div>
  <div class="col-sm-6">
    {% include "project/firewalls_v2/_update_port_help.html" %}
  </div>
</div>

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

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