{% load i18n %}
{% include "netbox_nsm/inc/nsm_ip_analyzer_applet_assets.html" %}
<style>
  .nsm-tree-hdr {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 12px; cursor: pointer;
    font-size: 13px; font-weight: 500;
    border: none; background: none; width: 100%; text-align: left;
    color: inherit;
  }
  .nsm-tree-hdr:hover { background: var(--bs-tertiary-bg); }
  .nsm-tree-hdr .nsm-chev {
    font-size: 10px; transition: transform .15s;
    color: var(--bs-secondary-color); flex-shrink: 0;
  }
  .nsm-tree-hdr[aria-expanded="true"] .nsm-chev { transform: rotate(90deg); }
  .nsm-tree-hdr[aria-expanded="false"] .nsm-chev { transform: rotate(0deg); }
  .nsm-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    line-height: 1;
  }
  .nsm-rb-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px 3px 2rem;
    font-size: 12px;
    font-weight: 500;
    width: 100%;
    text-align: left;
    color: inherit;
  }
  .nsm-rb-hdr .nsm-tree-toggle .nsm-chev {
    font-size: 9px;
    transition: transform .15s;
    color: var(--bs-secondary-color);
  }
  .nsm-rb-hdr .nsm-tree-toggle[aria-expanded="true"] .nsm-chev { transform: rotate(90deg); }
  .nsm-rb-hdr .nsm-tree-toggle[aria-expanded="false"] .nsm-chev { transform: rotate(0deg); }
  .nsm-rb-title-link {
    color: inherit;
    text-decoration: none;
    min-width: 0;
  }
  .nsm-rb-title-link:hover {
    color: inherit;
    text-decoration: underline;
  }
  .nsm-rb-field-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px 3px 3.25rem;
    font-size: 12px;
    width: 100%;
    text-align: left;
    color: inherit;
  }
  .nsm-rb-field-hdr .nsm-tree-toggle .nsm-chev {
    font-size: 9px;
    transition: transform .15s;
    color: var(--bs-secondary-color);
  }
  .nsm-rb-field-hdr .nsm-tree-toggle[aria-expanded="true"] .nsm-chev { transform: rotate(90deg); }
  .nsm-rb-field-hdr .nsm-tree-toggle[aria-expanded="false"] .nsm-chev { transform: rotate(0deg); }
  .nsm-rb-rule-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0.35rem 4.5rem;
  }
  .nsm-rb-rule-list > li {
    font-size: 12px;
    line-height: 1.45;
    padding: 0.08rem 0;
  }
  .nsm-rb-field-loading {
    padding: 0.15rem 0 0.35rem 4.5rem;
    font-size: 12px;
    color: var(--bs-secondary-color);
  }
  .nsm-rb-field-loading .spinner-border {
    width: 0.85rem;
    height: 0.85rem;
    border-width: 0.12em;
  }
  .nsm-link-table .col-actions .nsm-link-actions.btn-group-sm > .btn {
    line-height: 1;
    padding: 0.12rem 0.28rem;
  }
  .nsm-link-table .col-actions .nsm-link-actions .nsm-link-edit-menu > .btn {
    line-height: 1;
    padding: 0.12rem 0.28rem;
  }
  .nsm-link-table .col-actions .nsm-link-actions .nsm-link-edit-menu > .dropdown-toggle-split {
    padding-left: 0.18rem;
    padding-right: 0.22rem;
  }
  .nsm-link-table .col-actions .nsm-link-actions.btn-group-sm > .btn .mdi,
  .nsm-link-table .col-actions .nsm-link-actions .nsm-link-edit-menu > .btn .mdi {
    font-size: 0.8rem;
    line-height: 1;
  }
  .nsm-link-objects .htmx-container.table-responsive {
    overflow: visible;
  }
  .nsm-object-status-icon {
    font-size: 0.95rem;
    line-height: 1;
    vertical-align: -0.1em;
    margin-left: 0.2rem;
  }
  .nsm-object-status-icon--deprecated { color: #dc3545 !important; opacity: 1 !important; }
  .nsm-object-status-icon--reserved { color: #fd7e14 !important; opacity: 1 !important; }
  .nsm-link-table {
    table-layout: fixed;
    width: 100%;
  }
  .nsm-link-parent-host { font-size: 12px; }
  .nsm-link-table .col-type {
    width: 9rem;
    font-size: 12px;
    vertical-align: middle;
  }
  .nsm-link-table .col-field {
    font-size: 12px;
    vertical-align: middle;
  }
  .nsm-link-table .col-object {
    width: auto;
    padding-left: 0.75rem;
    font-size: 12px;
    vertical-align: middle;
  }
  .nsm-link-table .col-actions {
    width: 7.25rem;
    vertical-align: middle;
  }
  .nsm-enforcement-rulebooks-table .col-object {
    padding-left: 3.25rem;
  }
  .nsm-link-section-separator {
    border-top: 1px dashed var(--bs-border-color);
    margin: 0;
  }
  .nsm-analysis-iface-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px 3px 2rem;
    font-size: 12px;
    font-weight: 500;
    width: 100%;
    text-align: left;
    color: inherit;
  }
  .nsm-analysis-iface-hdr .nsm-tree-toggle .nsm-chev {
    font-size: 9px;
    transition: transform .15s;
    color: var(--bs-secondary-color);
  }
  .nsm-analysis-iface-hdr .nsm-tree-toggle[aria-expanded="true"] .nsm-chev { transform: rotate(90deg); }
  .nsm-analysis-iface-hdr .nsm-tree-toggle[aria-expanded="false"] .nsm-chev { transform: rotate(0deg); }
  .nsm-analysis-iface-body {
    padding: 0.15rem 12px 0.35rem 3.25rem;
    font-size: 12px;
  }
  .nsm-analysis-link-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-right: 0.35rem;
    margin-bottom: 0.15rem;
  }
  .nsm-analysis-rulebooks {
    margin-top: 0.25rem;
  }
  .nsm-link-objects .nsm-link-controls {
    gap: 0.5rem;
  }
  .nsm-link-objects .nsm-link-controls .form-select {
    font-size: 12px;
    min-width: 12rem;
  }
  .nsm-link-objects .nsm-link-controls .quicksearch .form-control {
    font-size: 13px;
  }
  .nsm-link-objects table.nsm-link-table {
    margin-bottom: 0;
    table-layout: fixed;
    width: 100%;
  }
  .nsm-link-objects table.nsm-link-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bs-secondary-color);
    white-space: nowrap;
  }
  /* Compact type/actions; object content-sized; value/field wrap fully. */
  .nsm-link-objects table.nsm-link-table .col-type {
    width: 14%;
    min-width: 9rem;
    max-width: 14rem;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    vertical-align: middle;
    font-size: 12px;
  }
  .nsm-link-objects table.nsm-link-table .col-object {
    width: 22%;
    min-width: 9rem;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    vertical-align: middle;
    font-size: 12px;
  }
  .nsm-link-objects table.nsm-link-table .col-value {
    width: 32%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    vertical-align: middle;
    font-size: 12px;
  }
  .nsm-link-objects table.nsm-link-table .col-field {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    vertical-align: middle;
    font-size: 12px;
  }
  .nsm-link-objects table.nsm-link-table .col-object,
  .nsm-link-objects table.nsm-link-table thead th.col-object {
    padding-left: 0.75rem;
  }
  .nsm-link-objects table.nsm-link-table .col-actions {
    width: auto;
    min-width: 7.25rem;
    white-space: nowrap;
    vertical-align: middle;
  }
  .nsm-link-value-badge {
    font-weight: 500;
  }
  .nsm-link-paginator .pagination {
    flex-wrap: wrap;
  }
