{% 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-rb-hdr {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 12px 3px 24px; cursor: pointer;
    font-size: 12px; border: none; background: none;
    width: 100%; text-align: left; color: inherit;
  }
  .nsm-rb-hdr:hover { background: var(--bs-tertiary-bg); }
  .nsm-rb-hdr .nsm-chev {
    font-size: 9px; transition: transform .15s;
    color: var(--bs-secondary-color); flex-shrink: 0;
  }
  .nsm-rb-hdr[aria-expanded="true"] .nsm-chev { transform: rotate(90deg); }
  .nsm-rb-hdr[aria-expanded="false"] .nsm-chev { transform: rotate(0deg); }
  .nsm-fg-hdr {
    display: block;
    font-size: 11px;
    color: var(--bs-secondary-color);
    border-top: 1px solid var(--bs-border-color-translucent);
    padding: 0.25rem 0 0.25rem 2.25rem;
    text-decoration: none;
  }
  .nsm-fg-hdr:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
  }
  .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.btn-group-sm > .btn .mdi {
    font-size: 0.8rem;
    line-height: 1;
  }
  .nsm-link-table {
    table-layout: fixed;
    width: 100%;
  }
  .nsm-link-table .col-object {
    width: auto;
    padding-left: 3rem;
    font-size: 12px;
    vertical-align: middle;
  }
  .nsm-link-table .col-comment {
    font-size: 11px;
    color: var(--bs-secondary-color);
    vertical-align: middle;
  }
  .nsm-link-table .col-actions {
    width: 7.25rem;
    vertical-align: middle;
  }
</style>

