{% load i18n %}

<noscript><h3>{{ step }}</h3></noscript>
<style type="text/css">
  #subnets_table {
    width: 100%
  }
  #subnets_table td {
      border: 1px solid #466E85;
      text-align: center;
      padding: 3px;
  }
</style>
<table class="table-fixed" id="groupListSortContainer" style="width:100%">
  <tbody>
    <tr>
      <td class="actions">
        <div class="form-group">
            <label id="selected_group_label">{% trans "Selected Groups" %}</label>
            <span class="help-icon" data-toggle="tooltip" data-placement="top"
              title=""
              data-original-title="Select one or more Groups from the Available Groups. To select, click on Group or drag and drop to the Selected Groups area. You may also change the order of Groups by dragging and dropping within the Selected Groups (ordering determines the order of NICs). You may optionally assign an IP address for a Group by clicking on the Group in the Selected Groups.">
              <span class="fa fa-question-circle"></span>
            </span>
          </div>
        <ul id="selected_network" class="networklist">
        </ul>
        <label>{% trans "Available Groups" %}</label>
        <ul id="available_group" class="networklist">
        </ul>
      </td>
      <td class="help_text" style="padding-left:20px">
            <div id="fixed_ip_div" style="display:none">
              {% trans "Subnet(s) available for Group '" %}<label id="group"></label>{% trans "'" %}
              <table id='subnets_table'>
                <thead>
                  <tr>
                    <td>CIDR</td>
                    <td>Pool Start</td>
                    <td>Pool End</td>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
              <div class="form-group">
                <label class="control-label  required" for="fixed_ip">Assign IP</label>
                  <span class="help-icon" data-toggle="tooltip" data-placement="top"
                    title=""
                    data-original-title="Choose IP address in Subnet’s CIDR within allocated pool start and end range (refer to table above).">
                    <span class="fa fa-question-circle"></span>
                  </span>
              </div>
              <input id="fixed_ip" type="text"/>
              <input id="set_ip_button" type="button" value="Add"/>
              <input id="remove" type="button" value="Remove"/>
            </div>
            <div id="errors" class="alert alert-message alert-danger" style="display:none"></div>
      </td>
    </tr>
  </tbody>
</table>

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

  <script src='{{ STATIC_URL }}dashboard/js/member.js' type='text/javascript'></script>
  <script>
  member.groups_init();
  </script>
