{% extends 'common/base.html' %}

{% block title %}::{{ object.name }}{% endblock %}

{% block content %}
<h2>{{ object.name }}</h2>

<div>

  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#overview" aria-controls="overview" role="tab" data-toggle="tab">Overview</a></li>
    <li role="presentation"><a href="#servers" aria-controls="servers" role="tab" data-toggle="tab">Servers</a></li>
    <li role="presentation"><a href="#vlans" aria-controls="vlans" role="tab" data-toggle="tab">VLANs</a></li>
    <li role="presentation"><a href="#switches" aria-controls="switches" role="tab" data-toggle="tab">Switches</a></li>
  </ul>

  <div class="tab-content">

    <div role="tabpanel" class="tab-pane active" id="overview">
      <table class="table table-hover table-no-head">
        <tbody>
          <tr>
            <td>Responsible</td>
            <td>
              {% for person in object.responsible.all %}
                <a class="btn btn-default btn-xs" href="{% url 'inventory.objects.list' %}?responsible={{ person.username }}">{{ person.username }}</a>
              {% endfor %}
            </td>
          </tr>
          <tr>
            <td>Created</td>
            <td>{{ object.created }}</td>
          </tr>
          <tr>
            <td>Modified</td>
            <td>{{ object.modified }}</td>
          </tr>
          <tr>
            <td>Related bugs</td>
            <td>{% include 'inventory/bugs.html' %}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div role="tabpanel" class="tab-pane" id="servers">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {% for inventory_object in object.inventory_objects.all %}
          <tr>
            <td>
              <a href="{{ inventory_object.get_absolute_url }}">{{ inventory_object.display_name }}</a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div role="tabpanel" class="tab-pane" id="vlans">
      <table class="table table-hover">
        <thead>
          <tr><th>Name</th><th>VLAN ID</th></tr>
        </thead>
        <tbody>
          {% for vlan in object.vlans.all %}
          <tr>
            <td>{{ vlan.name }}</td>
            <td>{{ vlan.vlanid }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div role="tabpanel" class="tab-pane" id="switches">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>Switch</th>
            <th>Connected Inventory Objects</th>
          </tr>
        </thead>
        <tbody>
          {% for row in switches %}
          <tr>
            <td><a href="{% url 'inventory.switches.detail' row.switch.pk %}">{{ row.switch.label }}</a></td>
            <td>
              <table class="table table-condensed table-no-head">
                {% for port in row.ports %}
                  <tr>
                    <td>{{ port }}</td>
                    <td>
                      {% for l2address in port.l2addresses.all %}
                        {% if l2address.inventory_object in object.inventory_objects.all %}
                          <a href="{% url 'inventory.objects.detail' l2address.inventory_object.pk %}">{{ l2address.inventory_object.display_name }}</a>
                          @ <span class="l2address">{{ l2address }}</span><br />
                        {% endif %}
                      {% endfor %}
                    </td>
                  </tr>
                {% endfor %}
              </table>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

  </div>

  {% include 'common/detail_buttons.html' with object_name=object.name %}

</div>
{% endblock %}