<div class="card">
  <h5 class="card-header d-flex justify-content-between align-items-center">
    <span>{{ 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 'Objekt analysieren' %}"
                aria-label="{% trans 'Objekt analysieren' %}">
          <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">

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

    {# ── Rulebook section ──────────────────────────────────────────────── #}
    {% if nsm_rulebook_groups %}
    <div class="border-bottom">
      <button class="nsm-tree-hdr"
              data-bs-toggle="collapse"
              data-bs-target="#nsm-cat-rulebook"
              aria-expanded="true">
        <i class="mdi mdi-chevron-right nsm-chev"></i>
        <span>{% trans "Rulebook" %}</span>
        <span class="badge text-bg-secondary ms-1">{{ nsm_unique_rules_total }}</span>
      </button>
      <div id="nsm-cat-rulebook" class="collapse show">
        <div class="nsm-rulebook-accordion"
             id="nsm-accordion"
             data-api-url="{{ nsm_api_url }}"
             data-next-offset="{{ nsm_next_offset }}"
             data-has-more="{% if nsm_has_more %}1{% else %}0{% endif %}">

          {% for group in nsm_rulebook_groups %}
          {% with rb=group.rulebook %}
          <div class="border-top" data-rb-pk="{{ rb.pk }}">
            <button class="nsm-rb-hdr"
                    data-bs-toggle="collapse"
                    data-bs-target="#nsm-rb-{{ rb.pk }}"
                    aria-expanded="false">
              <i class="mdi mdi-chevron-right nsm-chev"></i>
              {% if rb.get_rules_tab_url %}<a href="{{ rb.get_rules_tab_url }}" class="text-body" onclick="event.stopPropagation()">{{ rb.name }}</a>{% else %}<span>{{ rb.name }}</span>{% endif %}
              <span class="badge text-bg-secondary ms-1 nsm-rb-count">{{ group.unique_count }}</span>
            </button>
            <div id="nsm-rb-{{ rb.pk }}" class="collapse">
              {% for fg in group.field_groups %}
              <div class="nsm-fg" data-field-pk="{{ fg.field.pk }}">
                {% if fg.filter_url %}
                <a href="{{ fg.filter_url }}"
                   class="nsm-fg-hdr"
                   title="{% blocktrans with rb=rb.name field=fg.field.name %}Filter rules in {{ rb }} by {{ field }}{% endblocktrans %}">
                  <i class="mdi mdi-arrow-right-thin"></i> {{ fg.field.name }}
                </a>
                {% else %}
                <div class="nsm-fg-hdr" style="cursor: default;">
                  <i class="mdi mdi-arrow-right-thin"></i> {{ fg.field.name }}
                </div>
                {% endif %}
                <table class="table table-hover table-sm mb-0">
                  <tbody class="nsm-fg-tbody">
                    {% for rule in fg.rules %}
                    <tr>
                      <td style="font-size:12px; padding-left:3.25rem;">
                        <a href="{{ rule.get_rules_grid_filter_url }}"
                           class="nsm-security-rule-link"
                           data-rule-detail-url="{{ rule.get_absolute_url }}"
                           title="{% trans 'Filter in Rules grid (Ctrl+click: rule detail)' %}">{{ rule.name }}</a>
                      </td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
              {% endfor %}
            </div>
          </div>
          {% endwith %}
          {% endfor %}

          {# sentinel for infinite scroll #}
          <div class="nsm-sentinel" style="height:1px;"></div>
        </div>
      </div>
    </div>
    {% endif %}

    {# ── ObjectLink type groups ──────────────────────────────────────── #}
    {% for group in nsm_link_type_groups %}
    <div class="border-bottom">
      <button class="nsm-tree-hdr"
              data-bs-toggle="collapse"
              data-bs-target="#nsm-cat-{{ group.type_key }}"
              aria-expanded="true">
        <i class="mdi mdi-chevron-right nsm-chev"></i>
        <span>{{ group.type_label }}</span>
        <span class="badge text-bg-secondary ms-1">{{ group.count }}</span>
      </button>
      <div id="nsm-cat-{{ group.type_key }}" class="collapse show">
        <div {% if group.count > 15 %}style="max-height:420px;overflow-y:auto;"{% endif %}>
        <table class="table table-hover table-sm mb-0 nsm-link-table">
          <tbody>
            {% for linked in group.objects %}
            <tr class="nsm-link-row">
              <td class="col-object">
                <a href="{{ linked.url }}"{% if linked.inherited_from_name %} class="text-muted fst-italic"{% endif %}>{{ linked.name }}</a>
                {% if linked.inherited_from_name %}
                <span class="text-muted" style="font-size:11px;">
                  ({% trans "from" %} <a href="{{ linked.inherited_from_url }}" class="text-muted">{{ linked.inherited_from_name }}</a>)
                </span>
                {% endif %}
              </td>
              {% if group.show_comment %}<td class="col-comment">{{ linked.comment|default:"" }}</td>{% endif %}
              {% if group.show_actions %}<td class="col-actions pe-2 text-end" style="white-space:nowrap;">
                {% if linked.supports_addr_analysis or linked.edit_url or linked.delete_url %}
                <span class="btn-group btn-group-sm nsm-link-actions" role="group">
                  {% if linked.supports_addr_analysis %}
                  <button type="button" class="btn btn-light btn-sm nsm-ipa-loupe"
                          data-ct="{{ linked.ct_id }}"
                          data-pk="{{ linked.obj_id }}"
                          data-name="{{ linked.name|escape }}"
                          title="{% trans 'Objekt analysieren' %}"
                          aria-label="{% trans 'Objekt analysieren' %}">
                    <i class="mdi mdi-magnify text-dark" aria-hidden="true"></i>
                  </button>
                  {% endif %}
                  {% if linked.edit_url %}
                  <a href="{{ linked.edit_url }}" class="btn btn-warning btn-sm"
                     title="{% trans 'Edit assignment' %}" aria-label="{% trans 'Edit assignment' %}">
                    <i class="mdi mdi-pencil" aria-hidden="true"></i>
                  </a>
                  {% endif %}
                  {% if linked.delete_url %}
                  <a href="{{ linked.delete_url }}" class="btn btn-danger btn-sm"
                     title="{% trans 'Remove assignment' %}" aria-label="{% trans 'Remove assignment' %}">
                    <i class="mdi mdi-trash-can-outline" aria-hidden="true"></i>
                  </a>
                  {% endif %}
                </span>
                {% endif %}
              </td>{% endif %}
            </tr>
            {% endfor %}
          </tbody>
        </table>
        </div>
      </div>
    </div>
    {% endfor %}

    {# ── Enforced Rulebooks (Device / VM / VDC only) ───────────────────── #}
    {% if nsm_enforcer_assignments %}
    <div class="border-bottom">
      <button class="nsm-tree-hdr"
              data-bs-toggle="collapse"
              data-bs-target="#nsm-cat-enforced"
              aria-expanded="true">
        <i class="mdi mdi-chevron-right nsm-chev"></i>
        <span>{% trans "Enforced Rulebooks" %}</span>
        <span class="badge text-bg-secondary ms-1">{{ nsm_enforcer_assignments|length }}</span>
      </button>
      <div id="nsm-cat-enforced" class="collapse show">
        <table class="table table-hover table-sm mb-0">
          <tbody>
            {% for assignment in nsm_enforcer_assignments %}
            <tr>
              <td class="ps-5" style="font-size:12px;">
                <a href="{{ assignment.rulebook.get_absolute_url }}">{{ assignment.rulebook.name }}</a>
                <span class="badge text-bg-secondary ms-1" style="font-size:10px;">{{ assignment.rulebook.get_rulebook_type_display }}</span>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}

  </div>
</div>

<script src="{% url 'plugins:netbox_nsm:plugin_asset' asset_path='js/nsm_branch_api.js' %}?v=1"></script>
<script>
(function () {
  function nsmFetch(url, options) {
    if (window.NSM_BRANCH_API && window.NSM_BRANCH_API.fetch) {
      return window.NSM_BRANCH_API.fetch(url, options);
    }
    return fetch(url, options);
  }

  document.addEventListener("click", function (e) {
    var link = e.target.closest("a.nsm-security-rule-link");
    if (!link || !(e.ctrlKey || e.metaKey)) {
      return;
    }
    var detail = link.getAttribute("data-rule-detail-url");
    if (detail) {
      e.preventDefault();
      window.location.href = detail;
    }
  });
})();
</script>

<script>
(function () {
  var accordion = document.querySelector('.nsm-rulebook-accordion');
  if (!accordion || accordion.dataset.hasMore !== '1') return;

  var loading = false;
  var sentinel = accordion.querySelector('.nsm-sentinel');

  function appendItems(results) {
    results.forEach(function (item) {
      var rbPk = String(item.rulebook_pk || 0);
      var rbColId = 'nsm-rb-' + rbPk;
      var existing = accordion.querySelector('[data-rb-pk="' + rbPk + '"]');
      var collapseDiv;

      if (existing) {
        collapseDiv = document.getElementById(rbColId);
      } else {
        var rbLink = item.rulebook_url
          ? '<a href="' + escHtml(item.rulebook_url) + '" class="text-body" onclick="event.stopPropagation()">' + escHtml(item.rulebook_name) + '</a>'
          : escHtml(item.rulebook_name);

        var div = document.createElement('div');
        div.className = 'border-top';
        div.dataset.rbPk = rbPk;
        div.innerHTML =
          '<button class="nsm-rb-hdr" data-bs-toggle="collapse" data-bs-target="#' + rbColId + '" aria-expanded="false">' +
            '<i class="mdi mdi-chevron-right nsm-chev"></i>' +
            rbLink +
            '<span class="badge text-bg-secondary ms-1 nsm-rb-count">0</span>' +
          '</button>' +
          '<div id="' + rbColId + '" class="collapse"></div>';
        accordion.insertBefore(div, sentinel);
        collapseDiv = div.querySelector('.collapse');
      }

      var fieldPk = String(item.field_pk || 0);
      var fgDiv = collapseDiv.querySelector('[data-field-pk="' + fieldPk + '"]');
      if (!fgDiv) {
        fgDiv = document.createElement('div');
        fgDiv.className = 'nsm-fg';
        fgDiv.dataset.fieldPk = fieldPk;
        var fgHdr = item.field_filter_url
          ? '<a href="' + escHtml(item.field_filter_url) + '" class="nsm-fg-hdr">' +
              '<i class="mdi mdi-arrow-right-thin"></i> ' + escHtml(item.field_name) +
            '</a>'
          : '<div class="nsm-fg-hdr" style="cursor:default;">' +
              '<i class="mdi mdi-arrow-right-thin"></i> ' + escHtml(item.field_name) +
            '</div>';
        fgDiv.innerHTML =
          fgHdr +
          '<table class="table table-hover table-sm mb-0"><tbody class="nsm-fg-tbody"></tbody></table>';
        collapseDiv.appendChild(fgDiv);
      }

      var tbody = fgDiv.querySelector('.nsm-fg-tbody');
      var tr = document.createElement('tr');
      tr.innerHTML =
        '<td style="font-size:12px; padding-left:3.25rem;">' +
          '<a href="' + escHtml(item.rule_url) + '" class="nsm-security-rule-link" ' +
          'data-rule-detail-url="' + escHtml(item.rule_detail_url || item.rule_url) + '" ' +
          'title="Filter in Rules grid (Ctrl+click: rule detail)">' +
          escHtml(item.rule_name) + '</a>' +
        '</td>';
      tbody.appendChild(tr);
    });
  }

  var observer = new IntersectionObserver(function (entries) {
    if (!entries[0].isIntersecting || loading) return;
    if (accordion.dataset.hasMore !== '1') { observer.disconnect(); return; }

    loading = true;
    var url = accordion.dataset.apiUrl + '&offset=' + accordion.dataset.nextOffset;
    fetch(url, {headers: (window.NSM_BRANCH_API && NSM_BRANCH_API.mergeBranchHeaders({'X-Requested-With': 'XMLHttpRequest'})) || {'X-Requested-With': 'XMLHttpRequest'}})
      .then(function (r) { return r.json(); })
      .then(function (data) {
        appendItems(data.results);
        accordion.dataset.nextOffset = data.offset;
        accordion.dataset.hasMore = data.has_more ? '1' : '0';
        if (!data.has_more) observer.disconnect();
        loading = false;
      })
      .catch(function () { loading = false; });
  }, {root: null, threshold: 0});

  observer.observe(sentinel);

  function escHtml(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }
})();
</script>