{% extends 'generic/object.html' %}
{% load render_table from django_tables2 %}

{% block extra_controls %}
  {{ block.super }}
  {% if perms.netbox_containers.add_networkattachment %}
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="mdi mdi-plus"></i> Add Components
      </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li>
          <a class="dropdown-item" href="{% url 'plugins:netbox_containers:network_attachment_add_from_pod' pod_id=object.pk %}">
            <i class="mdi mdi-lan"></i> Networks
          </a>
        </li>
      </ul>
    </div>
  {% endif %}
{% endblock %}

{% block content %}
<div class="row gx-3">
  {# ================= LEFT COLUMN ================= #}
  <div class="col-12 col-xl-6">

    {# --- Pod panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">Pod</h5>
      <div class="card-body">

        <div class="row mb-2">
          <div class="col col-md-3 text-muted">Name</div>
          <div class="col col-md-9">{{ object.name }}</div>
        </div>

        <div class="row mb-2">
          <div class="col col-md-3 text-muted">User</div>
          <div class="col col-md-9">
            {% if object.user %}{{ object.user }}{% else %}<span class="text-muted">—</span>{% endif %}
          </div>
        </div>

        <div class="row mb-2">
          <div class="col col-md-3 text-muted">Status</div>
          <div class="col col-md-9">
            {% if object.status %}{{ object.status }}{% else %}<span class="text-muted">—</span>{% endif %}
          </div>
        </div>

        <div class="row mb-2">
          <div class="col col-md-3 text-muted">Published Ports</div>
          <div class="col col-md-9">
            {% if object.published_ports %}
              <div style="white-space:pre-wrap;">{{ object.published_ports }}</div>
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </div>
        </div>

        <div class="row mb-2">
          <div class="col col-md-3 text-muted">Add Host</div>
          <div class="col col-md-9">
            {% if object.add_host %}
              <pre class="mb-0">{% for item in object.add_host %}{{ item }}{% if not forloop.last %}
{% endif %}{% endfor %}</pre>
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </div>
        </div>

        <div class="row mb-2">
          <div class="col col-md-3 text-muted">Infra Container</div>
          <div class="col col-md-9">
            {% if object.infra_container %}
              <a href="{{ object.infra_container.get_absolute_url }}">{{ object.infra_container }}</a>
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </div>
        </div>

      </div>
    </div>

    <div class="mb-3">
      {% include 'inc/panels/tags.html' %}
    </div>
    {% include 'inc/panels/comments.html' %}
  </div>

  {# ================= RIGHT COLUMN ================= #}
  <div class="col-12 col-xl-6">

    {# --- Networks panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">
        Networks
      </h5>
      <div class="table-responsive">
        {% render_table networks_table %}
      </div>
    </div>

    {# --- Containers panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">
        Containers
      </h5>
      <div class="table-responsive">
        {% render_table containers_table %}
      </div>
    </div>

    {# --- Devices panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">
        Devices
      </h5>
      <div class="table-responsive">
        {% render_table devices_table %}
      </div>
    </div>

    {# --- Virtual Machines panel --- #}
    <div class="card">
      <h5 class="card-header">
        Virtual Machines
      </h5>
      <div class="table-responsive">
        {% render_table vms_table %}
      </div>
    </div>

  </div>
</div>
{% endblock %}