{% load i18n %}
{% load network_tags %}
<h2>
    <div id="vm-details-add-interface">
    {% with op=op.add_interface %}{% if op %}
    <a href="{{op.get_url}}" class="btn btn-{{op.effect}} operation pull-right"
        {% if op.disabled %}disabled{% endif %}>
    <i class="fa fa-{{op.icon}}"></i> {% trans "add interface" %}</a>
    {% endif %}{% endwith %}
    </div>
  {% trans "Interfaces" %}
</h2>


{% for i in instance.interface_set.all %}
<div>
  <h3 class="list-group-item-heading dashboard-vm-details-network-h3">
    <i class="fa fa-{% if i.host %}globe{% else %}link{% endif %}"></i> {{ i.vlan.name }}
    {% if not i.host%}({% trans "unmanaged" %}){% endif %}
    {% if user.is_superuser %}
      <a href="{{ i.host.get_absolute_url }}"
        class="btn btn-default btn-xs">{% trans "edit" %}</a>
    {% endif %}
    {% if is_owner %}
      <a href="{% url "dashboard.views.interface-delete" pk=i.pk %}?next={{ request.path }}"
        class="btn btn-danger btn-xs interface-remove"
        data-interface-pk="{{ i.pk }}">
        {% trans "remove" %}
      </a>
    {% endif %}
  </h3>
  {% if i.host %}
    <div class="row">
      <div class="col-md-5">
        <dl>
          <dt>{% trans "IPv4 address" %}:</dt> <dd>{{ i.host.ipv4 }}</dd>
          <dt>{% trans "IPv6 address" %}:</dt> <dd>{{ i.host.ipv6 }}</dd>
          <dt>{% trans "DNS name" %}:</dt> <dd>{{ i.host.get_fqdn }}</dd>
          <dt>{% trans "Groups" %}:</dt>
          <dd>
          {% for g in i.host.groups.all %}
            {{ g }}{% if not forloop.last %},{% endif %}
            {% empty %}
            -
          {% endfor %}
          </dd>
        </dl>
      </div>
      <div class="col-md-7">
        <ul class="nav nav-pills pull-right">
          <li class="active"><a href="#ipv4_{{ i.host.vlan.pk }}" data-toggle="pill" class="text-center">{% trans "IPv4" %}</a></li>
          <li><a href="#ipv6_{{ i.host.vlan.pk }}" data-toggle="pill" class="text-center">{% trans "IPv6" %}</a></li>
        </ul>
        <h4>{% trans "Port access" %}</h4>
        <div class="tab-content" style="padding-top: 10px;">
          <div class="tab-pane active" id="ipv4_{{ i.host.vlan.pk }}">
            <table class="table table-striped rule-table">
              <thead>
                <tr><th>
                  <i class="fa fa-globe fa-2x"></i>
                  <i class="fa fa-long-arrow-right fa-2x"></i>
                  </th><th>
                  <i class="fa fa-shield fa-2x"></i>
                  </th><th colspan="2">
                  <i class="fa fa-long-arrow-right fa-2x"></i>
                  <i class="fa fa-desktop fa-2x"></i>
                </th></tr>
              </thead>
              <tbody>
                {% for l in i.host.list_ports %}
                  {% if l.ipv4 %}
                    <tr>
                      <td>
                        {% display_portforward4 l %}
                      </td>
                      <td><i class="fa fa-long-arrow-right"></i></td>
                      <td>
                        {{ l.private }}/{{ l.proto }}
                      </td>
                      <td>
                        <a href="{% url "dashboard.views.remove-port" pk=instance.pk rule=l.ipv4.pk %}" class="btn btn-link btn-xs vm-details-remove-port" data-rule="{{ l.ipv4.pk }}" title="{% trans "Remove" %}"><i class="fa fa-times"><span class="sr-only">{% trans "Remove" %}</span></i></a>
                      </td>
                    </tr>
                  {% endif %}
                {% endfor %}
              </tbody>
            </table>
          </div> <!-- /ipv4 -->
          <div class="tab-pane" id="ipv6_{{ i.host.vlan.pk }}">
            {% if i.host.ipv6 %}
            <table class="table table-striped rule-table">
              <thead>
                <tr><th>
                  <i class="fa fa-globe fa-2x"></i>
                </th><th>
                  <i class="fa fa-long-arrow-right fa-2x"></i>
                </th><th colspan="2">
                  <i class="fa fa-desktop fa-2x"></i>
                </th></tr>
              </thead>
              <tbody>
                {% for l in i.host.list_ports %}
                  {% if l.ipv6 %}
                    <tr>
                      <td>
                        {% display_portforward6 l %}
                      </td>
                      <td><i class="fa fa-long-arrow-right"></i></td>
                      <td>
                        {{ l.private }}/{{ l.proto }}
                      </td>
                      <td>
                        <a href="{% url "dashboard.views.remove-port" pk=instance.pk rule=l.ipv4.pk %}" class="btn btn-link btn-xs vm-details-remove-port" data-rule="{{ l.ipv6.pk }}" title="{% trans "Remove" %}"><i class="fa fa-times"><span class="sr-only">{% trans "Remove" %}</span></i></a>
                      </td>
                    </tr>
                  {% endif %}
                {% endfor %}
              </tbody>
            </table>
            {% else %}
              <h4>{% trans "This VM doesn't have an IPv6 address!" %}</h4>
            {% endif %}
          </div><!-- /ipv6 -->
          {% include "dashboard/vm-detail/_network-port-add.html" %}
        </div>
      </div>
    </div>
  {% endif %}
</div>
{% endfor %}