{% extends "horizon/client_side/template.html" %}
{% load horizon %}

{% block id %}balloon_port{% endblock %}

{% block template %}
{% jstemplate %}
<div class="portTableHeader">
  <div class="title">[[interfaces_label]]</div>
  <div class="action">
    <a class="add-interface btn btn-default btn-xs ajax-modal [[type]]" href="[[add_interface_url]]">
      <span class="fa fa-plus"></span>
      [[add_interface_label]]
    </a>
  </div>
</div>
<table class="detailInfoTable">
  <caption></caption>
  <tbody>
    [[#port]]
    <tr>
      <th>
        <span title="[[id]]">
          <a href="[[url]]">[[id]]</a>
        </span>
      </th>
      <td>[[ip_address]]</td>
      <td>[[device_owner]]</td>
      <td>
        <span class="[[port_status_class]]">[[port_status]]</span>
      </td>
      <td class="delete">
        [[#is_interface]]
        <button class="delete-port btn btn-danger btn-xs"
          data-router-id="[[router_id]]" data-network-id="[[network_id]]"
          data-port-id="[[id]]">[[delete_interface_label]]</button>
        [[/is_interface]]
      </td>
    </tr>
    [[/port]]
  </tbody>
</table>
{% endjstemplate %}
{% endblock %}
