{% macro show_tree(assets, current_asset_name) %}
  <div class="container pb-4" style="position: relative;">
    {# touch-action: none keeps the browser from scrolling/zooming the page
       on touch gestures inside the tree, so one-finger drags pan the chart
       and two-finger pinches zoom it. #}
    <div id="view-scroll" style="width: 100%; height: 75vh; min-height: 500px; overflow-y: auto; overflow-x: hidden; touch-action: none; border-radius: 8px; border: 1px solid #e2e8f0; background-color: #f8fafc; box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);">
      <div id="view-zoom" style="width: 100%; height: 100%; transform-origin: center center; transition: transform 0.12s ease;">
        <div id="view" style="width: 100%; height: 100%;"></div>
      </div>
    </div>
    <!-- Zoom controls (overlaid on the top-right of the tree) -->
    <div class="btn-group btn-group-sm" role="group" aria-label="Zoom"
         style="position: absolute; top: 12px; right: 24px; z-index: 5; box-shadow: 0 1px 4px rgba(0,0,0,0.15);">
      <button type="button" id="treeZoomOut" class="btn btn-light border" title="Zoom out">&minus;</button>
      <button type="button" id="treeZoomReset" class="btn btn-light border" title="Reset zoom">Reset</button>
      <button type="button" id="treeZoomIn" class="btn btn-light border" title="Zoom in">+</button>
    </div>
  </div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
  window.onload = function(){

  let assets = {{ assets | safe }};
  let currentAssetName = {{ current_asset_name | tojson }};

      // 1. Build hierarchy from flat list
      let assetMap = {};
      let rootNodes = [];

      assets.forEach(asset => {
        assetMap[asset.id] = {
          name: asset.name,
          ...asset,
          children: []
        };
      });

      assets.forEach(asset => {
        if (asset.parent === null || asset.parent === undefined) {
          rootNodes.push(assetMap[asset.id]);
        } else {
          if (assetMap[asset.parent]) {
            assetMap[asset.parent].children.push(assetMap[asset.id]);
          } else {
            rootNodes.push(assetMap[asset.id]);
          }
        }
      });

      var scrollDom = document.getElementById('view-scroll');
      var chartDom = document.getElementById('view');
      // SVG renderer so the tree stays crisp when zoomed in.
      var myChart = echarts.init(chartDom, null, { renderer: 'svg' });

      // Current zoom level. Zoom is applied by RE-RENDERING the tree at a new
      // scale (node sizes + layout margins) while the canvas stays a fixed size,
      // so the tree shrinks/grows within the gray area like a map - the area
      // itself never changes size.
      var zoomFactor = 1;

      // ------------------------------------------------------------------
      // Layout policy, per parent whose children are leaves ("a family"):
      // keep the leaf children in ONE row until the canvas width is
      // exhausted (at the 50px reference box), then use TWO balanced rows
      // (top row at most 1 wider than the bottom), never more; when even
      // two rows don't fit the width, the box size shrinks below the
      // reference, i.e. the whole tree zooms out (wheel-zoom recovers
      // detail). Non-leaf children and the "Add asset" action node each
      // get their own row, recursively.
      //
      // Family connectors are routed to invisible "port" nodes on the
      // top/bottom edge of each leaf box, so top-row connectors arrive
      // from above and bottom-row connectors from below, keeping the lane
      // between the two rows clean. Parents connect from their side.
      // ------------------------------------------------------------------
      var BOX_REF = 50;      // reference (minimum comfortable) box size
      var GAP_RATIO = 0.28;  // vertical gap as a fraction of box size

      function isAddAsset(node) { return node.name === 'Add asset'; }

      // Leaf children go into the family grid; internal children and the
      // "Add asset" button each get their own row.
      function splitKids(node) {
        var kids = node.children || [];
        return {
          gridKids: kids.filter(function(k) { return !(k.children || []).length && !isAddAsset(k); }),
          rowKids: kids.filter(function(k) { return (k.children || []).length || isAddAsset(k); })
        };
      }

      function depthOf(node) {
        var d = 0;
        (node.children || []).forEach(function(k) { d = Math.max(d, 1 + depthOf(k)); });
        return d;
      }

      function updateChart(animate) {
        var viewportH = scrollDom.clientHeight;
        // Keep the drawing canvas the SAME size as the gray container at
        // every zoom level; zooming happens inside the canvas.
        chartDom.style.height = viewportH + 'px';
        myChart.resize();
        var W = chartDom.clientWidth || 1000;

        // One x position per tree level (ancestors -> current -> children
        // -> grandchildren); the deepest level's grid columns extend to
        // the right from there.
        var levels = 1;
        rootNodes.forEach(function(rt) { levels = Math.max(levels, 1 + depthOf(rt)); });
        var colPitch = levels > 1 ? Math.min(0.60 * W / (levels - 1), 0.30 * W) : 0;
        function colX(d) { return 0.08 * W + d * colPitch; }

        // Horizontal room for a grid block whose leaf column sits at level d.
        function gridBudget(d) { return W - colX(d) - 8; }
        function colsFitAt(d) {
          return Math.max(1, Math.floor((gridBudget(d) - BOX_REF * 0.5) / (BOX_REF * 1.35)) + 1);
        }
        // One row while it fits; else two balanced rows, top at most 1 wider.
        function colsFor(n, d) {
          if (!n) return 1;
          var fit = colsFitAt(d);
          return n <= fit ? n : Math.ceil(n / 2);
        }

        // Pre-pass: total rows (drives the vertical fit) and the widest
        // grid block (drives the horizontal cap on the box size).
        var hCap = Infinity;
        function rowsOf(node, d) {
          var s = splitKids(node);
          if (!s.gridKids.length && !s.rowKids.length) return 1;
          var r = 0;
          if (s.gridKids.length) {
            var cols = colsFor(s.gridKids.length, d + 1);
            r += Math.ceil(s.gridKids.length / cols);
            hCap = Math.min(hCap, gridBudget(d + 1) / ((cols - 1) * 1.35 + 0.5));
          }
          s.rowKids.forEach(function(k) { r += rowsOf(k, d + 1); });
          return Math.max(r, 1);
        }
        var totalRows = 0;
        rootNodes.forEach(function(rt) { totalRows += rowsOf(rt, 0); });

        // Box size: fit the viewport vertically, clamped to a legible
        // range, then capped so the widest grid block still fits the
        // width. Two rows is the maximum, so very wide families lower the
        // box size (the tree zooms out) instead of wrapping further.
        var fitBox = (viewportH * 0.92 / Math.max(totalRows + 1, 5)) / (1 + GAP_RATIO);
        var BOX_SIZE = Math.round(Math.min(
          Math.max(BOX_REF, Math.min(104, fitBox)),
          Math.max(20, hCap)
        ));
        var slotY = BOX_SIZE * (1 + GAP_RATIO);   // vertical row pitch
        var colGapX = BOX_SIZE * 1.35;            // horizontal grid column pitch
        var blockGap = slotY * 0.55;              // gap between family blocks

        // Labels (text + icon) are drawn by ECharts at a fixed on-screen
        // size, unaffected by the view's zoom transform - so derive all
        // label metrics from the EFFECTIVE on-screen box size instead.
        // Since every zoom step re-renders, zooming in re-wraps names at a
        // larger, more legible size, and zooming out shrinks them with the
        // box instead of letting them pour out of it.
        var BOX_EFF = BOX_SIZE * zoomFactor;
        var SHOW_LABELS = BOX_EFF >= 24;  // below this, text is just noise
        var ICON_SIZE = Math.max(4, Math.floor(BOX_EFF * 0.26));
        var FONT_SIZE = Math.max(6, Math.round(BOX_EFF * 0.13));
        var LINE_H = FONT_SIZE + 2;

        // How many text lines fit under the icon, inside the box?
        var textBudget = BOX_EFF - ICON_SIZE - 10;
        var MAX_LINES = Math.min(3, Math.max(1, Math.floor(textBudget / LINE_H)));
        // Approx chars per line at this font (~0.56em average glyph width).
        var charsPerLine = Math.max(4, Math.floor((BOX_EFF - 12) / (FONT_SIZE * 0.56)));

        // Deterministically wrap a name into at most MAX_LINES lines, breaking on
        // spaces where possible and ellipsising the overflow. We do this ourselves
        // rather than rely on ECharts' rich-text width wrapping, which proved
        // unreliable for long names (they would overflow the box horizontally).
        function wrapName(name) {
          var words = String(name).split(/\s+/);
          var lines = [];
          var cur = '';
          function pushHardWrapped(word) {
            while (word.length > charsPerLine) {
              lines.push(word.slice(0, charsPerLine));
              word = word.slice(charsPerLine);
            }
            return word;
          }
          for (var i = 0; i < words.length; i++) {
            var w = words[i];
            var candidate = cur ? (cur + ' ' + w) : w;
            if (candidate.length <= charsPerLine) {
              cur = candidate;
            } else {
              if (cur) { lines.push(cur); cur = ''; }
              if (w.length > charsPerLine) { w = pushHardWrapped(w); }
              cur = w;
            }
          }
          if (cur) lines.push(cur);
          if (lines.length > MAX_LINES) {
            lines = lines.slice(0, MAX_LINES);
            var last = lines[MAX_LINES - 1];
            lines[MAX_LINES - 1] = last.slice(0, Math.max(1, charsPerLine - 1)).trimEnd() + '…';
          }
          return lines.join('\n');
        }

        // Per-node style (same look as before: white round rects, gold
        // current asset, green "Add asset" button).
        function nodeStyles(node) {
          var isCurrent = node.name === currentAssetName;
          var isAdd = isAddAsset(node);

          var displayName = wrapName(node.name);
          var rich = {
            text: {
              width:      BOX_EFF - 6,
              overflow:   'truncate',
              align:      'center',
              fontSize:   FONT_SIZE,
              lineHeight: LINE_H,
              padding:    [2, 0, 0, 0]
            }
          };
          if (node.icon) {
            rich['icon_' + node.id] = {
              backgroundColor: { image: node.icon },
              height: ICON_SIZE,
              width:  ICON_SIZE,
              align:  'center'
            };
          }

          return {
            symbol: 'roundRect',
            symbolSize: isCurrent
              ? [BOX_SIZE * 1.08, BOX_SIZE * 1.08]
              : [BOX_SIZE, BOX_SIZE],
            label: {
              show:       SHOW_LABELS,
              position:   'inside',
              color:      isCurrent ? '#000000' : (isAdd ? '#ffffff' : '#1e293b'),
              fontSize:   FONT_SIZE,
              fontWeight: isCurrent ? 'bold' : '600',
              fontFamily: 'system-ui, -apple-system, sans-serif',
              formatter: (function(n, dn) {
                return function() {
                  return n.icon
                    ? ('{icon_' + n.id + '|}\n{text|' + dn + '}')
                    : ('{text|' + dn + '}');
                };
              })(node, displayName),
              rich: rich
            },
            itemStyle: {
              color:       isCurrent ? '#fcd34d' : (isAdd ? '#10b981' : '#ffffff'),
              borderColor: isCurrent ? '#f59e0b' : (isAdd ? '#047857' : '#cbd5e1'),
              borderWidth: isCurrent ? 3 : 1,
              borderRadius: 8,
              shadowColor:   'rgba(0, 0, 0, 0.2)',
              shadowBlur:    10,
              shadowOffsetX: 2,
              shadowOffsetY: 6
            }
          };
        }

        var nodes = [];
        var links = [];

        var INVISIBLE = {
          color: 'rgba(0,0,0,0)', borderWidth: 0, shadowBlur: 0,
          shadowColor: 'transparent', shadowOffsetX: 0, shadowOffsetY: 0
        };

        // Place a node; if `port` is given, route the connector from the
        // parent to an invisible port node on the box's top/bottom edge
        // instead of to the box itself.
        function pushNode(node, x, y, port) {
          nodes.push(Object.assign({
            id: String(node.id), name: node.name, x: x, y: y,
            link: node.link, tooltip: node.tooltip
          }, nodeStyles(node)));
          if (node.parent === undefined || node.parent === null || !assetMap[node.parent]) {
            return;
          }
          if (port) {
            var pid = 'port-' + node.id;
            nodes.push({
              id: pid, name: '', x: port.x, y: port.y,
              symbol: 'circle', symbolSize: 0.1, silent: true,
              label: { show: false },
              itemStyle: INVISIBLE
            });
            links.push({
              source: String(node.parent), target: pid,
              lineStyle: { curveness: port.curveness }
            });
          } else {
            links.push({ source: String(node.parent), target: String(node.id) });
          }
        }

        // Recursively lay out `node` (at tree level `d`) and its subtree,
        // starting at vertical offset topY. Returns the block height and
        // the node's own center y.
        function layoutSubtree(node, d, topY) {
          var s = splitKids(node);
          if (!s.gridKids.length && !s.rowKids.length) {
            var cy = topY + slotY / 2;
            pushNode(node, colX(d), cy);
            return { height: slotY, centerY: cy };
          }
          var y = topY;
          var centers = [];
          if (s.gridKids.length) {
            var cols = colsFor(s.gridKids.length, d + 1);
            var rows = Math.ceil(s.gridKids.length / cols);
            s.gridKids.forEach(function(k, i) {
              var col = i % cols, row = Math.floor(i / cols);
              var x = colX(d + 1) + col * colGapX;
              var ky = y + slotY / 2 + row * slotY;
              var topRow = row === 0;
              pushNode(k, x, ky, {
                x: x,
                y: topRow ? ky - BOX_SIZE / 2 : ky + BOX_SIZE / 2,
                curveness: topRow ? 0.18 : -0.18
              });
            });
            var blockH = rows * slotY;
            centers.push(y + blockH / 2);
            y += blockH + blockGap;
          }
          s.rowKids.forEach(function(k) {
            var sub = layoutSubtree(k, d + 1, y);
            centers.push(sub.centerY);
            y += sub.height + blockGap;
          });
          y -= blockGap; // drop the trailing gap
          var centerY = centers.reduce(function(a, b) { return a + b; }, 0) / centers.length;
          pushNode(node, colX(d), centerY);
          return { height: y - topY, centerY: centerY };
        }

        var cursorY = slotY * 0.5;
        rootNodes.forEach(function(rt) {
          cursorY += layoutSubtree(rt, 0, cursorY).height + blockGap;
        });
        var contentH = cursorY - blockGap + slotY * 0.5;

        // Invisible pin nodes make the layout's bounding box deterministic:
        // exactly the canvas width by at least the viewport height. The
        // graph view fits that box into the canvas, so the transform is
        // identity while the content fits, and a uniform zoom-out once the
        // content is taller than the viewport.
        [[0, 0], [W, Math.max(contentH, viewportH)]].forEach(function(p, i) {
          nodes.push({
            id: '__pin' + i, name: '', x: p[0], y: p[1],
            symbol: 'circle', symbolSize: 0.1, silent: true,
            label: { show: false }, itemStyle: INVISIBLE
          });
        });

        var option = {
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove',
            backgroundColor: 'rgba(255, 255, 255, 0.95)',
            borderColor: '#e2e8f0',
            borderWidth: 1,
            textStyle: { color: '#334155' },
            formatter: function(params) {
              return params.data.tooltip || params.name;
            }
          },
          series: [
            {
              type: 'graph',
              layout: 'none',
              data: nodes,
              links: links,
              // Drag to pan; wheel and +/- buttons drive series.zoom below.
              roam: 'move',
              zoom: zoomFactor,
              // Scale node symbols 1:1 with the view zoom.
              nodeScaleRatio: 1,
              edgeSymbol: ['none', 'none'],
              animationDuration: 550,
              // No update animation during continuous wheel-zoom, so the tree
              // follows the wheel without lagging behind.
              animationDurationUpdate: animate === false ? 0 : 400,
              lineStyle: {
                color: '#94a3b8',
                width: 2,
                curveness: 0.15
              }
            }
          ]
        };

        myChart.setOption(option);
      }

      updateChart();

      window.addEventListener('resize', function() {
        myChart.resize();
        updateChart();
      });

      // The tree can start out inside a hidden Bootstrap tab pane (e.g. when
      // Location is the default tab), so it initializes against a 0x0
      // container and lays out collapsed in the top-left corner. Re-layout
      // once the Structure tab is actually shown and has real dimensions.
      var structureTabEl = document.getElementById('structure-tab');
      if (structureTabEl) {
        structureTabEl.addEventListener('shown.bs.tab', function() {
          myChart.resize();
          updateChart();
        });
      }

      myChart.on('click', function(params) {
        if (params.data.link) {
          window.location.href = params.data.link;
        }
      });

      // ===== Zoom controls =====
      // Zoom re-renders the tree at a new scale (node sizes + layout margins)
      // while the canvas stays a fixed size - so the tree shrinks/grows WITHIN
      // the gray area (like a map), rather than the area itself changing size.
      var ZOOM_MIN = 0.3, ZOOM_MAX = 2.5, ZOOM_STEP = 0.2;
      function setZoom(z, animate) {
        zoomFactor = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(z * 100) / 100));
        updateChart(animate);
      }
      // Reset zoom AND any drag-pan offset (clear() drops the roam state).
      function resetView() {
        zoomFactor = 1;
        myChart.clear();
        updateChart();
      }
      document.getElementById('treeZoomIn').addEventListener('click', function() { setZoom(zoomFactor + ZOOM_STEP); });
      document.getElementById('treeZoomOut').addEventListener('click', function() { setZoom(zoomFactor - ZOOM_STEP); });
      document.getElementById('treeZoomReset').addEventListener('click', resetView);

      // Double-click / double-tap on an empty spot resets the view as well.
      // Implemented on zrender's 'click' (which also fires for taps) rather
      // than 'dblclick', so it works on touch devices too. Nodes are
      // excluded: a single click on a node already navigates away.
      var lastBlankTap = 0;
      myChart.getZr().on('click', function(e) {
        if (e.target) { return; }
        var now = Date.now();
        if (now - lastBlankTap < 350) {
          lastBlankTap = 0;
          resetView();
        } else {
          lastBlankTap = now;
        }
      });

      // Zoom on scroll while the cursor is inside the tree. The wheel drives
      // the same zoomFactor as the +/- buttons; preventDefault() keeps the
      // page itself from scrolling. Wheel deltas are coalesced per animation
      // frame, since every zoom step re-renders the tree.
      var pendingWheelDelta = 0, wheelRafScheduled = false;
      scrollDom.addEventListener('wheel', function(e) {
        e.preventDefault();
        pendingWheelDelta += e.deltaY * (e.deltaMode === 1 ? 16 : 1);
        if (!wheelRafScheduled) {
          wheelRafScheduled = true;
          requestAnimationFrame(function() {
            var factor = Math.pow(1.0015, -pendingWheelDelta);
            pendingWheelDelta = 0;
            wheelRafScheduled = false;
            setZoom(zoomFactor * factor, false);
          });
        }
      }, { passive: false });

      // Pinch-to-zoom on touch devices, driving the same zoomFactor as the
      // wheel and the +/- buttons. Two-finger gestures are consumed here
      // (together with touch-action: none on the container), so the browser
      // doesn't zoom the page; one-finger drags stay with ECharts' roam
      // panning.
      var pinchStartDist = null, pinchStartZoom = null;
      var pinchPending = null, pinchRafScheduled = false;
      function touchDist(touches) {
        var dx = touches[0].clientX - touches[1].clientX;
        var dy = touches[0].clientY - touches[1].clientY;
        return Math.sqrt(dx * dx + dy * dy) || 1;
      }
      scrollDom.addEventListener('touchstart', function(e) {
        if (e.touches.length === 2) {
          e.preventDefault();
          pinchStartDist = touchDist(e.touches);
          pinchStartZoom = zoomFactor;
        }
      }, { passive: false });
      scrollDom.addEventListener('touchmove', function(e) {
        if (pinchStartDist === null || e.touches.length !== 2) { return; }
        e.preventDefault();
        pinchPending = pinchStartZoom * (touchDist(e.touches) / pinchStartDist);
        if (!pinchRafScheduled) {
          pinchRafScheduled = true;
          requestAnimationFrame(function() {
            pinchRafScheduled = false;
            if (pinchPending !== null) { setZoom(pinchPending, false); }
          });
        }
      }, { passive: false });
      ['touchend', 'touchcancel'].forEach(function(type) {
        scrollDom.addEventListener(type, function(e) {
          if (e.touches.length < 2) {
            pinchStartDist = null;
            pinchPending = null;
          }
        });
      });
    };
  </script>
{% endmacro %}

