{% load i18n %}
<table id='Ports' class="zebra-striped">
  <tr id='headings'>
    <th>{% trans "ID" %}</th>
    <th>{% trans "State" %}</th>
    <th>{% trans "Attachment" %}</th>
    <th>{% trans "Actions" %}</th>
    <th>{% trans "Extensions" %}</th>
  </tr>
  <tbody class='main'>
    {% for port in network.ports %}
      <tr class="{% cycle 'odd' 'even' %}">
          <td>{{ port.id }}</td>
          <td class="{{port.state}}">{{port.state}}</td>
          <td>
            {% if port.attachment %}
            <table class="attachmend_details">
                <tr>
                    <td>{% trans "Instance" %}</td>
                    <td>{% trans "VIF Id" %}</td>
                </tr>
                <tr>
                    <td> {{port.instance}} </td>
                    <td> {{port.attachment.id}} </td>
                </tr>
            </table>
            {% else %}
            --
            {% endif %}
          </td>
          <td id="actions">
            <ul>
              {% if port.attachment %}
              <li class="form">{% include "nova/networks/_detach_port.html" with form=detach_port_form %}</li>
              {% else %}
              <li><a class='btn small' href='{% url horizon:nova:networks:port_attach network.id port.id %}'>{% trans "Attach" %}</a></li>
              {% endif %}
              <li class="form">{% include "nova/networks/_toggle_port.html" with form=toggle_port_form %}</li>
              <li class="form">{% include "nova/networks/_delete_port.html" with form=delete_port_form %}</li>
            </ul>
          </td>
          <td id="extensions">
            <ul>
            </ul>
          </td>
      </tr>
    {% endfor %}
  </tbody>
</table>
