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

{% block extra_controls %}
  {{ block.super }}
  {% if perms.netbox_containers.add_mount %}
    <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:mount_add_from_container' container_id=object.pk %}">
            <i class="mdi mdi-database-plus"></i> Mounts
          </a>
        </li>
        <li>
          <a class="dropdown-item" href="{% url 'plugins:netbox_containers:network_attachment_add_from_container' container_id=object.pk %}">
            <i class="mdi mdi-lan"></i> Networks
          </a>
        </li>
        <li>
          <a class="dropdown-item" href="{% url 'plugins:netbox_containers:containersecret_add_from_container' container_id=object.pk %}">
            <i class="mdi mdi-key-variant"></i> Secrets
          </a>
        </li>
      </ul>
    </div>
  {% endif %}
{% endblock %}

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

    {# --- Container panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">Container</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">Infra</div>
          <div class="col col-md-9">
            {% checkmark object.is_infra %}
          </div>
        </div>

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

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

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

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

        <div class="row mb-2">
          <div class="col col-md-3 text-muted">CPU Limit</div>
          <div class="col col-md-9">
            {% if object.cpu_limit %}{{ object.cpu_limit }}{% 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">Pod</div>
          <div class="col col-md-9">
            {% if object.pod %}{{ object.pod }}{% else %}<span class="text-muted">—</span>{% endif %}
          </div>
        </div>

      </div>
    </div>

    {# --- Environment panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">Environment</h5>
      <div class="card-body">
        {% if object.environment %}
          <pre class="mb-0">{% for item in object.environment %}{{ item }}{% if not forloop.last %}
{% endif %}{% endfor %}</pre>
        {% else %}
          <span class="text-muted">—</span>
        {% endif %}
      </div>
    </div>

    {# --- Add host panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">Add Host</h5>
      <div class="card-body">
        {% 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>

    {# --- Add group panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">Add Group</h5>
      <div class="card-body">
        {% if object.add_group %}
          <pre class="mb-0">{% for item in object.add_group %}{{ item }}{% if not forloop.last %}
{% endif %}{% endfor %}</pre>
        {% else %}
          <span class="text-muted">—</span>
        {% endif %}
      </div>
    </div>

    {# --- Add device panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">Add Device</h5>
      <div class="card-body">
        {% if object.add_device %}
          <pre class="mb-0">{% for item in object.add_device %}{{ item }}{% if not forloop.last %}
{% endif %}{% endfor %}</pre>
        {% else %}
          <span class="text-muted">—</span>
        {% endif %}
      </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">

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

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

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