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

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

    {# --- Network panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">Network</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">Driver</div>
          <div class="col col-md-9">
            {% if object.driver %}{{ object.driver }}{% else %}<span class="text-muted">—</span>{% endif %}
          </div>
        </div>

        {# Subnets: linked Prefixes + free-text CIDRs #}
        <div class="row mb-2">
          <div class="col col-md-3 text-muted">Subnets</div>
          <div class="col col-md-9">
            {% if object.prefixes.exists %}
              {% for p in object.prefixes.all %}
                <a href="{{ p.get_absolute_url }}">{{ p.prefix }}</a>{% if not forloop.last or object.subnets_text %}, {% endif %}
              {% endfor %}
            {% endif %}
            {% if object.subnets_text %}
              {% for s in object.subnets_text %}
                {{ s }}{% if not forloop.last %}, {% endif %}
              {% endfor %}
            {% endif %}
            {% if not object.prefixes.exists and not object.subnets_text %}
              <span class="text-muted">—</span>
            {% endif %}
          </div>
        </div>

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

        <div class="row mb-2">
          <div class="col col-md-3 text-muted">Label</div>
          <div class="col col-md-9">
            {% if object.label %}{{ object.label }}{% 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">

    {# --- Pods panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">
        Pods
      </h5>
      <div class="table-responsive">
        {% render_table pods_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 %}