{% load i18n %}
{% load network_tags %}

<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>
<h2>
  {% 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>
    {% if i.vxlan  %}
      {{ i.vxlan.name }} (user)
    {% else %}
      {{ i.vlan.name }}
      {% if not i.host%}({% trans "unmanaged" %}){% endif %}
    {% endif %}
    {% if user.is_superuser and i.host %}
      <a href="{{ i.host.get_absolute_url }}"
        class="btn btn-default btn-xs">{% trans "edit" %}</a>
    {% endif %}

    {% if i.vxlan %}
    {% with op=op.remove_user_interface %}{% if op %}
    <span class="operation-wrapper">
      <a href="{{op.get_url}}?interface={{ i.pk }}"
         class="btn btn-{{op.effect}} btn-xs operation interface-remove"
         {% if op.disabled %}disabled{% endif %}>{% trans "remove" %}
      </a>
    </span>
    {% endif %}{% endwith %}
    {% else %}
    {% with op=op.remove_interface %}{% if op %}
    <span class="operation-wrapper">
      <a href="{{op.get_url}}?interface={{ i.pk }}"
         class="btn btn-{{op.effect}} btn-xs operation interface-remove"
         {% if op.disabled %}disabled{% endif %}>{% trans "remove" %}
      </a>
    </span>
    {% endif %}{% endwith %}
    {% 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>
                        <span class="operation-wrapper">
                          <a href="{{ op.remove_port.get_url }}?rule={{ l.ipv4.pk }}"
                             class="btn btn-link btn-xs operation"
                             title="{% trans "Remove" %}"
                             {% if not op.remove_port %}disabled{% endif %}>
                            <i class="fa fa-times"><span class="sr-only">{% trans "Remove" %}</span></i>
                          </a>
                        </span>
                      </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="{{ op.remove_port.get_url }}?rule={{ l.ipv4.pk }}" class="btn btn-link btn-xs vm-details-remove-port" data-rule="{{ l.ipv6.pk }}" title="{% trans "Remove" %}" {% if not op.remove_port %}disabled{% endif %}>
                          <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 %}