{% macro render_attributes(attributes) %}
<table class="table table-striped table-responsive">
  <thead>
      <tr>
          <th scope="col">Attribute</th>
          <th scope="col">Value</th>
      </tr>
  </thead>
  <tbody>
  {% for key, value in attributes.items() %}
  {% if not key.endswith("_id") %}
      <tr>
          <td scope="row">{{ key }}</td>
          <td scope="row">{{ value }}</td>
      </tr>
  {% endif %}
  {% endfor %}
  </tbody>
</table>
{% endmacro %}

{% macro render_stored_secrets(stored_secrets) %}
{% if stored_secrets %}
{% set show_expiry = stored_secrets | selectattr("expires_at", "defined") | list %}
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">Stored secret</th>
      {% if show_expiry %}
      <th scope="col">Expires</th>
      {% endif %}
    </tr>
  </thead>
  <tbody>
    {% for secret in stored_secrets %}
    <tr>
      <td scope="row"><span class="font-monospace">{{ secret.path }}</span></td>
      {% if show_expiry %}
      <td>
        {% if secret.expires_at is defined %}
        <span title="{{ secret.expires_at.isoformat() }}">{{ secret.expires_at | naturalized_datetime }}</span>
        {% endif %}
      </td>
      {% endif %}
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}
{% endmacro %}

