{% comment %}
ACI Context panel injected into the dcim.Device detail view.

Layout follows NetBox's stock "Device Type" card pattern:

  * Outer ``<div class="card">`` wrapper.
  * ``<table class="table table-hover attr-table">`` rendering a two-
    column definition list (label | value) for the summary attributes.
    The ``attr-table`` class is what gives the screenshot's compact
    "Device Type" look. ``|linkify`` auto-renders FKs as anchor tags
    and ``|placeholder`` renders an em-dash when a value is blank.
  * Subordinate sections (bindings table, L3Out logical nodes) render
    as their own cards so they stack cleanly underneath the summary.

If the device has no ACI link at all the view returns "" upstream, so
nothing renders.
{% endcomment %}
{% load helpers %}
{% load i18n %}

<div class="card">
  <h2 class="card-header">{% trans "Cisco ACI Context" %}</h2>
  <table class="table table-hover attr-table">
    <tr>
      <th scope="row">{% trans "Fabric" %}</th>
      <td>{{ aci_fabric|linkify|placeholder }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "Pod" %}</th>
      <td>{{ aci_pod|linkify|placeholder }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "ACI Node" %}</th>
      <td>{{ aci_node|linkify|placeholder }}</td>
    </tr>
    {% if aci_node and aci_node.node_id %}
      <tr>
        <th scope="row">{% trans "Node ID" %}</th>
        <td>{{ aci_node.node_id }}</td>
      </tr>
    {% endif %}
    {% if aci_node and aci_node.role %}
      <tr>
        <th scope="row">{% trans "Role" %}</th>
        <td>{{ aci_node.get_role_display }}</td>
      </tr>
    {% endif %}
    <tr>
      <th scope="row">{% trans "EPGs" %}</th>
      <td>{{ epg_count }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "Bridge Domains" %}</th>
      <td>{{ bd_count }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "VRFs" %}</th>
      <td>{{ vrf_count }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "Static Port Bindings" %}</th>
      <td>{{ binding_count }}</td>
    </tr>
    {% if logical_nodes %}
      <tr>
        <th scope="row">{% trans "L3Out Logical Nodes" %}</th>
        <td>{{ logical_nodes|length }}</td>
      </tr>
    {% endif %}
  </table>
</div>

{% if static_port_bindings %}
  <div class="card">
    <h2 class="card-header">
      {% trans "Static Port Bindings" %}
      <span class="badge text-bg-secondary">{{ binding_count }}</span>
    </h2>
    <table class="table table-hover object-list">
      <thead>
        <tr>
          <th>{% trans "Interface" %}</th>
          <th>{% trans "EPG" %}</th>
          <th>{% trans "Bridge Domain" %}</th>
          <th>{% trans "VRF" %}</th>
          <th>{% trans "Encap VLAN" %}</th>
          <th>{% trans "Mode" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for b in static_port_bindings %}
          <tr>
            <td>{{ b.dcim_interface|linkify }}</td>
            <td>{{ b.aci_endpoint_group|linkify }}</td>
            <td>{{ b.aci_endpoint_group.aci_bridge_domain|linkify|placeholder }}</td>
            <td>
              {% if b.aci_endpoint_group.aci_bridge_domain %}
                {{ b.aci_endpoint_group.aci_bridge_domain.aci_vrf|linkify|placeholder }}
              {% else %}{{ ""|placeholder }}{% endif %}
            </td>
            <td>{{ b.encap_vlan }}</td>
            <td>{{ b.get_mode_display }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endif %}

{% if logical_node_static_routes %}
  {# One card per logical node, each rendered as its own attr-table        #}
  {# (matching the 'Device Type' / 'Cisco ACI Context' layout). Per-node   #}
  {# static routes get their own dedicated row whose value cell either    #}
  {# carries the routes table or the |placeholder em-dash.                #}
  <div class="card">
    <h2 class="card-header">
      {% trans "L3Out Logical Nodes" %}
      <span class="badge text-bg-secondary">{{ logical_node_static_routes|length }}</span>
    </h2>
    {% for ln, node_routes in logical_node_static_routes %}
      <table class="table table-hover attr-table mb-0">
        <tr>
          <th scope="row">{% trans "Logical Node" %}</th>
          <td>{{ ln|linkify }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "L3Out" %}</th>
          <td>{{ ln.aci_logical_node_profile.aci_l3out|linkify|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Logical Node Profile" %}</th>
          <td>{{ ln.aci_logical_node_profile|linkify|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Router ID" %}</th>
          <td>{{ ln.router_id|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Loopback Address" %}</th>
          <td>
            {% if ln.use_router_id_as_loopback %}
              <span class="text-muted">{% trans "Router ID" %}</span>
            {% else %}
              {{ ln.loopback_address|placeholder }}
            {% endif %}
          </td>
        </tr>
        <tr>
          <th scope="row">{% trans "Static Routes" %}</th>
          <td>
            {% if node_routes %}
              <table class="table table-hover table-sm mb-0">
                <thead>
                  <tr>
                    <th>{% trans "Prefix" %}</th>
                    <th>{% trans "Preference" %}</th>
                  </tr>
                </thead>
                <tbody>
                  {% for route in node_routes %}
                    <tr>
                      <td>{{ route|linkify }}</td>
                      <td>{{ route.preference }}</td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            {% else %}{{ ""|placeholder }}{% endif %}
          </td>
        </tr>
      </table>
      {% if not forloop.last %}<hr class="my-0">{% endif %}
    {% endfor %}
  </div>
{% endif %}