{% load i18n %}

<noscript><h3>{{ step }}</h3></noscript>
<table class="table-fixed" id="networkListSortContainer">
  <tbody>
    <tr>
      <td class="actions">
        <label id="selected_network_label">{% trans "Selected groups" %}</label>
        <ul id="selected_network" class="networklist">
        </ul>
        <label>{% trans "Available groups" %}</label>
        <ul id="available_network" class="networklist">
        </ul>
      </td>
      <td class="help_text">
          <p>{% blocktrans %}Choose group from Available groups to Selected 
              groups by push button or drag and drop, you may change group order 
              by drag and drop as well. {% endblocktrans %}</p>
      </td>
    </tr>
  </tbody>
</table>

<table class="table-fixed" id="networkListIdContainer">
  <tbody>
    <tr>
      <td class="actions">
          <div id="networkListId">
            {% include "horizon/common/_form_fields.html" %}
          </div>
      </td>
      <td class="help_text">
          {{ step.get_help_text }}
      </td>
    </tr>
  </tbody>
</table>


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