{#
  Render a button that opens the JSON attributes editor modal.
  Call json_attributes_editor_modal() once on the same page to include the modal + JS.
  Parameters:
    modal_id:          unique HTML id for the modal (default "jsonAttributesModal")
    label:             button label text
    field_label:       optional form-field label rendered above the button
    field_description: optional small description rendered below the label
#}
{% macro json_attributes_editor_button(modal_id="jsonAttributesModal", label="Custom attributes", field_label=None, field_description=None) %}
{% if field_label %}
<label class="form-label">{{ field_label }}</label>
{% endif %}
{% if field_description %}
<small class="d-block mb-1" style="color: var(--gray);">{{ field_description }}</small>
{% endif %}
<button type="button"
        class="btn btn-sm btn-secondary mt-2 w-100"
        data-bs-toggle="modal"
        data-bs-target="#{{ modal_id }}">
  <i class="fa fa-pencil me-1"></i> {{ label }}
</button>
{% endmacro %}

{#
  Render the JSON attributes editor modal and its JavaScript.
  Uses @json-editor/json-editor (https://github.com/json-editor/json-editor).
  Parameters:
    api_url:             full API PATCH URL for this entity
    initial_attributes:  the current attributes dict (Jinja variable, will be tojson'd)
    entity_name:         displayed in the modal title
    modal_id:            must match the id passed to json_attributes_editor_button()

  The modal has two tabs:
    Form — schema-driven Bootstrap form (good for simple flat attributes)
    JSON — raw editable textarea (type-accurate; authoritative on Save)

  Active theme is read from FLEXMEASURES_JSONEDITOR_THEME config.
  Available themes: "bootstrap5" (default), "bootstrap4", "bootstrap3",
                    "tailwind", "spectre", "barebones", "html"
#}
{% macro json_attributes_editor_modal(api_url, initial_attributes, entity_name="", modal_id="jsonAttributesModal") %}
{% set _theme = config.get("FLEXMEASURES_JSONEDITOR_THEME", "bootstrap5") %}
<div class="modal fade fm-json-modal" id="{{ modal_id }}" tabindex="-1">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          Edit Attributes{% if entity_name %} — {{ entity_name }}{% endif %}
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <ul class="nav nav-tabs mb-3" id="{{ modal_id }}Tabs" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="tab"
                    data-bs-target="#{{ modal_id }}FormTab" role="tab">Form</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab"
                    data-bs-target="#{{ modal_id }}JsonTab" role="tab">JSON</button>
          </li>
        </ul>

        <div class="tab-content">
          {# Form tab — rendered by @json-editor/json-editor with selected theme #}
          <div class="tab-pane fade show active" id="{{ modal_id }}FormTab" role="tabpanel">
            <div id="{{ modal_id }}EditorContainer" class="fm-je-container"></div>
          </div>

          {# JSON tab — plain Bootstrap textarea; always type-accurate #}
          <div class="tab-pane fade" id="{{ modal_id }}JsonTab" role="tabpanel">
            <textarea id="{{ modal_id }}JsonTextarea"
                      class="form-control font-monospace fm-json-textarea"
                      rows="20"
                      spellcheck="false"
                      autocomplete="off"></textarea>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <small class="text-muted me-auto">
          Save always uses the currently active tab.
        </small>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success create-button" id="{{ modal_id }}SaveBtn">Save</button>
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  var _modalId   = {{ modal_id | tojson }};
  var _apiUrl    = {{ api_url  | tojson }};
  var _theme     = {{ _theme   | tojson }};
  var _startval  = {{ initial_attributes | tojson | safe }};
  var _jeInstance = null;   /* @json-editor/json-editor instance        */
  var _activeTab  = "form"; /* "form" | "json"                          */


  /* ------------------------------------------------------------------ */
  /* Initialise on first modal open                                       */
  /* ------------------------------------------------------------------ */
  document.getElementById(_modalId).addEventListener("shown.bs.modal", function () {
    /* Always start on the Form tab */
    var formTabEl = document.querySelector(
      "#" + _modalId + "Tabs [data-bs-target='#" + _modalId + "FormTab']"
    );
    if (formTabEl) { bootstrap.Tab.getOrCreateInstance(formTabEl).show(); }
    _activeTab = "form";
    _initForm();
    document.getElementById(_modalId + "JsonTextarea").value =
      JSON.stringify(_startval, null, 2);
  });

  function _initForm() {
    if (_jeInstance) {
      _jeInstance.setValue(_startval);
      return;
    }
    _jeInstance = new JSONEditor(
      document.getElementById(_modalId + "EditorContainer"),
      {
        theme:    _theme,
        iconlib:  "fontawesome4",        /* FA 4.7 is loaded in base.html    */
        schema: {
          type:  "object",
          title: "\u200b",              /* zero-width space: truthy → avoids
                                           the "root" label fallback          */
          /*
           * additionalProperties: {} lets @json-editor/json-editor render
           * each existing key as a text input and provides a "+" button
           * to add new keys.  All values are treated as strings in the
           * form view; for non-string types use the JSON tab.
           */
          additionalProperties: {}
        },
        startval:                _startval,
        disable_edit_json:       false,   /* also handled by the JSON tab          */
        disable_collapse:        false,
        no_additional_properties: false,
        prompt_before_delete:    false,
        enable_array_copy:       true     /* adds a Copy button per array item     */
      }
    );

    /* Fix border-radius for lone buttons in .btn-group.
     * @json-editor/json-editor places action buttons in a .btn-group but may
     * leave hidden sibling elements in the DOM (e.g. collapse / edit-JSON
     * buttons that are disabled via options).  Bootstrap's :not(:last-child)
     * rule then flattens the wrong corners of the one visible button. */
    var _editorEl = document.getElementById(_modalId + "EditorContainer");
    _editorEl.querySelectorAll(".btn-group").forEach(function (grp) {
      var visible = Array.from(grp.children).filter(function (el) {
        return el.classList.contains("btn") &&
               window.getComputedStyle(el).display !== "none";
      });
      if (visible.length === 1) {
        visible[0].style.setProperty(
          "border-radius", "var(--bs-btn-border-radius, 0.375rem)", "important"
        );
      }
    });

    /* Fix array copy: insert clone at index+1 instead of appending at end.
     *
     * The library's _createCopyButton handler has two bugs:
     *   1. It appends the copy at the END of the array (e.push) instead of
     *      inserting it after the source row.
     *   2. It accesses schema.items.type without a null-guard, crashing when
     *      items is undefined (arrays from additionalProperties: {}).
     *
     * Fix: register a capture-phase listener on the editor container.
     * Capture fires BEFORE the button's own listener (bubble phase), so
     * stopPropagation() here prevents the broken handler from running at all.
     * Each editor container has data-schemapath set by json-editor; we use
     * getEditor(path) to retrieve the array editor instance and splice. */
    _editorEl.addEventListener("click", function (evt) {
      var btn = evt.target.closest(".json-editor-btntype-copy");
      if (!btn) { return; }
      evt.preventDefault();
      evt.stopPropagation();   /* block the library's own broken handler   */

      var idx = parseInt(btn.getAttribute("data-i"), 10);

      /* Walk up the DOM from the button to find the nearest ancestor whose
       * editor returns an Array value — that is the array editor we need.
       * btn.closest("[data-schemapath]") alone is not sufficient because the
       * first match is the *item* editor container (e.g. root.tags.0), not
       * the array editor container (e.g. root.tags). */
      var arrayEditor = null;
      var el = btn;
      while (el && el !== _editorEl) {
        el = el.parentElement;
        if (!el || !el.getAttribute) { continue; }
        var sp = el.getAttribute("data-schemapath");
        if (!sp) { continue; }
        var ed = _jeInstance.getEditor(sp);
        if (ed && Array.isArray(ed.getValue())) {
          arrayEditor = ed;
          break;
        }
      }
      if (!arrayEditor) { return; }

      var vals = arrayEditor.getValue();

      var copy = JSON.parse(JSON.stringify(vals[idx]));
      vals.splice(idx + 1, 0, copy);
      arrayEditor.setValue(vals);
      if (arrayEditor.refreshValue) { arrayEditor.refreshValue(true); }
      if (arrayEditor.onChange)     { arrayEditor.onChange(true); }
    }, true /* capture phase */);
  }  /* end _initForm */

  /* ------------------------------------------------------------------ */
  /* Tab-switch sync                                                      */
  /* ------------------------------------------------------------------ */

  /* show.bs.tab fires BEFORE Bootstrap moves focus.  Calling preventDefault()
   * here cancels the switch entirely, keeping the user on the current tab. */
  document.querySelectorAll(
    "#" + _modalId + "Tabs [data-bs-toggle='tab']"
  ).forEach(function (tab) {
    tab.addEventListener("show.bs.tab", function (event) {
      var target = event.target.getAttribute("data-bs-target");
      /* Switching JSON → Form: textarea must contain valid JSON */
      if (target === "#" + _modalId + "FormTab") {
        try {
          JSON.parse(document.getElementById(_modalId + "JsonTextarea").value);
        } catch (e) {
          event.preventDefault();
          showToast("Invalid JSON — please fix errors before switching tabs.", "error");
        }
      }
    });
  });

  /* shown.bs.tab fires AFTER Bootstrap completes the switch (only reached
   * when show.bs.tab was not cancelled). */
  document.querySelectorAll(
    "#" + _modalId + "Tabs [data-bs-toggle='tab']"
  ).forEach(function (tab) {
    tab.addEventListener("shown.bs.tab", function (event) {
      var target = event.target.getAttribute("data-bs-target");
      if (target === "#" + _modalId + "JsonTab") {
        /* Form → JSON: stringify current form values */
        _activeTab = "json";
        try {
          var val = _jeInstance ? _jeInstance.getValue() : _startval;
          document.getElementById(_modalId + "JsonTextarea").value =
            JSON.stringify(val, null, 2);
        } catch (e) {}
      } else {
        /* JSON → Form: parse textarea and push into form editor */
        _activeTab = "form";
        var parsed = JSON.parse(
          document.getElementById(_modalId + "JsonTextarea").value
        );
        if (_jeInstance) { _jeInstance.setValue(parsed); }
        _startval = parsed;
      }
    });
  });

  /* ------------------------------------------------------------------ */
  /* Save                                                                 */
  /* ------------------------------------------------------------------ */
  document.getElementById(_modalId + "SaveBtn").addEventListener("click", function () {
    var data;
    try {
      if (_activeTab === "json") {
        data = JSON.parse(
          document.getElementById(_modalId + "JsonTextarea").value
        );
      } else {
        data = _jeInstance ? _jeInstance.getValue() : _startval;
      }
    } catch (e) {
      showToast("Invalid JSON — please fix errors before saving.", "error");
      return;
    }

    fetch(_apiUrl, {
      method:  "PATCH",
      headers: { "Content-Type": "application/json" },
      body:    JSON.stringify({ attributes: JSON.stringify(data) })
    })
    .then(function (r) { return r.json(); })
    .then(function (resp) {
      if (resp.id !== undefined) {
        showToast("Attributes saved successfully!", "success");
        bootstrap.Modal.getInstance(document.getElementById(_modalId)).hide();
        _startval = data;
      } else {
        var msg =
          (resp.message && resp.message.json &&
           resp.message.json.attributes &&
           resp.message.json.attributes[0])
          || resp.message || "Save failed";
        showToast("Error: " + msg, "error");
      }
    })
    .catch(function (err) { showToast("Error: " + err, "error"); });
  });
}());
</script>
{% endmacro %}