{% if ipv4_groups %}
<div class="content collapse">
   <div class="content-header">
       <h2>IPv4 ByteBlower Ports</h2>
   </div>
   <div class="collapse-content">
   {% for a_group in ipv4_groups %}
   	{% if  a_group.name %}
   	<h3> {{ a_group.name }} </h3>
   	{% endif %}
    <table>
        <tr>
            <th >Port</th>
            <th >MAC Address</th>
            <th >IPv4 Address</th>
            <th >Default Gateway</th>
            <th>Netmask</th>
            <th>NAT</th>
            <th>VLAN</th>
            <th>MTU</th>
            <th>Docked</th>
        </tr>
    
        {% for port in a_group.ports %}
        <tr>
            <td>{{ port.name }}</td>
            <td>{{ port.macAddress }}</td>
            <td class="no-wrap">{{ port.ipAddress }}</td>
            <td class="no-wrap">{{ port.gateway }}</td>
            <td>{{ port.netmask }}</td>
            <td>{{ port.nat }}</td>
            <td>{{ port.vlans }}</td>
            <td>{{ port.mtu }}</td>
            <td>{{ port.physicalInterface }}</td>
        </tr>
        {% endfor %}
    </table>
    {% endfor %}
  </div>  
</div>  
{% endif %} 
{% if ipv6_groups %}
<div class="content collapse">
   <div class="content-header">
       <h2>IPv6 ByteBlower Ports</h2>
   </div>
   <div class="collapse-content">
   {% for a_group in ipv6_groups %}
   	{% if  a_group.name %}
   	<h3> {{ a_group.name }} </h3>
   	{% endif %}
   
    <table class="table table-hover">
        <tr>
            <th>Port</th>
            <th>MAC Address</th>
            <th>IPv6 Address</th>
            <th>Router Address</th>
            <th>Prefix Length</th>
            <th>VLAN</th>
            <th>MTU</th>
            <th>Docked</th>
        </tr>
    
        {% for port in a_group.ports %}
        <tr>
            <td>{{ port.name }}</td>
            <td>{{ port.macAddress }}</td>
            <td class="no-wrap">{{ port.ipAddresses }}</td>
            <td class="no-wrap">{{ port.routers }}</td>
            <td>{{ port.prefix }}</td>
            <td>{{ port.vlans }}</td>
            <td>{{ port.mtu }}</td>
            <td>{{ port.physicalInterface }}</td>
        </tr>
        {% endfor %}
    </table>
   {% endfor %}    
  </div>
</div>   
{% endif %}