{% 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.btn-group-sm > .btn .mdi {
    font-size: 0.8rem;
    line-height: 1;
  }
  .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-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;
  }
  .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;
  }
</style>

<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 '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 %}

    {# ── Rulebooks → Rulebook → Field → Rule ────────────────────────────── #}
    {% if nsm_rulebook_groups %}
    <div class="border-bottom">
      <div class="nsm-tree-hdr">
        <button type="button"
                class="nsm-tree-toggle"
                data-bs-toggle="collapse"
                data-bs-target="#nsm-cat-rulebook"
                aria-expanded="true"
                aria-label="{% trans 'Toggle Rulebooks' %}">
          <i class="mdi mdi-chevron-right nsm-chev"></i>
        </button>
        <span>{% trans "Rulebooks" %}</span>
        <span class="badge text-bg-secondary ms-1">{{ nsm_unique_rules_total }}</span>
      </div>
      <div id="nsm-cat-rulebook" class="collapse show">
        <div class="nsm-rulebook-accordion"
             id="nsm-accordion"
             data-api-url="{{ nsm_api_url }}">

          {% for group in nsm_rulebook_groups %}
          {% with rb=group.rulebook %}
          <div class="border-top" data-rb-pk="{{ rb.pk }}">
            <div class="nsm-rb-hdr">
              <button type="button"
                      class="nsm-tree-toggle"
                      data-bs-toggle="collapse"
                      data-bs-target="#nsm-rb-{{ rb.pk }}"
                      aria-expanded="true"
                      aria-label="{% blocktrans with rb=rb.name %}Toggle {{ rb }}{% endblocktrans %}">
                <i class="mdi mdi-chevron-right nsm-chev"></i>
              </button>
              {% if group.rules_tab_url %}
              <a href="{{ group.rules_tab_url }}" class="nsm-rb-title-link">{{ rb.name }}</a>
              {% else %}
              <span>{{ rb.name }}</span>
              {% endif %}
              <span class="badge text-bg-secondary ms-1 nsm-rb-count">{{ group.unique_count }}</span>
            </div>
            <div id="nsm-rb-{{ rb.pk }}" class="collapse show">
              {% for fg in group.field_groups %}
              <div class="nsm-rb-field" data-field-pk="{{ fg.field.pk }}">
                <div class="nsm-rb-field-hdr">
                  <button type="button"
                          class="nsm-tree-toggle"
                          data-bs-toggle="collapse"
                          data-bs-target="#nsm-rb-{{ rb.pk }}-f-{{ fg.field.pk }}"
                          aria-expanded="false"
                          aria-label="{% blocktrans with field=fg.field.name %}Toggle {{ field }}{% endblocktrans %}">
                    <i class="mdi mdi-chevron-right nsm-chev"></i>
                  </button>
                  <span>{{ fg.field.name }}</span>
                  <span class="badge text-bg-secondary ms-1 nsm-rb-field-count">{{ fg.rule_count }}</span>
                </div>
                <div id="nsm-rb-{{ rb.pk }}-f-{{ fg.field.pk }}"
                     class="collapse nsm-rb-field-collapse"
                     data-rb-pk="{{ rb.pk }}"
                     data-field-pk="{{ fg.field.pk }}">
                  <ul class="nsm-rb-rule-list nsm-rb-field-rules"
                      data-offset="0"
                      data-has-more="{% if fg.rule_count %}1{% else %}0{% endif %}"
                      data-loaded="0"
                      data-loading="0"></ul>
                  <div class="nsm-rb-field-loading d-none" aria-live="polite">
                    <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                    {% trans "Loading…" %}
                  </div>
                  <div class="nsm-rb-field-sentinel" style="height:1px;"></div>
                </div>
              </div>
              {% endfor %}
            </div>
          </div>
          {% endwith %}
          {% endfor %}

        </div>
      </div>
    </div>
    {% endif %}

    {% if nsm_rulebook_groups and nsm_link_type_groups %}
    <hr class="nsm-link-section-separator">
    {% endif %}

    {# ── ObjectLink type groups (manual assignments) ─────────────────── #}
    {% 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">
                {% if linked.parent_url %}<a href="{{ linked.parent_url }}" class="nsm-link-parent-host text-decoration-none">{{ linked.parent_name }}</a><span class="text-muted" aria-hidden="true"> / </span>{% endif %}<a href="{{ linked.url }}"{% if linked.inherited_from_name %} class="text-muted fst-italic"{% endif %}>{{ linked.name }}</a>{% if linked.status_icon_html %}{{ linked.status_icon_html|safe }}{% endif %}
                {% 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 %}

    {# ── Rulebooks assigned to this object (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 "Rulebooks" %}</span>
        <span class="badge text-bg-secondary ms-1">{{ nsm_enforcer_assignments|length }}</span>
        {% if nsm_enforcer_add_url %}
        <a href="{{ nsm_enforcer_add_url }}"
           class="btn btn-sm btn-ghost-primary ms-auto py-0"
           onclick="event.stopPropagation();"
           title="{% trans 'Assign rulebook' %}"
           aria-label="{% trans 'Assign rulebook' %}">
          <i class="mdi mdi-plus-thick" aria-hidden="true"></i>
        </a>
        {% endif %}
      </button>
      <div id="nsm-cat-enforced" class="collapse show">
        <table class="table table-hover table-sm mb-0 nsm-link-table">
          <tbody>
            {% for assignment in nsm_enforcer_assignments %}
            <tr>
              <td class="col-object">
                <a href="{{ assignment.rulebook.get_absolute_url }}">{{ assignment.rulebook.name }}</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}

    {# ── 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 %}

              {% if iface.rulebook_groups %}
              <div class="nsm-analysis-rulebooks nsm-rulebook-accordion"
                   data-api-url="{{ iface.api_url }}">
                {% for group in iface.rulebook_groups %}
                {% with rb=group.rulebook %}
                <div data-rb-pk="{{ rb.pk }}">
                  <div class="nsm-rb-hdr">
                    <button type="button"
                            class="nsm-tree-toggle"
                            data-bs-toggle="collapse"
                            data-bs-target="#nsm-analysis-iface-{{ iface.pk }}-rb-{{ rb.pk }}"
                            aria-expanded="false"
                            aria-label="{% blocktrans with rb=rb.name %}Toggle {{ rb }}{% endblocktrans %}">
                      <i class="mdi mdi-chevron-right nsm-chev"></i>
                    </button>
                    {% if group.rules_tab_url %}
                    <a href="{{ group.rules_tab_url }}" class="nsm-rb-title-link">{{ rb.name }}</a>
                    {% else %}
                    <span>{{ rb.name }}</span>
                    {% endif %}
                    <span class="badge text-bg-secondary ms-1 nsm-rb-count">{{ group.unique_count }}</span>
                  </div>
                  <div id="nsm-analysis-iface-{{ iface.pk }}-rb-{{ rb.pk }}" class="collapse">
                    {% for fg in group.field_groups %}
                    <div class="nsm-rb-field" data-field-pk="{{ fg.field.pk }}">
                      <div class="nsm-rb-field-hdr">
                        <button type="button"
                                class="nsm-tree-toggle"
                                data-bs-toggle="collapse"
                                data-bs-target="#nsm-analysis-iface-{{ iface.pk }}-rb-{{ rb.pk }}-f-{{ fg.field.pk }}"
                                aria-expanded="false"
                                aria-label="{% blocktrans with field=fg.field.name %}Toggle {{ field }}{% endblocktrans %}">
                          <i class="mdi mdi-chevron-right nsm-chev"></i>
                        </button>
                        <span>{{ fg.field.name }}</span>
                        <span class="badge text-bg-secondary ms-1 nsm-rb-field-count">{{ fg.rule_count }}</span>
                      </div>
                      <div id="nsm-analysis-iface-{{ iface.pk }}-rb-{{ rb.pk }}-f-{{ fg.field.pk }}"
                           class="collapse nsm-rb-field-collapse"
                           data-rb-pk="{{ rb.pk }}"
                           data-field-pk="{{ fg.field.pk }}">
                        <ul class="nsm-rb-rule-list nsm-rb-field-rules"
                            data-offset="0"
                            data-has-more="{% if fg.rule_count %}1{% else %}0{% endif %}"
                            data-loaded="0"
                            data-loading="0"></ul>
                        <div class="nsm-rb-field-loading d-none" aria-live="polite">
                          <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                          {% trans "Loading…" %}
                        </div>
                        <div class="nsm-rb-field-sentinel" style="height:1px;"></div>
                      </div>
                    </div>
                    {% endfor %}
                  </div>
                </div>
                {% endwith %}
                {% endfor %}
              </div>
              {% endif %}
            </div>
          </div>
        </div>
        {% endfor %}
      </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 () {
  document.addEventListener("click", function (e) {
    var link = e.target.closest("a.nsm-security-rule-link");
    if (!link || !(e.ctrlKey || e.metaKey)) {
      return;
    }
    var detailUrl = link.getAttribute("data-detail-url");
    if (detailUrl) {
      e.preventDefault();
      window.location.href = detailUrl;
    }
  });
})();
</script>

<script>
(function () {
  var fieldObservers = new WeakMap();

  function mergeHeaders() {
    return (window.NSM_BRANCH_API && NSM_BRANCH_API.mergeBranchHeaders({'X-Requested-With': 'XMLHttpRequest'}))
      || {'X-Requested-With': 'XMLHttpRequest'};
  }

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

  function setFieldLoading(fieldCollapse, loading) {
    var ruleList = fieldCollapse.querySelector('.nsm-rb-field-rules');
    var loadingEl = fieldCollapse.querySelector('.nsm-rb-field-loading');
    if (ruleList) {
      ruleList.dataset.loading = loading ? '1' : '0';
    }
    if (loadingEl) {
      loadingEl.classList.toggle('d-none', !loading);
    }
  }

  function appendRules(ruleList, results) {
    results.forEach(function (item) {
      var li = document.createElement('li');
      if (item.rule_id) {
        li.dataset.ruleId = String(item.rule_id);
      }
      li.innerHTML =
        '<a href="' + escHtml(item.rule_url) + '" class="nsm-security-rule-link" ' +
        'data-detail-url="' + escHtml(item.rule_detail_url || '') + '" ' +
        'title="Filter rules by name (Ctrl+click: open rule detail)">' +
        escHtml(item.rule_name) + '</a>';
      ruleList.appendChild(li);
    });
  }

  function observeFieldSentinel(fieldCollapse) {
    if (fieldObservers.has(fieldCollapse)) {
      return;
    }
    var sentinel = fieldCollapse.querySelector('.nsm-rb-field-sentinel');
    if (!sentinel) {
      return;
    }
    var observer = new IntersectionObserver(function (entries) {
      if (!entries[0].isIntersecting) {
        return;
      }
      var ruleList = fieldCollapse.querySelector('.nsm-rb-field-rules');
      if (!ruleList || ruleList.dataset.hasMore !== '1' || ruleList.dataset.loading === '1') {
        return;
      }
      fetchFieldRules(fieldCollapse, parseInt(ruleList.dataset.offset || '0', 10));
    }, {root: null, threshold: 0});
    observer.observe(sentinel);
    fieldObservers.set(fieldCollapse, observer);
  }

  function disconnectFieldObserver(fieldCollapse) {
    var observer = fieldObservers.get(fieldCollapse);
    if (observer) {
      observer.disconnect();
      fieldObservers.delete(fieldCollapse);
    }
  }

  function fetchFieldRules(fieldCollapse, offset) {
    var accordion = fieldCollapse.closest('.nsm-rulebook-accordion');
    if (!accordion) {
      return;
    }
    var apiUrl = accordion.dataset.apiUrl;
    var ruleList = fieldCollapse.querySelector('.nsm-rb-field-rules');
    if (!ruleList || ruleList.dataset.loading === '1') {
      return;
    }
    if (ruleList.dataset.hasMore !== '1' && ruleList.dataset.loaded === '1') {
      return;
    }

    setFieldLoading(fieldCollapse, true);
    var url = apiUrl
      + '&rulebook_pk=' + encodeURIComponent(fieldCollapse.dataset.rbPk)
      + '&field_pk=' + encodeURIComponent(fieldCollapse.dataset.fieldPk)
      + '&offset=' + encodeURIComponent(offset || 0);

    fetch(url, {headers: mergeHeaders()})
      .then(function (r) { return r.json(); })
      .then(function (data) {
        appendRules(ruleList, data.results || []);
        ruleList.dataset.offset = String(data.offset || 0);
        ruleList.dataset.hasMore = data.has_more ? '1' : '0';
        ruleList.dataset.loaded = '1';
        setFieldLoading(fieldCollapse, false);
        if (data.has_more) {
          observeFieldSentinel(fieldCollapse);
        } else {
          disconnectFieldObserver(fieldCollapse);
        }
      })
      .catch(function () {
        setFieldLoading(fieldCollapse, false);
      });
  }

  document.querySelectorAll('.nsm-rulebook-accordion').forEach(function (accordion) {
    accordion.addEventListener('shown.bs.collapse', function (e) {
      var fieldCollapse = e.target.closest('.nsm-rb-field-collapse');
      if (!fieldCollapse || !accordion.contains(fieldCollapse)) {
        return;
      }
      var ruleList = fieldCollapse.querySelector('.nsm-rb-field-rules');
      if (!ruleList || ruleList.dataset.loaded === '1' || ruleList.dataset.hasMore !== '1') {
        return;
      }
      fetchFieldRules(fieldCollapse, 0);
    });
  });
})();
</script>