</style>

{% if nsm_security_tab_mode %}
<div class="card">
  <div class="card-body p-0">
{% else %}
<div class="card">
  <h5 class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <span class="text-nowrap">{{ nsm_panel_label }}{% if nsm_security_badge %} <span class="badge text-bg-secondary ms-1">{{ nsm_security_badge }}</span>{% endif %}</span>
    <span class="d-flex gap-1 align-items-center nsm-security-header-actions">
      <span class="d-inline-flex align-items-center gap-1">
        <a href="{{ nsm_analyzer_url }}" class="btn btn-ghost-primary btn-sm"
           title="{% trans 'Object Analyzer' %}"
           aria-label="{% trans 'Object Analyzer' %}">
          <i class="mdi mdi-graph-outline" aria-hidden="true"></i>
        </a>
        {% if nsm_page_addr_analyzable %}
        <button type="button" class="btn btn-ghost-primary btn-sm nsm-ipa-loupe"
                data-ct="{{ nsm_page_object_ct }}"
                data-pk="{{ nsm_page_object_pk }}"
                data-name="{{ nsm_page_object_name|escape }}"
                title="{% trans 'Analyze object' %}"
                aria-label="{% trans 'Analyze object' %}">
          <i class="mdi mdi-magnify" aria-hidden="true"></i>
        </button>
        {% endif %}
      </span>
      <a href="{{ nsm_assign_url }}" class="btn btn-ghost-primary btn-sm">
        <i class="mdi mdi-plus-thick"></i> {% trans "Assign" %}
      </a>
    </span>
  </h5>
  <div class="card-body p-0">
{% endif %}

    {% if not nsm_link_table and not nsm_interface_analysis %}
    <div class="ps-3 py-2 text-muted">{% trans "None" %}</div>
    {% endif %}

    {# ── Linked objects (object-type tabs + value sub-grouping + pagination) ─ #}
    {% include "netbox_nsm/inc/security_link_objects.html" %}

    {# ── Per-interface analysis (Device / VM only) ─────────────────────── #}
    {% if nsm_interface_analysis %}
    <hr class="nsm-link-section-separator">
    <div class="border-bottom">
      <button class="nsm-tree-hdr"
              data-bs-toggle="collapse"
              data-bs-target="#nsm-cat-analysis"
              aria-expanded="true">
        <i class="mdi mdi-chevron-right nsm-chev"></i>
        <span>{% trans "Analysis" %}</span>
        <span class="badge text-bg-secondary ms-1">{{ nsm_interface_analysis|length }}</span>
      </button>
      <div id="nsm-cat-analysis" class="collapse show">
        {% for iface in nsm_interface_analysis %}
        <div class="border-top" data-iface-pk="{{ iface.pk }}">
          <div class="nsm-analysis-iface-hdr">
            <button type="button"
                    class="nsm-tree-toggle"
                    data-bs-toggle="collapse"
                    data-bs-target="#nsm-analysis-iface-{{ iface.pk }}"
                    aria-expanded="true"
                    aria-label="{% blocktrans with name=iface.name %}Toggle {{ name }}{% endblocktrans %}">
              <i class="mdi mdi-chevron-right nsm-chev"></i>
            </button>
            {% if iface.parent_url %}
            <a href="{{ iface.parent_url }}" class="nsm-link-parent-host text-decoration-none">{{ iface.parent_name }}</a>
            <span class="text-muted" aria-hidden="true"> / </span>
            {% endif %}
            {% if iface.url %}
            <a href="{{ iface.url }}" class="nsm-rb-title-link">{{ iface.name }}</a>
            {% else %}
            <span>{{ iface.name }}</span>
            {% endif %}
            <span class="badge text-bg-secondary ms-1">{{ iface.entry_count }}</span>
          </div>
          <div id="nsm-analysis-iface-{{ iface.pk }}" class="collapse show">
            <div class="nsm-analysis-iface-body">
              {% if iface.link_rows %}
              <div class="d-flex flex-wrap align-items-start gap-1 mb-1">
                {% for link in iface.link_rows %}
                <span class="nsm-analysis-link-pill">
                  <span class="text-muted">{{ link.type_label }}:</span>
                  {% if link.url %}
                  <a href="{{ link.url }}">{{ link.name|safe }}</a>
                  {% else %}
                  <span>{{ link.name|safe }}</span>
                  {% endif %}
                </span>
                {% endfor %}
              </div>
              {% endif %}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

  </div>
</div>