{% extends 'generic/object.html' %}
{% load helpers %}
{% load netbox_containers_helpers %}

{% 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>

    {# --- Tags panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">Tags</h5>
      <div class="card-body">
        {% if object.tags.count %}
          <div class="d-flex flex-wrap gap-2">
            {% for tag in object.tags.all %}
            <a class="badge text-bg-primary rounded-pill text-decoration-none"
              href="{{ tag.get_absolute_url }}">{{ tag.name }}</a>
            {% endfor %}
          </div>
        {% else %}
          <span class="text-muted">No tags</span>
        {% endif %}
      </div>
    </div>

    {# --- Comments panel --- #}
    <div class="card">
      <h5 class="card-header">Comments</h5>
      <div class="card-body">
        {% if object.comments %}
          <div style="white-space:pre-wrap;">{{ object.comments }}</div>
        {% else %}
          <span class="text-muted">No comments</span>
        {% endif %}
      </div>
    </div>
  </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="card-body">
        {% if object.network_attachments.exists %}
          <div class="table-responsive">
            <table class="table table-hover table-headings">
              <thead>
                <tr>
                  <th>Type</th>
                  <th>Network / Options</th>
                </tr>
              </thead>
              <tbody>
                {% for att in object.network_attachments.all %}
                <tr>
                  <td>{{ att.get_mode_display }}</td>
                  <td>
                    {% if att.network %}
                      <a href="{{ att.network.get_absolute_url }}">{{ att.network }}</a>
                    {% else %}
                      {{ att.options|default:"—" }}
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <span class="text-muted">No networks associated.</span>
        {% endif %}
      </div>
    </div>

    {# --- Containers panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">
        Containers
      </h5>
      <div class="card-body">
        {% if object.containers.exists %}
          <div class="table-responsive">
            <table class="table table-hover table-headings">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Status</th>
                  <th>Image</th>
                  <th>Infra</th>
                </tr>
              </thead>
              <tbody>
                {% for c in object.containers.all|dictsort:"name" %}
                <tr>
                  <td><a href="{{ c.get_absolute_url }}">{{ c }}</a></td>
                  <td>{{ c.get_status_display|default:"—" }}</td>
                  <td>
                    {% if c.image_tag %}
                      {{ c.image_tag }}
                    {% else %}
                      <span class="text-muted">—</span>
                    {% endif %}
                  </td>
                  <td>{{ c.is_infra|render_boolean }}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <span class="text-muted">No containers associated.</span>
        {% endif %}
      </div>
    </div>

    {# --- Devices panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">
        Devices
      </h5>
      <div class="card-body">
        {% if object.devices.exists %}
          <div class="table-responsive">
            <table class="table table-hover table-headings">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Status</th>
                  <th>Primary IPv4</th>
                  <th>Primary IPv6</th>
                </tr>
              </thead>
              <tbody>
                {% for d in object.devices.all|dictsort:"name" %}
                <tr>
                  <td><a href="{{ d.get_absolute_url }}">{{ d }}</a></td>
                  <td>
                    {% with s=d.status %}
                      {% if s == "active" %}
                        <span class="badge text-bg-success rounded-pill">{{ d.get_status_display }}</span>
                      {% elif s == "offline" %}
                        <span class="badge text-bg-secondary rounded-pill">{{ d.get_status_display }}</span>
                      {% elif s == "planned" or s == "staged" %}
                        <span class="badge text-bg-info rounded-pill">{{ d.get_status_display }}</span>
                      {% elif s == "failed" %}
                        <span class="badge text-bg-danger rounded-pill">{{ d.get_status_display }}</span>
                      {% else %}
                        <span class="badge text-bg-light rounded-pill text-body">{{ d.get_status_display }}</span>
                      {% endif %}
                    {% endwith %}
                  </td>
                  <td>
                    {% if d.primary_ip4 %}
                      <a href="{{ d.primary_ip4.get_absolute_url }}">{{ d.primary_ip4 }}</a>
                    {% else %}<span class="text-muted">—</span>{% endif %}
                  </td>
                  <td>
                    {% if d.primary_ip6 %}
                      <a href="{{ d.primary_ip6.get_absolute_url }}">{{ d.primary_ip6 }}</a>
                    {% else %}<span class="text-muted">—</span>{% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <span class="text-muted">No devices associated.</span>
        {% endif %}
      </div>
    </div>

    {# --- Virtual Machines panel --- #}
    <div class="card">
      <h5 class="card-header">
        Virtual Machines
      </h5>
      <div class="card-body">
        {% if object.virtual_machines.exists %}
          <div class="table-responsive">
            <table class="table table-hover table-headings">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Status</th>
                  <th>Primary IPv4</th>
                  <th>Primary IPv6</th>
                </tr>
              </thead>
              <tbody>
                {% for vm in object.virtual_machines.all|dictsort:"name" %}
                <tr>
                  <td><a href="{{ vm.get_absolute_url }}">{{ vm }}</a></td>
                  <td>
                    {% with s=vm.status %}
                      {% if s == "active" %}
                        <span class="badge text-bg-success rounded-pill">{{ vm.get_status_display }}</span>
                      {% elif s == "offline" %}
                        <span class="badge text-bg-secondary rounded-pill">{{ vm.get_status_display }}</span>
                      {% elif s == "planned" or s == "staged" %}
                        <span class="badge text-bg-info rounded-pill">{{ vm.get_status_display }}</span>
                      {% else %}
                        <span class="badge text-bg-light rounded-pill text-body">{{ vm.get_status_display }}</span>
                      {% endif %}
                    {% endwith %}
                  </td>
                  <td>
                    {% if vm.primary_ip4 %}
                      <a href="{{ vm.primary_ip4.get_absolute_url }}">{{ vm.primary_ip4 }}</a>
                    {% else %}<span class="text-muted">—</span>{% endif %}
                  </td>
                  <td>
                    {% if vm.primary_ip6 %}
                      <a href="{{ vm.primary_ip6.get_absolute_url }}">{{ vm.primary_ip6 }}</a>
                    {% else %}<span class="text-muted">—</span>{% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <span class="text-muted">No virtual machines associated.</span>
        {% endif %}
      </div>
    </div>

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