{% extends "base.html" %}
{% block title %}Launch: {{ workflow.name }}{% endblock title %}
{% block content %}
  <style>
    .workflow-launch-card {
      width: min(100%, 1100px);
    }

    .list-dict-field-container .list-dict-table-wrap {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .list-dict-field-container table.list-dict-table {
      margin-bottom: 0;
      width: max-content;
      min-width: 100%;
    }

    .list-dict-field-container table.list-dict-table th,
    .list-dict-field-container table.list-dict-table td {
      vertical-align: middle;
    }

    .list-dict-field-container table.list-dict-table th.list-dict-actions-col,
    .list-dict-field-container table.list-dict-table td.list-dict-actions-col {
      white-space: nowrap;
      width: 1%;
    }

    /* Client-side validation error styles (BS5-compatible) */
    .mb-3.has-error label {
      color: var(--bs-danger, #dc3545);
    }
    .mb-3.has-error .form-control,
    .mb-3.has-error .form-select,
    .mb-3.has-error .btn-group > .btn {
      border-color: var(--bs-danger, #dc3545) !important;
    }
    .help-block.validation-error {
      display: block;
      color: var(--bs-danger, #dc3545);
      font-size: 0.875em;
      margin-top: 0.25rem;
    }

    /* Searchable dropdown styles */
    .dropdown-search-container {
      position: sticky !important;
      top: 0;
      background: var(--bs-body-bg);
      z-index: 1001;
    }
    /* When dropdown is open, place menu in normal flow so the card grows */
    #dynamic-form .btn-group .dropdown-menu.show {
      position: static !important;
      transform: none !important;
      inset: auto !important;
      width: 100% !important;
      max-height: 300px;
      overflow-y: auto;
    }
    /* Ensure toggle + menu stack vertically and span full width */
    #dynamic-form .btn-group {
      display: flex !important;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }
    #dynamic-form .btn-group > .btn.dropdown-toggle {
      width: 100%;
      text-align: left;
    }
    .dropdown-option-item.highlighted > a {
      background-color: #337ab7 !important;
      color: white !important;
    }
    .dropdown-menu .form-control {
      border-radius: 3px;
    }
    /* Ensure search input doesn't inherit dropdown styles */
    .dropdown-search-container input.form-control:focus {
      box-shadow: 0 0 5px rgba(51, 122, 183, 0.5);
      border-color: #337ab7;
    }
  </style>


  {# Error summary #}
  {% if form.errors %}
    <div class="alert alert-danger" role="alert">
      <strong>Please fix the errors below:</strong>
      <ul class="mt-2 mb-0">
        {% for field in form %}
          {% for err in field.errors %}
            <li><a href="#id_{{ field.name }}">{{ field.label }}:</a> {{ err }}</li>
          {% endfor %}
        {% endfor %}
        {% for err in form.non_field_errors %}
          <li>{{ err }}</li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}

  <form method="post" id="workflow-launch-form" novalidate>
    {% csrf_token %}
    <input type="hidden" name="form_started_at" id="form_started_at" />
    <input type="hidden" name="form_duration_seconds" id="form_duration_seconds" />
    <input type="hidden" name="browser_timezone_offset_minutes" id="browser_timezone_offset_minutes" />
    <input type="hidden" name="browser_timezone_name" id="browser_timezone_name" />

    {# Inject listdict column schemas as JSON so JS can read them without #}
    {# relying on data-attribute HTML escaping.                           #}
    {% load workflow_extras %}
    {% for wi in workflow.inputs.all %}
      {% if wi.input_type == "listdict" %}
        {% if wi.columns %}
        <script type="application/json" id="listdict-columns-{{ wi.key }}">{{ wi.columns|to_json }}</script>
        {% endif %}
      {% endif %}
    {% endfor %}

    <div class="card workflow-launch-card">
      <div id="dynamic-form" class="card-body">
      {% for field in form %}
        {% if field.name not in "execution_type,scheduled_datetime" %}
        {% with has_error=field.errors %}
        {% with attrs=field.field.widget.attrs %}
        <div class="mb-3" id="group_{{ field.name }}"
             {% if "data-depends-on" in attrs or "data-show-if-field" in attrs %}style="display:none"{% endif %}>
             {% endwith %}

          {% if field.field.widget.input_type == "checkbox" %}
            <div class="form-check">
              <label class="form-check-label" for="id_{{ field.name }}">
                {{ field }} {{ field.label }}
              </label>
            </div>
          {% else %}
            <label class="control-label" for="id_{{ field.name }}">{{ field.label }}</label>
            {{ field }}
          {% endif %}

          {% if field.help_text %}
            <small class="form-text text-muted">{{ field.help_text }}</small>
          {% endif %}
          {% if has_error %}
            <div class="invalid-feedback d-block">
              {% for err in field.errors %}{{ err }}{% if not forloop.last %}<br/>{% endif %}{% endfor %}
            </div>
          {% endif %}
        </div>
        {% endwith %}
        {% endif %}
      {% endfor %}
      </div>
    </div>

    {# Scheduling Section #}
    <div class="card workflow-launch-card" style="margin-top: 15px; border-top: 2px solid #ddd;">
      <div class="card-body">
      <h4>Execution Timing</h4>
      
      <div class="mb-3">
        <label class="control-label">{{ form.execution_type.label }}</label>
        {{ form.execution_type }}
        {% if form.execution_type.help_text %}
          <small class="form-text text-muted">{{ form.execution_type.help_text }}</small>
        {% endif %}
        {% if workflow.servicenow_change_input_key %}
          <small class="form-text text-muted d-block">
            ServiceNow scheduling will validate the <strong>{{ workflow.servicenow_change_input_key }}</strong> input
            before a scheduled run is created.
          </small>
        {% endif %}
        {% if form.execution_type.errors %}
          <div class="invalid-feedback d-block">
            {% for err in form.execution_type.errors %}{{ err }}{% if not forloop.last %}<br/>{% endif %}{% endfor %}
          </div>
        {% endif %}
      </div>

      <div class="mb-3" 
           id="group_scheduled_datetime" data-show-if-execution_type="scheduled" style="display:none;">
        <label class="control-label" for="id_scheduled_datetime">{{ form.scheduled_datetime.label }}</label>
        {{ form.scheduled_datetime }}
        {% if form.scheduled_datetime.help_text %}
          <small class="form-text text-muted">
            {{ form.scheduled_datetime.help_text }}
            <br>
            <strong>Current server time (UTC):</strong> <span id="server-time"></span>
            <br>
            <strong>Your local time:</strong> <span id="local-time"></span>
          </small>
        {% endif %}
        {% if form.scheduled_datetime.errors %}
          <div class="invalid-feedback d-block">
            {% for err in form.scheduled_datetime.errors %}{{ err }}{% if not forloop.last %}<br/>{% endif %}{% endfor %}
          </div>
        {% endif %}
      </div>
      </div>
    </div>

    <button class="btn btn-primary" type="submit">Run</button>
  </form>

  <script>
    // Add timezone handling
    document.addEventListener('DOMContentLoaded', function() {
      // Prepare to record the time when the user first starts interacting
      var startedAtEl = document.getElementById('form_started_at');
      var formInteractionStarted = false;
      function markFormStartIfNeeded() {
        if (!formInteractionStarted && startedAtEl) {
          formInteractionStarted = true;
          startedAtEl.value = String(Date.now());
        }
      }
      // Consider any input/change typing or dropdown interaction as a start
      var formRoot = document.getElementById('dynamic-form');
      if (formRoot) {
        formRoot.addEventListener('input', markFormStartIfNeeded, { once: false });
        formRoot.addEventListener('change', markFormStartIfNeeded, { once: false });
        // Also capture clicks within dropdowns
        formRoot.addEventListener('click', function(e){
          var t = e.target;
          if (!t) return;
          // Ignore clicks on non-interactive containers
          if (t.matches('button, a, input, select, textarea')) {
            markFormStartIfNeeded();
          }
        }, { once: false });
      }
      function pad2(n) {
        return String(n).padStart(2, '0');
      }

      function formatLocalDateTime(dt) {
        return dt.getFullYear() + '-' + pad2(dt.getMonth() + 1) + '-' + pad2(dt.getDate()) + 'T' + pad2(dt.getHours()) + ':' + pad2(dt.getMinutes());
      }

      // Update time displays every second
      function updateTimeDisplays() {
        var now = new Date();
        var serverTime = now.toISOString().slice(0, 19).replace('T', ' ') + ' UTC';
        var localTz = Intl.DateTimeFormat().resolvedOptions().timeZone || 'Local Time';
        var localTime = now.toLocaleString() + ' (' + localTz + ')';
        
        var serverTimeEl = document.getElementById('server-time');
        var localTimeEl = document.getElementById('local-time');
        
        if (serverTimeEl) serverTimeEl.textContent = serverTime;
        if (localTimeEl) localTimeEl.textContent = localTime;
      }
      
      updateTimeDisplays();
      setInterval(updateTimeDisplays, 1000);

      // Capture browser timezone metadata for backend conversion.
      var tzOffsetEl = document.getElementById('browser_timezone_offset_minutes');
      var tzNameEl = document.getElementById('browser_timezone_name');
      if (tzOffsetEl) {
        tzOffsetEl.value = String(new Date().getTimezoneOffset());
      }
      if (tzNameEl) {
        tzNameEl.value = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
      }
      
      // Set datetime input min/default in LOCAL time.
      var datetimeInput = document.querySelector('input[name="scheduled_datetime"]');
      if (datetimeInput) {
        var now = new Date();
        var minAheadMinutes = parseInt(datetimeInput.getAttribute('data-minutes-ahead') || '5', 10);
        var minTime = new Date(now.getTime() + Math.max(1, minAheadMinutes) * 60000);
        datetimeInput.setAttribute('min', formatLocalDateTime(minTime));

        // Set default value to now + 10 minutes in local time for convenience.
        var defaultTime = new Date(now.getTime() + 10 * 60000);
        var defaultDateTime = formatLocalDateTime(defaultTime);
        
        // Only set default if field is empty (preserves user input on form validation errors)
        if (!datetimeInput.value) {
          datetimeInput.value = defaultDateTime;
        }
      }
      
      // Submit local datetime as-is. Backend converts using browser timezone offset.
      var form = document.getElementById('workflow-launch-form');
      if (form) {
        form.addEventListener('submit', function(e) {
          // Compute duration spent filling the form
          try {
            var started = parseInt(document.getElementById('form_started_at')?.value || '0', 10);
            var nowMs = Date.now();
            var durationSec = 0;
            if (!isNaN(started) && started > 0 && nowMs >= started) {
              durationSec = Math.round((nowMs - started) / 1000);
            }
            var durEl = document.getElementById('form_duration_seconds');
            if (durEl) durEl.value = String(Math.max(0, durationSec));
          } catch (err) {
            var durEl2 = document.getElementById('form_duration_seconds');
            if (durEl2) durEl2.value = '0';
          }
          var executionType = form.querySelector('input[name="execution_type"]:checked');
          if (executionType && executionType.value === 'scheduled') {
            var datetimeInput = form.querySelector('input[name="scheduled_datetime"]');
            if (datetimeInput && datetimeInput.value) {
              // Keep local value untouched for backend conversion.
            }
          }
        });
      }
    });

    (function() {
      var formEl = document.getElementById('dynamic-form');
    
      // ---------- helpers ----------
      function getProxyOrReal(name) {
        var hidden = formEl.querySelector('input[type="hidden"][name="' + name + '"]');
        return hidden || formEl.querySelector('[name="' + name + '"]');
      }
      function ctrlVal(name) { 
        var el = getProxyOrReal(name); 
        if (!el) return ''; 
        if (el.type === 'checkbox') return el.checked ? 'true' : 'false';
        return el.value || ''; 
      }
      function depsOf(el) {
        var s = el.getAttribute('data-depends-on');
        return s ? s.split(',').filter(Boolean) : [];
      }
      function dependentsOf(name) {
        var out = [];
        formEl.querySelectorAll('select[data-depends-on]').forEach(function(sel){
          if (depsOf(sel).indexOf(name) !== -1) out.push(sel);
        });
        return out;
      }
    
      // ---------- visibility rules ----------
      function showRuleSatisfied(el) {
        var ctrl = el.getAttribute('data-show-if-field');
        if (!ctrl) return true;
        var allow = (el.getAttribute('data-show-if-values') || '').split('|').filter(Boolean);
        
        // Check if current field's condition is satisfied
        var fieldSatisfied = !allow.length || allow.indexOf(String(ctrlVal(ctrl))) !== -1;
        
        // Check for additional show-if conditions (data-show-if-conditions)
        var additionalConditions = el.getAttribute('data-show-if-conditions');
        if (!additionalConditions) {
          return fieldSatisfied;
        }
        
        // Parse additional conditions as JSON
        try {
          var conditions = JSON.parse(additionalConditions);
          var allConditionsSatisfied = true;
          
          for (var condField in conditions) {
            var condValues = conditions[condField];
            var currentValue = String(ctrlVal(condField));
            
            // Handle array of allowed values
            if (Array.isArray(condValues)) {
              var conditionMet = condValues.some(function(val) {
                return String(val) === currentValue;
              });
              if (!conditionMet) {
                allConditionsSatisfied = false;
                break;
              }
            } else {
              // Handle single value
              if (String(condValues) !== currentValue) {
                allConditionsSatisfied = false;
                break;
              }
            }
          }
          
          return fieldSatisfied && allConditionsSatisfied;
        } catch (e) {
          console.error('Error parsing show-if conditions:', e);
          return fieldSatisfied;
        }
      }
      function depsSatisfied(el) {
        var ok = true; depsOf(el).forEach(function(d){ if (!ctrlVal(d)) ok = false; }); return ok;
      }
      function groupOf(el) {
        var name = el.getAttribute('name') || el.dataset.originalName;
        return document.getElementById('group_' + name);
      }
    
      // ---------- dropdown enhancer (Bootstrap 3) ----------
      function ensurePlaceholder(selectEl) {
        if (!selectEl.options.length || selectEl.options[0].value !== '') {
          var ph = document.createElement('option');
          ph.value = ''; ph.textContent = '— Select —';
          selectEl.insertBefore(ph, selectEl.firstChild);
        }
        // never auto-select; force explicit choice
        selectEl.selectedIndex = 0;
      }

      function attachSearchListeners(searchInput, menu, btn, hidden, selectEl) {
        // Check if listeners are already attached to avoid duplicates
        if (searchInput.dataset.listenersAttached === 'true') {
          return;
        }
        
        // Determine if server-side search is needed
        var useServerSideSearch = selectEl.dataset.objectField === 'true';
        var searchTimeout;
        
        // Handle search input events
        searchInput.addEventListener('input', function(e) {
          var searchTerm = e.target.value.trim();
          
          if (useServerSideSearch && searchTerm.length >= 2) {
            // Clear previous timeout
            if (searchTimeout) {
              clearTimeout(searchTimeout);
            }
            
            // Debounce server-side search
            searchTimeout = setTimeout(function() {
              performServerSideSearch(selectEl, searchTerm, menu, btn, hidden);
            }, 300);
          } else if (useServerSideSearch && searchTerm.length < 2) {
            // Clear search results and show message
            clearSearchResults(menu, 'Type at least 2 characters to search...');
          } else {
            // Client-side filtering for non-object fields
            filterMenuItems(menu, searchTerm.toLowerCase());
          }
        });

        // Add keyboard navigation support
        searchInput.addEventListener('keydown', function(e) {
          var visibleItems = menu.querySelectorAll('.dropdown-option-item:not([style*="display: none"]) a:not([data-value=""])');
          var highlighted = menu.querySelector('.dropdown-option-item.highlighted');
          var currentIndex = highlighted ? Array.prototype.indexOf.call(visibleItems, highlighted.querySelector('a')) : -1;

          if (e.key === 'ArrowDown') {
            e.preventDefault();
            // Remove previous highlight
            if (highlighted) highlighted.classList.remove('highlighted');
            // Move to next item
            var nextIndex = Math.min(currentIndex + 1, visibleItems.length - 1);
            if (visibleItems[nextIndex]) {
              visibleItems[nextIndex].parentNode.classList.add('highlighted');
              visibleItems[nextIndex].parentNode.scrollIntoView({ block: 'nearest' });
            }
          } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            // Remove previous highlight
            if (highlighted) highlighted.classList.remove('highlighted');
            // Move to previous item
            var prevIndex = Math.max(currentIndex - 1, 0);
            if (visibleItems[prevIndex]) {
              visibleItems[prevIndex].parentNode.classList.add('highlighted');
              visibleItems[prevIndex].parentNode.scrollIntoView({ block: 'nearest' });
            }
          } else if (e.key === 'Enter') {
            e.preventDefault();
            if (highlighted) {
              var link = highlighted.querySelector('a');
              if (link) {
                var val = link.getAttribute('data-value');
                var label = link.textContent;
                
                // For server-side search results, we need to add the option to the select element
                // Check if the option already exists
                var existingOption = Array.prototype.find.call(selectEl.options, function(opt) {
                  return opt.value === val;
                });
                
                if (!existingOption && val) {
                  // Add the selected option to the select element
                  var newOption = document.createElement('option');
                  newOption.value = val;
                  newOption.textContent = label;
                  newOption.selected = true;
                  selectEl.appendChild(newOption);
                }
                
                hidden.value = val;
                selectEl.value = val;
                btn.querySelector('.b3-label').textContent = label;
                // Close dropdown by clicking the button
                btn.click();
                markDependentsForRefresh(hidden.name || selectEl.dataset.originalName);
                updateVisibility();
              }
            }
          } else if (e.key === 'Escape') {
            e.preventDefault();
            btn.click(); // Close dropdown
          }
        });

        // Prevent dropdown from closing when clicking on search input
        searchInput.parentNode.addEventListener('click', function(e) {
          e.stopPropagation();
        });
        
        // Mark as having listeners attached
        searchInput.dataset.listenersAttached = 'true';
      }

      function performServerSideSearch(selectEl, searchTerm, menu, btn, hidden) {
        var isMultichoice = selectEl.getAttribute('data-multichoice') === 'true';
        var isMultiobject = selectEl.getAttribute('data-multiobject') === 'true';
        var isMulti = isMultichoice || isMultiobject;
        var fieldName = selectEl.getAttribute('name') || selectEl.dataset.originalName;
        var url = window.location.pathname.replace(/\/launch\/$/, '/inputs/' + fieldName + '/options/');
        var params = new URLSearchParams();
        
        // Add search parameter
        params.append('search', searchTerm);
        
        // Add dependency parameters
        var deps = depsOf(selectEl);
        deps.forEach(function(d) {
          var v = ctrlVal(d);
          if (v !== '') params.append(d, v);
        });
        
        var full = url + '?' + params.toString();
        
        // Show loading state
        showLoadingState(menu, 'Searching...');
        
        // Perform search
        fetch(full)
          .then(function(r) { return r.json(); })
          .then(function(data) {
            // Clear the menu but preserve search container
            var searchContainer = menu.querySelector('.dropdown-search-container');
            clearMenuExceptSearch(menu);
            
            // Add search results
            if (data.options && data.options.length > 0) {
              data.options.forEach(function(opt) {
                var li = document.createElement('li');
                if (isMulti) {
                  li.setAttribute('data-value', opt.value);
                  // form-check styled row inside dropdown for BS5 look
                  var row = document.createElement('div');
                  row.className = 'dropdown-item form-check m-0 px-3 py-1';
                  var checkbox = document.createElement('input');
                  var checkboxId = fieldName + '_' + opt.value;
                  checkbox.type = 'checkbox';
                  checkbox.className = 'form-check-input me-2';
                  checkbox.id = checkboxId;
                  // Pre-check if currently selected
                  try {
                    var selected = [];
                    if (hidden.value) selected = JSON.parse(hidden.value);
                    checkbox.checked = Array.isArray(selected) && selected.indexOf(String(opt.value)) !== -1;
                  } catch (e) { /* ignore */ }
                  var label = document.createElement('label');
                  label.className = 'form-check-label';
                  label.setAttribute('for', checkboxId);
                  label.textContent = opt.label;
                  row.appendChild(checkbox);
                  row.appendChild(label);
                  li.appendChild(row);
                  menu.appendChild(li);

                  // Ensure the option exists in the hidden select for state sync
                  var existingOpt = Array.prototype.find.call(selectEl.options, function(o){ return o.value === opt.value; });
                  if (!existingOpt) {
                    var newOpt = document.createElement('option');
                    newOpt.value = opt.value; newOpt.textContent = opt.label; selectEl.appendChild(newOpt);
                  }
                } else {
                  li.className = 'dropdown-option-item';
                  var a = document.createElement('a');
                  a.href = '#';
                  a.className = 'dropdown-item';
                  a.setAttribute('data-value', opt.value);
                  a.textContent = opt.label;
                  a.setAttribute('data-search-text', opt.label.toLowerCase());
                  if (opt.value === hidden.value) li.className += ' active';
                  li.appendChild(a);
                  menu.appendChild(li);
                }
              });
              
              // Show pagination info if available
              if (data.total_count && data.total_count > data.options.length) {
                var paginationInfo = document.createElement('li');
                paginationInfo.className = '';
                paginationInfo.innerHTML = '<a class="dropdown-item disabled" href="#" tabindex="-1" style="color: #6c757d; font-style: italic;">Showing ' + 
                  data.options.length + ' of ' + data.total_count + ' results</a>';
                menu.appendChild(paginationInfo);
              }
            } else {
              // No results found
              var noResultsItem = document.createElement('li');
              noResultsItem.className = '';
              noResultsItem.innerHTML = '<a class="dropdown-item disabled" href="#" tabindex="-1" style="color: #6c757d; font-style: italic;">No results found</a>';
              menu.appendChild(noResultsItem);
            }
          })
          .catch(function(error) {
            console.error('Server-side search failed:', error);
            clearSearchResults(menu, 'Search failed. Please try again.');
          });
      }

      function clearSearchResults(menu, message) {
        clearMenuExceptSearch(menu);
        if (message) {
          var messageItem = document.createElement('li');
          messageItem.className = '';
          messageItem.innerHTML = '<a class="dropdown-item disabled" href="#" tabindex="-1" style="color: #6c757d; font-style: italic;">' + message + '</a>';
          menu.appendChild(messageItem);
        }
      }

      function clearMenuExceptSearch(menu) {
        var searchContainer = menu.querySelector('.dropdown-search-container');
        var childrenToRemove = [];
        Array.prototype.forEach.call(menu.children, function(child) {
          if (child !== searchContainer) {
            childrenToRemove.push(child);
          }
        });
        childrenToRemove.forEach(function(child) {
          menu.removeChild(child);
        });
      }

      function showLoadingState(menu, message) {
        clearMenuExceptSearch(menu);
        var loadingItem = document.createElement('li');
        loadingItem.className = '';
        loadingItem.innerHTML = '<a class="dropdown-item disabled" href="#" tabindex="-1" style="color: #6c757d; font-style: italic;">' + (message || 'Loading...') + '</a>';
        menu.appendChild(loadingItem);
      }
    
      function enhanceSelect(selectEl) {
        if (selectEl.dataset.enhanced === '1') return;

        ensurePlaceholder(selectEl);

        var name = selectEl.getAttribute('name');
        var isMultichoice = selectEl.getAttribute('data-multichoice') === 'true';
        var isMultiobject = selectEl.getAttribute('data-multiobject') === 'true';
        var isMulti = isMultichoice || isMultiobject;
        var curr = (selectEl.options[selectEl.selectedIndex] || {}).text || '— Select —';

        selectEl.style.display = 'none';
        selectEl.dataset.originalName = name;
        selectEl.removeAttribute('name');

        var hidden = document.createElement('input');
        hidden.type = 'hidden';
        hidden.name = name;
        // Prefer server-provided data-initial attribute when available
        var dataInitial = selectEl.getAttribute('data-initial');
        if (dataInitial !== null && dataInitial !== undefined && dataInitial !== '') {
          try {
            // For object/choice initial values, data-initial is a string
            hidden.value = dataInitial;
          } catch (e) {
            hidden.value = (selectEl.value || '');
          }
        } else {
          hidden.value = (selectEl.value || '');
        }
        hidden.setAttribute('data-proxy-for', name);
        if (isMultichoice) {
          hidden.setAttribute('data-multichoice', 'true');
        }
        if (isMultiobject) {
          hidden.setAttribute('data-multiobject', 'true');
        }

        var group = document.createElement('div');
        group.className = 'btn-group'; group.style.width = '100%';

  var btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'btn btn-secondary dropdown-toggle';
        btn.setAttribute('data-bs-toggle', 'dropdown');
        // Use static display so menu can extend and card resizes (avoid clipping)
        btn.setAttribute('data-bs-display', 'static');
        btn.setAttribute('aria-haspopup', 'true');
        btn.setAttribute('aria-expanded', 'false');
        btn.style.width = '100%';
        // If server provided an initial label (via data-initial), try to use
        // the matching option text; otherwise fall back to current selection
        var initialLabel = curr;
        if (dataInitial) {
          // Try to find option with that value to use its text
          var matchingOpt = Array.prototype.find.call(selectEl.options, function(o){ return o.value === dataInitial; });
          if (matchingOpt) initialLabel = matchingOpt.text;
          else {
            // If option not present yet (common for object fields loaded via API), use placeholder text
            initialLabel = '— Select —';
          }
        }
        if (isMulti) {
          initialLabel = '— Select —';
        }
        btn.innerHTML = '<span class="b3-label">' + initialLabel + '</span>';

        var menu = document.createElement('ul');
        menu.className = 'dropdown-menu';
        menu.style.width = '100%';
        menu.style.maxHeight = '300px';
        menu.style.overflowY = 'auto';

        // Create search container
        var searchContainer = document.createElement('li');
        searchContainer.className = 'dropdown-search-container';
        searchContainer.style.padding = '8px';
        searchContainer.style.borderBottom = '1px solid #e5e5e5';
        searchContainer.style.marginBottom = '0';

        var searchInput = document.createElement('input');
        searchInput.type = 'text';
        searchInput.className = 'form-control form-control-sm';
        searchInput.placeholder = 'Search...';
        searchInput.style.fontSize = '12px';
        searchInput.style.height = '28px';
        searchInput.setAttribute('autocomplete', 'off');

        searchContainer.appendChild(searchInput);

        group.appendChild(btn); group.appendChild(menu);

        selectEl.parentNode.insertBefore(hidden, selectEl.nextSibling);
        hidden.parentNode.insertBefore(group, hidden.nextSibling);

        // Always create search container and attach it to the menu
        buildMenuFromSelect(selectEl, menu, btn, hidden, searchContainer, searchInput);

        // Attach search listeners - this ensures every dropdown gets search functionality
        attachSearchListeners(searchInput, menu, btn, hidden, selectEl);

        // Clear highlights when mouse moves over items
        menu.addEventListener('mouseover', function(e) {
          var highlighted = menu.querySelector('.dropdown-option-item.highlighted');
          if (highlighted) highlighted.classList.remove('highlighted');
        });

        // Focus search input when dropdown opens (if search is present and visible)
        btn.addEventListener('click', function() {
          setTimeout(function() {
            var currentSearchInput = menu.querySelector('.dropdown-search-container input');
            var searchContainer = menu.querySelector('.dropdown-search-container');
            if (currentSearchInput && searchContainer && searchContainer.style.display !== 'none') {
              currentSearchInput.focus();
              currentSearchInput.value = ''; // Clear previous search
              
              // For object fields, show appropriate prompt based on current state
              if (selectEl.getAttribute('data-object-field') === 'true') {
                if (selectEl.options.length <= 1) {
                  // No options loaded yet
                  clearSearchResults(menu, 'Type to search for options...');
                } else {
                  // Has options, show all and allow searching
                  filterMenuItems(menu, ''); // Show all items
                }
              } else {
                filterMenuItems(menu, ''); // Show all items for non-object fields
              }
            }
          }, 100);
        });

        menu.addEventListener('click', function(e){
          if (isMulti) {
            // Handle checkbox clicks for multichoice
            var li = e.target && e.target.closest('li[data-value]');
            if (!li) return;
            e.preventDefault();
            e.stopPropagation();
            
            var val = li.getAttribute('data-value');
            var checkboxInput = li.querySelector('input[type="checkbox"]');
            if (checkboxInput) {
              checkboxInput.checked = !checkboxInput.checked;

              // Ensure the option exists in the select for value sync
              var exists = Array.prototype.find.call(selectEl.options, function(o){ return o.value === val; });
              if (!exists) {
                var addOpt = document.createElement('option');
                addOpt.value = val; addOpt.textContent = (li.textContent || '').trim();
                selectEl.appendChild(addOpt);
              }
              
              // Update selected values
              var selectedValues = [];
              menu.querySelectorAll('li[data-value] input[type="checkbox"]:checked').forEach(function(cb) {
                selectedValues.push(cb.closest('li').getAttribute('data-value'));
              });
              
              // Update hidden input with JSON array
              hidden.value = JSON.stringify(selectedValues);
              
              // Update button label
              var count = selectedValues.length;
              if (count === 0) {
                btn.querySelector('.b3-label').textContent = '\u2014 Select \u2014';
              } else if (count === 1) {
                // Get the actual option label for single selection
                var selectedOpt = Array.prototype.find.call(selectEl.options, function(o) {
                  return o.value === selectedValues[0];
                });
                btn.querySelector('.b3-label').textContent = selectedOpt ? selectedOpt.text : '1 item selected';
              } else {
                btn.querySelector('.b3-label').textContent = count + ' items selected';
              }
              
              // Update select element
              Array.prototype.forEach.call(selectEl.options, function(opt) {
                opt.selected = selectedValues.indexOf(opt.value) !== -1;
              });
              
              markDependentsForRefresh(hidden.name);
              updateVisibility();
            }
          } else {
            // Single choice behavior
            var a = e.target && e.target.closest('a[data-value]');
            if (!a) return;
            e.preventDefault();
            var val = a.getAttribute('data-value');
            var label = a.textContent;
            
            // For server-side search results, we need to add the option to the select element
            // Check if the option already exists
            var existingOption = Array.prototype.find.call(selectEl.options, function(opt) {
              return opt.value === val;
            });
            
            if (!existingOption && val) {
              // Add the selected option to the select element
              var newOption = document.createElement('option');
              newOption.value = val;
              newOption.textContent = label;
              newOption.selected = true;
              selectEl.appendChild(newOption);
            }
            
            hidden.value = val;
            selectEl.value = val;
            btn.querySelector('.b3-label').textContent = label;
            // parent changed → mark dependents stale and refresh
            markDependentsForRefresh(hidden.name);
            updateVisibility();
          }
        });

        selectEl.dataset.enhanced = '1';
      }      function buildMenuFromSelect(selectEl, menu, btn, hidden, searchContainer, searchInput) {
        // For object fields, always show search regardless of current option count
        var isObjectField = selectEl.getAttribute('data-object-field') === 'true';
        var isMultichoice = selectEl.getAttribute('data-multichoice') === 'true';
        var isMultiobject = selectEl.getAttribute('data-multiobject') === 'true';
        var isMulti = isMultichoice || isMultiobject;
        var shouldShowSearch = isObjectField || selectEl.options.length > 6; // 5 real options + 1 placeholder
        
        // Preserve existing search container and input if they exist
        var existingSearchContainer = menu.querySelector('.dropdown-search-container');
        var existingSearchInput = existingSearchContainer && existingSearchContainer.querySelector('input');
        
        // Clear menu but preserve search container if it exists
        if (existingSearchContainer) {
          // Remove all children except the search container
          var childrenToRemove = [];
          Array.prototype.forEach.call(menu.children, function(child) {
            if (child !== existingSearchContainer) {
              childrenToRemove.push(child);
            }
          });
          childrenToRemove.forEach(function(child) {
            menu.removeChild(child);
          });
        } else {
          menu.innerHTML = '';
        }
        
        // Determine which search container to use
        var finalSearchContainer = existingSearchContainer || searchContainer;
        var finalSearchInput = existingSearchInput || searchInput;
        
        // Always add the search container if we have one, but control its visibility
        if (finalSearchContainer) {
          if (!existingSearchContainer) {
            // Add search container to menu if it's not already there
            menu.appendChild(finalSearchContainer);
          }
          
          // Show or hide search container based on option count or object field type
          finalSearchContainer.style.display = shouldShowSearch ? '' : 'none';
          
          // Clear search input when rebuilding
          if (finalSearchInput) {
            finalSearchInput.value = '';
          }
        }
        
        // Build option items
        var selectedValues = [];
        if (isMulti && hidden.value) {
          try {
            selectedValues = JSON.parse(hidden.value);
          } catch (e) {
            selectedValues = [];
          }
        }
        
        Array.prototype.forEach.call(selectEl.options, function(opt) {
          if (opt.value === '') return;
          var li = document.createElement('li');
          if (isMulti) {
            li.setAttribute('data-value', opt.value);
            li.style.cursor = 'pointer';
            // BS5 form-check row for multi items
            var row = document.createElement('div');
            row.className = 'dropdown-item form-check m-0 px-3 py-1';
            var checkbox = document.createElement('input');
            var checkboxId = (selectEl.dataset.originalName || selectEl.getAttribute('name') || 'opt') + '_' + opt.value;
            checkbox.type = 'checkbox';
            checkbox.className = 'form-check-input me-2';
            checkbox.id = checkboxId;
            checkbox.checked = selectedValues.indexOf(opt.value) !== -1;
            var label = document.createElement('label');
            label.className = 'form-check-label';
            label.setAttribute('for', checkboxId);
            label.textContent = opt.text;
            row.appendChild(checkbox);
            row.appendChild(label);
            li.appendChild(row);
          } else {
            li.className = 'dropdown-option-item';
            var a = document.createElement('a');
            a.href = '#';
            a.className = 'dropdown-item';
            a.setAttribute('data-value', opt.value);
            a.textContent = opt.text;
            a.setAttribute('data-search-text', opt.text.toLowerCase()); // For search filtering
            if (opt.value === hidden.value) li.className += ' active';
            li.appendChild(a);
          }
          menu.appendChild(li);
        });
        
        // For object fields with no real options, show appropriate prompt
        if (isObjectField && selectEl.options.length <= 1) {
          var promptText = 'Type to search for options...';
          if (selectEl.getAttribute('data-preload') === 'true') {
            promptText = 'Loading options...';
          }
          var promptItem = document.createElement('li');
          promptItem.className = 'disabled';
          promptItem.innerHTML = '<a href="#" style="color: #999; font-style: italic;">' + promptText + '</a>';
          menu.appendChild(promptItem);
        }
        
        // Try to honor the hidden proxy value first, then fallback to the
        // select's data-initial attribute (server-provided). Show placeholder
        // if neither maps to an option.
        if (isMulti) {
          // For multichoice, update button label based on selected count
          var count = selectedValues.length;
          if (count === 0) {
            btn.querySelector('.b3-label').textContent = '— Select —';
          } else if (count === 1) {
            var selectedOpt = Array.prototype.find.call(selectEl.options, function(o) { return o.value === selectedValues[0]; });
            btn.querySelector('.b3-label').textContent = selectedOpt ? selectedOpt.text : '1 item selected';
          } else {
            btn.querySelector('.b3-label').textContent = count + ' items selected';
          }
        } else {
          var chosenVal = hidden.value || selectEl.getAttribute('data-initial') || '';
          var selected = Array.prototype.find && Array.prototype.find.call(selectEl.options, function(o){ return o.value === chosenVal; });
          if (selected) {
            hidden.value = chosenVal;
            btn.querySelector('.b3-label').textContent = selected.text;
            selectEl.value = chosenVal;
          } else {
            hidden.value = '';
            btn.querySelector('.b3-label').textContent = '— Select —';
            selectEl.selectedIndex = 0;
          }
        }
      }

      function filterMenuItems(menu, searchTerm) {
        var items = menu.querySelectorAll('.dropdown-option-item');
        var multichoiceItems = menu.querySelectorAll('li[data-value]');
        var hasVisibleItems = false;
        
        // Handle regular dropdown items
        Array.prototype.forEach.call(items, function(item) {
          var link = item.querySelector('a');
          if (!link) return;
          
          var searchText = link.getAttribute('data-search-text') || '';
          var isVisible = !searchTerm || searchText.indexOf(searchTerm) !== -1;
          
          item.style.display = isVisible ? '' : 'none';
          if (isVisible && link.getAttribute('data-value') !== '') {
            hasVisibleItems = true;
          }
        });
        
        // Handle multichoice items with checkboxes
        Array.prototype.forEach.call(multichoiceItems, function(item) {
          if (item.className === 'dropdown-option-item') return; // Skip already processed items
          
          var label = item.querySelector('label');
          if (!label) return;
          
          var text = label.textContent.toLowerCase();
          var isVisible = !searchTerm || text.indexOf(searchTerm) !== -1;
          
          item.style.display = isVisible ? '' : 'none';
          if (isVisible) {
            hasVisibleItems = true;
          }
        });
        
        // Show "No results" message if no items match search
        var noResultsItem = menu.querySelector('.no-results-item');
        if (searchTerm && !hasVisibleItems) {
          if (!noResultsItem) {
            noResultsItem = document.createElement('li');
            noResultsItem.className = 'no-results-item';
            noResultsItem.innerHTML = '<a class="dropdown-item disabled" href="#" tabindex="-1" style="color: #6c757d; font-style: italic;">No results found</a>';
            menu.appendChild(noResultsItem);
          }
          noResultsItem.style.display = '';
        } else if (noResultsItem) {
          noResultsItem.style.display = 'none';
        }
      }
      function rebuildDropdown(selectEl) {
        if (selectEl.dataset.enhanced !== '1') return;
        var hidden = selectEl.nextElementSibling;
        var group  = hidden && hidden.nextElementSibling;
        if (!group || !group.classList.contains('btn-group')) return;
        var menu = group.querySelector('.dropdown-menu');
        var btn  = group.querySelector('.dropdown-toggle');
        
        // Get existing search container to preserve it
        var existingSearchContainer = menu.querySelector('.dropdown-search-container');
        var existingSearchInput = existingSearchContainer && existingSearchContainer.querySelector('input');
        
        buildMenuFromSelect(selectEl, menu, btn, hidden, existingSearchContainer, existingSearchInput);
        
        // If we don't have a search container but should have one, create it
        if (!existingSearchContainer) {
          var isObjectField = selectEl.getAttribute('data-object-field') === 'true';
          var shouldShowSearch = isObjectField || selectEl.options.length > 6;
          if (shouldShowSearch) {
            var searchContainer = document.createElement('li');
            searchContainer.className = 'dropdown-search-container';
            searchContainer.style.padding = '8px';
            searchContainer.style.borderBottom = '1px solid #e5e5e5';
            searchContainer.style.marginBottom = '0';

            var searchInput = document.createElement('input');
            searchInput.type = 'text';
            searchInput.className = 'form-control form-control-sm';
            searchInput.placeholder = 'Search...';
            searchInput.style.fontSize = '12px';
            searchInput.style.height = '28px';
            searchInput.setAttribute('autocomplete', 'off');

            searchContainer.appendChild(searchInput);
            menu.insertBefore(searchContainer, menu.firstChild);
            
            // Attach event listeners to new search input
            attachSearchListeners(searchInput, menu, btn, hidden, selectEl);
          }
        }
      }
    
      // ---------- list field enhancer ----------
      function enhanceListField(inputEl) {
        if (inputEl.dataset.enhanced === '1') return;

        var name = inputEl.getAttribute('name');
        var label = inputEl.getAttribute('data-label') || name;
        var isRequired = inputEl.getAttribute('data-required') === 'true';
        var validators = inputEl.getAttribute('data-validators');
        var parsedValidators = [];

        if (validators) {
          try {
            parsedValidators = JSON.parse(validators);
          } catch (e) {
            console.warn('Invalid validators JSON for list field:', name);
          }
        }

        // Hide the original input
        inputEl.style.display = 'none';

        // Create the list container
        var container = document.createElement('div');
        container.className = 'list-field-container';
        container.style.border = '1px solid var(--bs-border-color, #dee2e6)';
        container.style.borderRadius = '4px';
        container.style.padding = '8px';
        container.style.backgroundColor = 'var(--bs-body-bg)';

        // Create input group for adding new items
        var inputGroup = document.createElement('div');
        inputGroup.className = 'input-group';
        inputGroup.style.marginBottom = '8px';
        inputGroup.style.display = 'flex'; 

        var textInput = document.createElement('input');
        textInput.type = 'text';
        textInput.className = 'form-control';
        textInput.placeholder = 'Enter value and click + to add';
        textInput.style.borderRadius = '4px 0 0 4px';
        textInput.style.flex = '1';
        // Mark this as a non-validatable helper input
        textInput.setAttribute('data-list-helper', 'true');
        textInput.setAttribute('data-no-validate', 'true');
        
        // Set up tooltips for the text input based on the validators from the original field
        if (parsedValidators.length > 0) {
          var tooltipMessages = [];
          parsedValidators.forEach(function(validator) {
            if (validator.message) {
              tooltipMessages.push(validator.message);
            } else if (validator.regex) {
              tooltipMessages.push('Must match pattern: ' + validator.regex);
            }
          });
          
          if (tooltipMessages.length > 0) {
            var tooltipText = tooltipMessages.join('\n');
            textInput.setAttribute('title', tooltipText);
            
            // If Bootstrap 5 is available, use native Tooltip API
            if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
              new bootstrap.Tooltip(textInput, {
                placement: 'top',
                trigger: 'hover focus',
                container: 'body',
                title: tooltipText
              });
            }
          }
        }
        
        // Prevent any validation events from bubbling up
        textInput.addEventListener('input', function(e) {
          e.stopPropagation();
        });
        textInput.addEventListener('change', function(e) {
          e.stopPropagation();
        });
        textInput.addEventListener('blur', function(e) {
          e.stopPropagation();
        });

        var addButton = document.createElement('button');
        addButton.type = 'button';
        addButton.className = 'btn btn-success';
        addButton.innerHTML = '+';
        addButton.style.borderRadius = '0 4px 4px 0';
        addButton.style.flexShrink = '0';

        inputGroup.appendChild(textInput);
        inputGroup.appendChild(addButton);

        // Create list display area
        var listDisplay = document.createElement('div');
        listDisplay.className = 'list-items';
        listDisplay.style.minHeight = '30px';
        listDisplay.style.border = '1px solid var(--bs-border-color-translucent, var(--bs-border-color, #dee2e6))';
        listDisplay.style.borderRadius = '4px';
        listDisplay.style.padding = '4px';
        listDisplay.style.backgroundColor = 'var(--bs-tertiary-bg, var(--bs-secondary-bg, #f8f9fa))';

        container.appendChild(inputGroup);
        container.appendChild(listDisplay);

        // Insert container after the original input
        inputEl.parentNode.insertBefore(container, inputEl.nextSibling);

        // Parse initial value
        var currentList = [];
        try {
          if (inputEl.value) {
            currentList = JSON.parse(inputEl.value);
          }
        } catch (e) {
          console.warn('Invalid initial JSON for list field:', name);
        }

        // Function to validate a single item
        function validateItem(value) {
          if (!parsedValidators || parsedValidators.length === 0) {
            return { valid: true };
          }

          for (var i = 0; i < parsedValidators.length; i++) {
            var validator = parsedValidators[i];
            if (validator.regex) {
              var flags = validator.flags ? validator.flags.join('') : '';
              var regex = new RegExp(validator.regex, flags);
              if (!regex.test(value)) {
                return {
                  valid: false,
                  message: validator.message || 'Invalid format'
                };
              }
            }
          }
          return { valid: true };
        }

        // Function to update the hidden input value
        function updateHiddenValue() {
          inputEl.value = JSON.stringify(currentList);
          // Trigger change event for form validation
          var event = new Event('input', { bubbles: true });
          inputEl.dispatchEvent(event);
        }

        // Function to render the list items
        function renderList() {
          listDisplay.innerHTML = '';
          
          if (currentList.length === 0) {
            var emptyMsg = document.createElement('div');
            emptyMsg.style.color = 'var(--bs-secondary-color, #6c757d)';
            emptyMsg.style.fontStyle = 'italic';
            emptyMsg.style.padding = '8px';
            emptyMsg.textContent = 'No items added yet';
            listDisplay.appendChild(emptyMsg);
            return;
          }

          currentList.forEach(function(item, index) {
            var itemEl = document.createElement('div');
            itemEl.className = 'list-item';
            itemEl.style.display = 'flex';
            itemEl.style.justifyContent = 'space-between';
            itemEl.style.alignItems = 'center';
            itemEl.style.padding = '4px 8px';
            itemEl.style.margin = '2px 0';
            itemEl.style.backgroundColor = 'var(--bs-body-bg)';
            itemEl.style.border = '1px solid var(--bs-border-color, #dee2e6)';
            itemEl.style.borderRadius = '3px';

            var itemText = document.createElement('span');
            itemText.textContent = item;
            itemText.style.flex = '1';

            var removeBtn = document.createElement('button');
            removeBtn.type = 'button';
            removeBtn.className = 'btn btn-danger btn-sm';
            removeBtn.innerHTML = 'X';
            removeBtn.style.marginLeft = '8px';
            removeBtn.style.padding = '2px 6px';
            removeBtn.style.fontSize = '12px';

            removeBtn.addEventListener('click', function() {
              currentList.splice(index, 1);
              updateHiddenValue();
              renderList();
            });

            itemEl.appendChild(itemText);
            itemEl.appendChild(removeBtn);
            listDisplay.appendChild(itemEl);
          });
        }

        // Add item function
        function addItem() {
          var value = textInput.value.trim();
          if (!value) return;

          // Validate the item
          var validation = validateItem(value);
          if (!validation.valid) {
            // Show error message
            textInput.style.borderColor = '#d9534f';
            textInput.title = validation.message;
            
            // Clear error styling after a delay
            setTimeout(function() {
              textInput.style.borderColor = '';
              textInput.title = '';
            }, 3000);
            return;
          }

          // Check for duplicates
          if (currentList.indexOf(value) !== -1) {
            textInput.style.borderColor = '#f0ad4e';
            textInput.title = 'Item already exists in the list';
            setTimeout(function() {
              textInput.style.borderColor = '';
              textInput.title = '';
            }, 3000);
            return;
          }

          // Add to list
          currentList.push(value);
          textInput.value = '';
          textInput.style.borderColor = '';
          textInput.title = '';
          updateHiddenValue();
          renderList();
        }

        // Event listeners
        addButton.addEventListener('click', addItem);
        
        textInput.addEventListener('keydown', function(e) {
          if (e.key === 'Enter') {
            e.preventDefault();
            addItem();
          }
        });

        // Initial render
        renderList();
        updateHiddenValue();

        inputEl.dataset.enhanced = '1';
      }

      // ---------- list-of-dictionaries field enhancer ----------
      function normalizeCSVHeader(value) {
        return String(value || '').trim().toLowerCase();
      }

      function parseCSV(text) {
        var source = String(text || '');
        if (source.charCodeAt(0) === 0xFEFF) {
          source = source.slice(1);
        }
        source = source.replace(/\r\n/g, '\n').replace(/\r/g, '\n');

        var rows = [];
        var row = [];
        var cell = '';
        var inQuotes = false;
        var currentLine = 1;

        for (var index = 0; index < source.length; index++) {
          var char = source[index];
          var nextChar = source[index + 1];

          if (inQuotes) {
            if (char === '"') {
              if (nextChar === '"') {
                cell += '"';
                index += 1;
              } else {
                inQuotes = false;
              }
            } else {
              cell += char;
            }
            continue;
          }

          if (char === '"') {
            inQuotes = true;
          } else if (char === ',') {
            row.push(cell);
            cell = '';
          } else if (char === '\n') {
            row.push(cell);
            rows.push({ values: row, lineNumber: currentLine });
            row = [];
            cell = '';
            currentLine += 1;
          } else {
            cell += char;
          }
        }

        if (inQuotes) {
          throw new Error('The CSV contains an unterminated quoted field.');
        }

        if (cell !== '' || row.length > 0) {
          row.push(cell);
          rows.push({ values: row, lineNumber: currentLine });
        }

        if (!rows.length) {
          return { headers: [], rows: [], issues: [] };
        }

        var headerRow = rows.shift();
        var headers = headerRow.values.map(function(header) {
          return String(header || '').trim();
        });

        var issues = [];
        var dataRows = rows.filter(function(currentRow) {
          var hasData = currentRow.values.some(function(value) {
            return String(value || '').trim() !== '';
          });

          if (hasData && currentRow.values.length !== headers.length) {
            issues.push(
              'Row ' + currentRow.lineNumber + ': expected ' + headers.length + ' column' +
              (headers.length === 1 ? '' : 's') + ', found ' + currentRow.values.length + '.'
            );
          }

          return hasData;
        });

        return { headers: headers, rows: dataRows, issues: issues };
      }

      function getDefaultTabularValue(column) {
        var columnType = String((column && column.type) || 'string').toLowerCase();
        return columnType === 'boolean' ? false : '';
      }

      function coerceCSVColumnValue(column, rawValue) {
        var columnType = String((column && column.type) || 'string').toLowerCase();
        var normalized = String(rawValue == null ? '' : rawValue).trim();

        if (columnType === 'boolean') {
          if (!normalized) {
            return { value: false, issue: null, blocking: false };
          }
          var lowered = normalized.toLowerCase();
          if ([ 'true', '1', 'yes', 'y', 'on' ].indexOf(lowered) !== -1) {
            return { value: true, issue: null, blocking: false };
          }
          if ([ 'false', '0', 'no', 'n', 'off', '' ].indexOf(lowered) !== -1) {
            return { value: false, issue: null, blocking: false };
          }

          return {
            value: false,
            issue: 'Unrecognized boolean value "' + normalized + '". Use true/false, yes/no, on/off, or 1/0.',
            blocking: true,
          };
        }

        if (columnType === 'choice') {
          if (!normalized) {
            return { value: '', issue: null, blocking: false };
          }

          var matchedChoice = (column.choices || []).find(function(choice) {
            var choiceValue = String(choice && choice.value != null ? choice.value : '').trim().toLowerCase();
            var choiceLabel = String(choice && (choice.label != null ? choice.label : choice.value) != null ? (choice.label != null ? choice.label : choice.value) : '').trim().toLowerCase();
            return normalized.toLowerCase() === choiceValue || normalized.toLowerCase() === choiceLabel;
          });

          if (matchedChoice) {
            return {
              value: matchedChoice.value,
              issue: null,
              blocking: false,
            };
          }

          return {
            value: normalized,
            issue: 'Choice value "' + normalized + '" does not match any configured option.',
            blocking: false,
          };
        }

        return {
          value: rawValue == null ? getDefaultTabularValue(column) : rawValue,
          issue: null,
          blocking: false,
        };
      }

      function mapCSVToColumns(parsed, columns) {
        var headerIndexByName = {};
        var matchedIndexes = {};
        var issues = (parsed.issues || []).slice();
        var blockingIssues = [];

        parsed.headers.forEach(function(header, index) {
          var normalized = normalizeCSVHeader(header);
          if (normalized && headerIndexByName[normalized] === undefined) {
            headerIndexByName[normalized] = index;
          }
        });

        var mappedColumns = columns.map(function(column) {
          var keyMatch = headerIndexByName[normalizeCSVHeader(column.key)];
          var labelMatch = headerIndexByName[normalizeCSVHeader(column.label || '')];
          var mappedIndex = keyMatch;
          if (mappedIndex === undefined) {
            mappedIndex = labelMatch;
          }
          if (mappedIndex !== undefined) {
            matchedIndexes[mappedIndex] = true;
          }
          return {
            column: column,
            index: mappedIndex,
          };
        });

        var missingColumns = mappedColumns.filter(function(entry) {
          return entry.index === undefined && entry.column.required === true;
        }).map(function(entry) {
          return entry.column.label || entry.column.key;
        });

        var unmappedHeaders = parsed.headers.filter(function(_header, index) {
          return !matchedIndexes[index];
        });

        var mappedRows = parsed.rows.map(function(rowEntry) {
          var row = {};
          mappedColumns.forEach(function(entry) {
            var rawValue = entry.index === undefined ? getDefaultTabularValue(entry.column) : rowEntry.values[entry.index];
            var coercion = coerceCSVColumnValue(entry.column, rawValue);
            row[entry.column.key] = coercion.value;

            if (coercion.issue) {
              var issueText = 'Row ' + rowEntry.lineNumber + ', ' + (entry.column.label || entry.column.key) + ': ' + coercion.issue;
              if (coercion.blocking) {
                blockingIssues.push(issueText);
              } else {
                issues.push(issueText);
              }
            }
          });
          return row;
        });

        return {
          mappedRows: mappedRows,
          unmappedHeaders: unmappedHeaders,
          missingColumns: missingColumns,
          issues: issues,
          blockingIssues: blockingIssues,
        };
      }

      function summarizeCSVMessages(messages, limit) {
        var rows = Array.isArray(messages) ? messages.filter(Boolean) : [];
        var maxItems = typeof limit === 'number' ? limit : 5;
        if (rows.length <= maxItems) {
          return rows;
        }

        var visible = rows.slice(0, maxItems);
        visible.push((rows.length - maxItems) + ' more issue' + (rows.length - maxItems === 1 ? '' : 's') + ' not shown.');
        return visible;
      }

      function buildCSVTemplateContent(columns) {
        var headers = columns.map(function(column) {
          return '"' + String(column.label || column.key || '').replace(/"/g, '""') + '"';
        });
        return headers.join(',') + '\n';
      }

      function enhanceListDictField(inputEl) {
        if (inputEl.dataset.enhanced === '1') return;

        var name = inputEl.getAttribute('name');
        var label = inputEl.getAttribute('data-label') || name;
        var isRequired = inputEl.getAttribute('data-required') === 'true';
        var columns = [];

        // Read columns schema from the dedicated <script type="application/json"> block
        // injected by the server template. This avoids HTML-attribute escaping issues.
        var scriptEl = document.getElementById('listdict-columns-' + name);
        if (scriptEl) {
          try {
            columns = JSON.parse(scriptEl.textContent);
          } catch (e) {
            console.error('[list-dict] Failed to parse columns JSON from <script> block for field:', name, e);
          }
        }

        // Fallback: try data-columns attribute (backward compat)
        if ((!Array.isArray(columns) || columns.length === 0) && inputEl.getAttribute('data-columns')) {
          try {
            columns = JSON.parse(inputEl.getAttribute('data-columns'));
          } catch (e) {
            console.error('[list-dict] Failed to parse data-columns for field:', name, e);
          }
        }

        // Cache resolved schema for downstream validators.
        try {
          inputEl.setAttribute('data-columns-resolved', JSON.stringify(Array.isArray(columns) ? columns : []));
        } catch (e) {
          // Ignore serialization/cache issues.
        }

        console.debug('[list-dict] enhancing field:', name, 'columns found:', Array.isArray(columns) ? columns.length : 0, columns);

        if (!Array.isArray(columns) || columns.length === 0) {
          console.error('[list-dict] No columns defined for field:', name,
            '— table will have no editable columns.',
            'Ensure workflow YAML has a "columns" list and the Git repo has been re-synced.');
        }

        // Ensure the original input stays hidden (type=hidden is already
        // invisible; belt-and-suspenders for type=text fallback)
        inputEl.style.display = 'none';

        // Create the container
        var container = document.createElement('div');
        container.className = 'list-dict-field-container';
        container.style.border = '1px solid var(--bs-border-color, #dee2e6)';
        container.style.borderRadius = '4px';
        container.style.padding = '8px';
        container.style.backgroundColor = 'var(--bs-body-bg)';

        // Header / actions
        var actionsRow = document.createElement('div');
        actionsRow.style.display = 'flex';
        actionsRow.style.justifyContent = 'flex-start';
        actionsRow.style.alignItems = 'center';
        actionsRow.style.flexWrap = 'wrap';
        actionsRow.style.gap = '8px';
        actionsRow.style.marginBottom = '8px';

        var addRowBtn = document.createElement('button');
        addRowBtn.type = 'button';
        addRowBtn.className = 'btn btn-success btn-sm';
        addRowBtn.textContent = 'Add Row';

        var uploadCsvBtn = document.createElement('button');
        uploadCsvBtn.type = 'button';
        uploadCsvBtn.className = 'btn btn-secondary btn-sm';
        uploadCsvBtn.textContent = 'Upload CSV';

        var downloadTemplateBtn = document.createElement('button');
        downloadTemplateBtn.type = 'button';
        downloadTemplateBtn.className = 'btn btn-outline-secondary btn-sm';
        downloadTemplateBtn.textContent = 'Download Template';

        var csvFileInput = document.createElement('input');
        csvFileInput.type = 'file';
        csvFileInput.accept = '.csv,text/csv';
        csvFileInput.style.display = 'none';

        actionsRow.appendChild(addRowBtn);
        actionsRow.appendChild(uploadCsvBtn);
        actionsRow.appendChild(downloadTemplateBtn);
        actionsRow.appendChild(csvFileInput);

        var csvStatusBanner = document.createElement('div');
        csvStatusBanner.className = 'alert alert-info';
        csvStatusBanner.style.display = 'none';
        csvStatusBanner.style.padding = '6px 10px';
        csvStatusBanner.style.margin = '8px 0 0 0';

        // Row-level warning banner
        var warningBanner = document.createElement('div');
        warningBanner.className = 'alert alert-warning';
        warningBanner.style.display = 'none';
        warningBanner.style.padding = '6px 10px';
        warningBanner.style.margin = '8px 0 0 0';
        warningBanner.textContent = 'Duplicate values found in columns marked as unique.';

        // Table
        var tableWrap = document.createElement('div');
        tableWrap.className = 'list-dict-table-wrap';

        var table = document.createElement('table');
        table.className = 'table table-sm list-dict-table';

        var thead = document.createElement('thead');
        var headRow = document.createElement('tr');

        function getColumnMinWidth(col) {
          var colType = (col && col.type ? String(col.type) : 'string').toLowerCase();
          if (colType === 'boolean') return '110px';
          if (colType === 'integer' || colType === 'number') return '140px';
          if (colType === 'choice') return '170px';
          return '220px';
        }

        columns.forEach(function(col){
          var th = document.createElement('th');
          th.textContent = col.label || col.key || 'Column';
          th.style.minWidth = getColumnMinWidth(col);
          headRow.appendChild(th);
        });

        var thActions = document.createElement('th');
        thActions.textContent = 'Actions';
        thActions.className = 'list-dict-actions-col';
        headRow.appendChild(thActions);

        thead.appendChild(headRow);
        table.appendChild(thead);

        var tbody = document.createElement('tbody');
        table.appendChild(tbody);

        container.appendChild(actionsRow);
  container.appendChild(csvStatusBanner);
        container.appendChild(warningBanner);
        tableWrap.appendChild(table);
        container.appendChild(tableWrap);

        // Insert the container into the field's group div.
        // The group div is <div class="mb-3" id="group_<name>">.
        var groupDiv = document.getElementById('group_' + name);
        if (groupDiv) {
          groupDiv.appendChild(container);
        } else {
          // Fallback: insert after the hidden input
          inputEl.parentNode.insertBefore(container, inputEl.nextSibling);
        }

        // Parse initial value
        var currentList = [];
        try {
          if (inputEl.value) {
            var parsed = JSON.parse(inputEl.value);
            currentList = Array.isArray(parsed) ? parsed : [];
          }
        } catch (e) {
          console.warn('Invalid initial JSON for list-dict field:', name);
        }

        function updateHiddenValue() {
          inputEl.value = JSON.stringify(currentList);
          var event = new Event('input', { bubbles: true });
          inputEl.dispatchEvent(event);
        }

        function showCSVStatus(level, message) {
          if (!message || (Array.isArray(message) && message.length === 0)) {
            csvStatusBanner.style.display = 'none';
            csvStatusBanner.innerHTML = '';
            csvStatusBanner.className = 'alert alert-info';
            return;
          }
          csvStatusBanner.className = 'alert alert-' + level;
          csvStatusBanner.innerHTML = '';

          if (Array.isArray(message)) {
            var list = document.createElement('ul');
            list.className = 'mb-0';
            message.forEach(function(line) {
              var item = document.createElement('li');
              item.textContent = line;
              list.appendChild(item);
            });
            csvStatusBanner.appendChild(list);
          } else {
            csvStatusBanner.textContent = message;
          }
          csvStatusBanner.style.display = '';
        }

        function getColumnInputValue(type, input) {
          if (type === 'boolean') {
            return input.checked;
          }
          if (type === 'integer' || type === 'number') {
            return input.value === '' ? '' : Number(input.value);
          }
          return input.value;
        }

        function syncCurrentListFromDom() {
          var rows = [];

          Array.prototype.forEach.call(tbody.querySelectorAll('tr'), function(tr) {
            var tdList = tr.querySelectorAll('td');
            if (!tdList.length || tdList.length < columns.length) {
              return;
            }

            var rowData = {};
            var hasEditableCells = false;

            columns.forEach(function(col, colIndex) {
              var cell = tr.children[colIndex];
              if (!cell) {
                return;
              }

              var field = cell.querySelector('input, select, textarea');
              if (!field) {
                return;
              }

              hasEditableCells = true;
              var type = (col.type || 'string').toLowerCase();
              rowData[col.key] = getColumnInputValue(type, field);
            });

            if (hasEditableCells) {
              rows.push(rowData);
            }
          });

          currentList = rows;
          updateHiddenValue();
        }

        inputEl._syncListDictFromDom = syncCurrentListFromDom;

        function buildInputForColumn(col, value, rowIndex) {
          var type = (col.type || 'string').toLowerCase();
          var input;

          if (type === 'boolean') {
            input = document.createElement('input');
            input.type = 'checkbox';
            input.checked = value === true || value === 'true';
            input.className = 'form-check-input';
          } else if (type === 'integer' || type === 'number') {
            input = document.createElement('input');
            input.type = 'number';
            input.className = 'form-control form-control-sm';
            input.value = value !== undefined && value !== null ? value : '';
          } else if (type === 'choice' && Array.isArray(col.choices)) {
            input = document.createElement('select');
            input.className = 'form-select form-select-sm';
            var placeholder = document.createElement('option');
            placeholder.value = '';
            placeholder.textContent = '— Select —';
            input.appendChild(placeholder);
            col.choices.forEach(function(opt){
              var o = document.createElement('option');
              o.value = opt.value;
              o.textContent = opt.label || opt.value;
              input.appendChild(o);
            });
            if (value !== undefined && value !== null) {
              input.value = String(value);
            }
          } else {
            input = document.createElement('input');
            input.type = 'text';
            input.className = 'form-control form-control-sm';
            input.value = value !== undefined && value !== null ? value : '';
          }

          input.setAttribute('data-no-validate', 'true');

          function validateCell() {
            var errors = [];
            var labelText = col.label || col.key || 'Value';
            var required = col.required === true;
            var v;

            if (type === 'boolean') {
              v = input.checked;
              // Boolean required just means value must be provided; any boolean is valid.
            } else if (type === 'integer' || type === 'number') {
              v = input.value;
              if (required && (v === '' || v === null || v === undefined)) {
                errors.push(labelText + ' is required.');
              } else if (v !== '' && isNaN(Number(v))) {
                errors.push(labelText + ' must be a number.');
              }
            } else if (type === 'choice' && Array.isArray(col.choices)) {
              v = input.value;
              if (required && (!v || v === '')) {
                errors.push(labelText + ' is required.');
              }
            } else {
              v = input.value;
              if (required && (!v || v.trim() === '')) {
                errors.push(labelText + ' is required.');
              }
              if (v && Array.isArray(col.validators)) {
                col.validators.forEach(function(validator){
                  if (validator.regex) {
                    var flags = (validator.flags || []).join('');
                    var regex = new RegExp(validator.regex, flags);
                    if (!regex.test(v)) {
                      errors.push(validator.message || (labelText + ' format is invalid.'));
                    }
                  }
                });
              }
            }

            if (errors.length > 0) {
              input.classList.add('is-invalid');
              input.setAttribute('title', errors.join('\n'));
            } else {
              input.classList.remove('is-invalid');
              input.removeAttribute('title');
            }

            return errors;
          }

          function syncCellValue() {
            var v = getColumnInputValue(type, input);
            if (!currentList[rowIndex]) currentList[rowIndex] = {};
            currentList[rowIndex][col.key] = v;
            updateHiddenValue();
            validateCell();
            applyUniquenessHighlights();
          }

          input.addEventListener('input', syncCellValue);
          input.addEventListener('change', syncCellValue);

          input.addEventListener('blur', function(){
            syncCurrentListFromDom();
            validateCell();
          });

          return input;
        }

        function applyUniquenessHighlights() {
          if (!Array.isArray(columns) || columns.length === 0) return;

          var anyDuplicates = false;

          columns.forEach(function(col, colIndex){
            if (col.unique !== true) return;

            var seen = new Map();
            var duplicates = new Set();

            currentList.forEach(function(row, rowIndex){
              if (!row) return;
              var val = row[col.key];
              if (val === undefined || val === null || String(val).trim() === '') return;
              var key = String(val).trim().toLowerCase();
              if (seen.has(key)) {
                duplicates.add(seen.get(key));
                duplicates.add(rowIndex);
              } else {
                seen.set(key, rowIndex);
              }
            });

            var rows = tbody.querySelectorAll('tr');
            rows.forEach(function(tr, rowIndex){
              if (!tr || tr.children.length === 0) return;
              var cell = tr.children[colIndex];
              if (!cell) return;
              var field = cell.querySelector('input, select');
              if (!field) return;
              if (duplicates.has(rowIndex)) {
                anyDuplicates = true;
                field.classList.add('is-invalid');
                var existingTitle = field.getAttribute('title') || '';
                var dupMsg = (col.label || col.key || 'Value') + ' must be unique.';
                if (!existingTitle.includes(dupMsg)) {
                  field.setAttribute('title', (existingTitle ? (existingTitle + '\n') : '') + dupMsg);
                }
              } else {
                if (field.getAttribute('title') && field.getAttribute('title').includes('must be unique')) {
                  field.removeAttribute('title');
                }
              }
            });
          });

          if (anyDuplicates) {
            warningBanner.style.display = '';
          } else {
            warningBanner.style.display = 'none';
          }
        }

        function renderRows() {
          tbody.innerHTML = '';

          if (currentList.length === 0) {
            var emptyRow = document.createElement('tr');
            var emptyCell = document.createElement('td');
            emptyCell.colSpan = Math.max(columns.length + 1, 1);
            emptyCell.style.color = 'var(--bs-secondary-color, #6c757d)';
            emptyCell.style.fontStyle = 'italic';
            emptyCell.style.padding = '8px';
            emptyCell.textContent = 'No items added yet. Upload a CSV or add rows manually.';
            emptyRow.appendChild(emptyCell);
            tbody.appendChild(emptyRow);
            return;
          }

          currentList.forEach(function(row, rowIndex){
            var tr = document.createElement('tr');

            columns.forEach(function(col){
              var td = document.createElement('td');
              td.style.verticalAlign = 'middle';
              td.style.minWidth = getColumnMinWidth(col);
              var val = row ? row[col.key] : '';
              var input = buildInputForColumn(col, val, rowIndex);
              input.style.minWidth = getColumnMinWidth(col);
              td.appendChild(input);
              tr.appendChild(td);
            });

            var tdActions = document.createElement('td');
            tdActions.style.verticalAlign = 'middle';
            tdActions.className = 'list-dict-actions-col';
            var removeBtn = document.createElement('button');
            removeBtn.type = 'button';
            removeBtn.className = 'btn btn-danger btn-sm';
            removeBtn.textContent = 'Remove';
            removeBtn.addEventListener('click', function(){
              currentList.splice(rowIndex, 1);
              updateHiddenValue();
              renderRows();
            });
            tdActions.appendChild(removeBtn);
            tr.appendChild(tdActions);
            tbody.appendChild(tr);
          });

          applyUniquenessHighlights();
        }

        addRowBtn.addEventListener('click', function(){
          showCSVStatus('', '');
          var newRow = {};
          columns.forEach(function(col){
            var type = (col.type || 'string').toLowerCase();
            if (type === 'boolean') {
              newRow[col.key] = false;
            } else {
              newRow[col.key] = '';
            }
          });
          currentList.push(newRow);
          updateHiddenValue();
          renderRows();
        });

        uploadCsvBtn.addEventListener('click', function() {
          csvFileInput.click();
        });

        downloadTemplateBtn.addEventListener('click', function() {
          var csvContent = buildCSVTemplateContent(columns);
          var blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
          var downloadLink = document.createElement('a');
          downloadLink.href = URL.createObjectURL(blob);
          downloadLink.download = name + '_template.csv';
          document.body.appendChild(downloadLink);
          downloadLink.click();
          document.body.removeChild(downloadLink);
          URL.revokeObjectURL(downloadLink.href);
        });

        csvFileInput.addEventListener('change', function(event) {
          var selectedFile = event.target.files && event.target.files[0];
          if (!selectedFile) {
            return;
          }

          var reader = new FileReader();
          reader.onload = function(loadEvent) {
            try {
              var parsed = parseCSV(loadEvent.target && loadEvent.target.result ? loadEvent.target.result : '');
              if (!parsed.headers.length) {
                showCSVStatus('danger', 'The uploaded CSV is empty or missing a header row.');
                return;
              }

              var mapped = mapCSVToColumns(parsed, columns);
              var matchedColumns = columns.length - mapped.missingColumns.length;
              if (!mapped.mappedRows.length && parsed.rows.length) {
                showCSVStatus('danger', 'The CSV could not be mapped to any configured columns.');
                return;
              }

              if (mapped.blockingIssues.length) {
                showCSVStatus('danger', summarizeCSVMessages(
                  ['The CSV was not imported because some values cannot be represented in the form.']
                    .concat(mapped.blockingIssues),
                  6
                ));
                return;
              }

              currentList = mapped.mappedRows;
              updateHiddenValue();
              renderRows();

              var messages = [];
              messages.push('Loaded ' + mapped.mappedRows.length + ' row' + (mapped.mappedRows.length === 1 ? '' : 's') + ' from ' + selectedFile.name + '.');
              if (matchedColumns <= 0) {
                messages.push('No matching headers were found.');
              }
              if (mapped.missingColumns.length) {
                messages.push('Missing required columns: ' + mapped.missingColumns.join(', ') + '.');
              }
              if (mapped.unmappedHeaders.length) {
                messages.push('Ignored CSV columns: ' + mapped.unmappedHeaders.join(', ') + '.');
              }
              if (mapped.issues.length) {
                messages = messages.concat(summarizeCSVMessages(mapped.issues, 5));
              }

              showCSVStatus((mapped.missingColumns.length || mapped.issues.length) ? 'warning' : 'success', messages);
            } catch (error) {
              console.error('CSV upload failed for field', name, error);
              showCSVStatus('danger', String(error && error.message ? error.message : 'Unable to parse the CSV file. Check quoting and delimiters, then try again.'));
            } finally {
              csvFileInput.value = '';
            }
          };

          reader.onerror = function() {
            showCSVStatus('danger', 'The selected file could not be read.');
            csvFileInput.value = '';
          };

          reader.readAsText(selectedFile);
        });

        renderRows();
        updateHiddenValue();

        inputEl.dataset.enhanced = '1';
      }

      // ---------- population & cascade ----------
      function resetSelect(selectEl) {
        ensurePlaceholder(selectEl);
        selectEl.selectedIndex = 0;
        if (selectEl.dataset.enhanced === '1') {
          var hidden = selectEl.nextElementSibling;
          var group  = hidden && hidden.nextElementSibling;
          hidden.value = '';
          if (group) {
            var lbl = group.querySelector('.dropdown-toggle .b3-label');
            if (lbl) lbl.textContent = '— Select —';
            var menu = group.querySelector('.dropdown-menu'); if (menu) {/* rebuilt later */}
          }
        }
      }
    
      function populateOptions(selectEl, deps) {
        var fieldName = selectEl.getAttribute('name') || selectEl.dataset.originalName;
        var url = window.location.pathname.replace(/\/launch\/$/, '/inputs/' + fieldName + '/options/');
        var params = new URLSearchParams();
        (deps || []).forEach(function(d){
          var v = ctrlVal(d);
          if (v !== '') params.append(d, v);
        });
        var full = params.toString() ? (url + '?' + params.toString()) : url;

        // Show loading state while preserving search container
        if (selectEl.dataset.enhanced === '1') {
          var group  = selectEl.nextElementSibling && selectEl.nextElementSibling.nextElementSibling;
          var menu   = group && group.querySelector('.dropdown-menu');
          if (menu) { 
            // Preserve search container if it exists
            var searchContainer = menu.querySelector('.dropdown-search-container');
            var searchInput = searchContainer && searchContainer.querySelector('input');
            
            // Clear all items except search container
            if (searchContainer) {
              var childrenToRemove = [];
              Array.prototype.forEach.call(menu.children, function(child) {
                if (child !== searchContainer) {
                  childrenToRemove.push(child);
                }
              });
              childrenToRemove.forEach(function(child) {
                menu.removeChild(child);
              });
              // Clear the search input
              if (searchInput) {
                searchInput.value = '';
              }
            } else {
              menu.innerHTML = '';
            }
            
            var loadingItem = document.createElement('li');
            loadingItem.className = 'disabled';
            loadingItem.innerHTML = '<a href="#">Loading…</a>';
            menu.appendChild(loadingItem);
          }
        }

        return fetch(full).then(function(r){ return r.json(); }).then(function(data){
          selectEl.innerHTML = '';
          var ph = document.createElement('option');
          ph.value = ''; ph.textContent = '— Select —'; selectEl.appendChild(ph);
          
          // Track added values to prevent duplicates
          var addedValues = new Set();
          (data.options || []).forEach(function(opt){
            // Skip if we've already added this value
            if (addedValues.has(opt.value)) {
              return;
            }
            addedValues.add(opt.value);
            
            var o = document.createElement('option');
            o.value = opt.value; o.textContent = opt.label;
            selectEl.appendChild(o);
          });
          // If a hidden proxy exists with a prefilled value (data-initial),
          // and that value is present among fetched options, select it.
          var hidden = selectEl.nextElementSibling;
          var selectedSet = false;
          // Prefer hidden proxy value, fall back to the original select's data-initial
          var pref = null;
          if (hidden && hidden.value) pref = hidden.value;
          if ((!pref || pref === '') && selectEl.getAttribute('data-initial')) pref = selectEl.getAttribute('data-initial');

          // Debug output to help diagnose mismatches between initial and fetched options
          try { console.debug('populateOptions for', fieldName, 'pref=', pref, 'fetched=', (data.options||[]).map(function(o){return o.value;})); } catch(e){}

          if (pref) {
            var match = Array.prototype.find.call(selectEl.options, function(o){ return o.value === pref; });
            if (match) {
              try { selectEl.value = pref; selectedSet = true; } catch (e) { selectedSet = false; }
            }
          }
          if (!selectedSet) {
            selectEl.selectedIndex = 0;
          }
          rebuildDropdown(selectEl);
        });
      }      function markDependentsForRefresh(parentName) {
        dependentsOf(parentName).forEach(function(child){
          child.dataset.needsRefresh = '1';
          resetSelect(child);
          // recurse to grandchildren
          var n = child.getAttribute('name') || child.dataset.originalName;
          markDependentsForRefresh(n);
        });
      }
    
      // ---------- visibility orchestrator ----------
      function setVisible(el, visible) {
        var grp = groupOf(el); if (!grp) return;
        var prev = el.dataset._visible === '1';
        el.dataset._visible = visible ? '1' : '0';
        grp.style.display = visible ? '' : 'none';
        if (!visible) {
          // If we're in the initial load preserve phase and the server
          // provided an initial value for this field, don't wipe it out.
          if (window._preserve_initial && el.getAttribute && el.getAttribute('data-initial')) {
            // Leave value intact; the visibility update will rebuild UI as needed
          } else if (el.tagName === 'SELECT') {
            resetSelect(el);
          } else if (el.getAttribute('data-enhance') === 'list') {
            // For list fields, reset to empty array
            el.value = '[]';
            // Also clear the visual list if it exists
            var container = el.parentNode.querySelector('.list-field-container');
            if (container) {
              var listDisplay = container.querySelector('.list-items');
              if (listDisplay) {
                listDisplay.innerHTML = '<div style="color: #666; font-style: italic; padding: 8px;">No items added yet</div>';
              }
              var textInput = container.querySelector('input[type="text"]');
              if (textInput) {
                textInput.value = '';
              }
            }
          } else if (el.getAttribute('data-enhance') === 'list-dict') {
            // For list-of-dictionaries fields, reset to empty array and clear table
            el.value = '[]';
            var dictContainer = el.parentNode.querySelector('.list-dict-field-container');
            if (dictContainer) {
              var tbody = dictContainer.querySelector('tbody');
              if (tbody) {
                tbody.innerHTML = '<tr><td style="color: #666; font-style: italic; padding: 8px;" colspan="99">No items added yet</td></tr>';
              }
            }
          } else {
            el.value = '';
          }
        }
        return { prev: prev, now: visible };
      }
    
      function updateVisibility() {
        // pass 1: apply visibility and capture transitions
        var transitions = [];
        document.querySelectorAll('#dynamic-form [data-show-if-field], #dynamic-form [data-depends-on]').forEach(function(el){
          var vis = showRuleSatisfied(el) && depsSatisfied(el);
          var t = setVisible(el, vis);
          if (t && !t.prev && t.now) transitions.push(el); // became visible
        });
    
        // pass 2: for selects that just became visible & have deps satisfied → force populate now
        transitions.forEach(function(el){
          if (el.tagName !== 'SELECT') return;
          var deps = depsOf(el);
          if (!deps.length) return; // top-level handled later
          if (depsSatisfied(el)) {
            el.dataset.needsRefresh = '1';
            populateOptions(el, deps).finally(function(){ el.dataset.needsRefresh = '0'; });
          }
        });
    
        // populate dependents marked for refresh
        document.querySelectorAll('select[data-depends-on]').forEach(function(selectEl){
          if (!depsSatisfied(selectEl)) return;
          if (selectEl.dataset.needsRefresh === '1' || selectEl.options.length <= 1) {
            var deps = depsOf(selectEl);
            populateOptions(selectEl, deps).finally(function(){ selectEl.dataset.needsRefresh = '0'; });
          }
        });
    
        // top‑level object/choice selects (no depends): add placeholder and preload object fields if specified
        document.querySelectorAll('select[data-enhance="dropdown"]:not([data-depends-on])').forEach(function(selectEl){
          if (selectEl.getAttribute('data-jinja-choices') === 'true' && selectEl.options.length <= 1) {
            // Only auto-populate Jinja choice fields (not object fields)
            populateOptions(selectEl, []);
          } else if (selectEl.getAttribute('data-object-field') === 'true' && 
                     selectEl.getAttribute('data-preload') === 'true' && 
                     selectEl.options.length <= 1) {
            // Pre-load object fields with first 200 entries for better UX
            populateOptions(selectEl, []);
          } else {
            // For other fields, just ensure placeholder and rebuild dropdown
            ensurePlaceholder(selectEl);
            rebuildDropdown(selectEl);
          }
        });
      }
    
      // wire up changes on both native inputs and hidden proxies
      formEl.addEventListener('change', function(e){
        var name = e.target.getAttribute('name'); if (!name) return;
        markDependentsForRefresh(name);
        updateVisibility();
      });

      // Handle scheduling field visibility
      function updateSchedulingVisibility() {
        var executionType = document.querySelector('input[name="execution_type"]:checked');
        var scheduledGroup = document.getElementById('group_scheduled_datetime');
        
        if (executionType && scheduledGroup) {
          if (executionType.value === 'scheduled') {
            scheduledGroup.style.display = 'block';
          } else {
            scheduledGroup.style.display = 'none';
          }
        }
      }

      // Set up scheduling field event listeners
      document.addEventListener('change', function(e) {
        if (e.target.name === 'execution_type') {
          updateSchedulingVisibility();
        }
      });

      // Initialize scheduling visibility on page load
      updateSchedulingVisibility();
    
      // ---------- Client-side validation ----------
      function isDynamicListHelperField(field) {
        return Boolean(
          field && (
            field.closest('.list-field-container') ||
            field.closest('.list-dict-field-container') ||
            field.getAttribute('data-list-helper') === 'true' ||
            field.getAttribute('data-no-validate') === 'true'
          )
        );
      }

      function validateField(field) {
        // Skip validation for helper controls inside dynamic list/listdict widgets.
        if (isDynamicListHelperField(field)) {
          return [];
        }
        
        // Skip validation for the hidden list field itself - it stores JSON and shouldn't be validated with string validators
        if (field.getAttribute('data-enhance') === 'list') {
          return [];
        }
        if (field.getAttribute('data-enhance') === 'list-dict') {
          return [];
        }
        
        var errors = [];
        var value = getFieldValue(field);
        var fieldName = field.getAttribute('name') || field.dataset.originalName;
        var label = getFieldLabel(fieldName);
        
        // Check required fields
        if (field.getAttribute('data-required') === 'true' && (!value || value.trim() === '')) {
          errors.push(label + ' is required.');
        }
        
        // Check regex validators
        var validators = field.getAttribute('data-validators');
        if (validators && value) {
          try {
            var validatorList = JSON.parse(validators);
            validatorList.forEach(function(validator) {
              if (validator.regex) {
                var flags = (validator.flags || []).join('');
                var regex = new RegExp(validator.regex, flags);
                if (!regex.test(value)) {
                  errors.push(validator.message || label + ' format is invalid.');
                }
              }
            });
          } catch (e) {
            console.warn('Invalid validator format for field:', fieldName);
          }
        }
        
        return errors;
      }

      function getFieldValue(field) {
        var fieldName = field.getAttribute('name') || field.dataset.originalName;
        var proxy = getProxyOrReal(fieldName);
        
        if (!proxy) return '';
        
        if (proxy.type === 'checkbox') {
          return proxy.checked ? 'true' : 'false';
        }
        
        // For list fields, check if the value is empty list
        if (field.getAttribute('data-enhance') === 'list') {
          var listValue = proxy.value || '[]';
          try {
            var parsed = JSON.parse(listValue);
            return Array.isArray(parsed) && parsed.length > 0 ? listValue : '';
          } catch (e) {
            return '';
          }
        }
        // For list-of-dictionaries fields, check if the value is empty list
        if (field.getAttribute('data-enhance') === 'list-dict') {
          var dictValue = proxy.value || '[]';
          try {
            var parsedDict = JSON.parse(dictValue);
            return Array.isArray(parsedDict) && parsedDict.length > 0 ? dictValue : '';
          } catch (e) {
            return '';
          }
        }
        
        // For multichoice fields, check if the value is empty array
        if (proxy.getAttribute('data-multichoice') === 'true' || proxy.getAttribute('data-multiobject') === 'true') {
          var multiValue = proxy.value || '[]';
          try {
            var parsed = JSON.parse(multiValue);
            return Array.isArray(parsed) && parsed.length > 0 ? multiValue : '';
          } catch (e) {
            return proxy.value || '';
          }
        }
        
        return proxy.value || '';
      }

      function getFieldLabel(fieldName) {
        var group = document.getElementById('group_' + fieldName);
        if (group) {
          var label = group.querySelector('label');
          if (label) {
            return label.textContent.replace(/\s*\*?\s*$/, ''); // Remove asterisk
          }
        }
        return fieldName;
      }

      function showFieldError(fieldName, errors) {
        var group = document.getElementById('group_' + fieldName);
        if (!group) return;
        
        // Remove existing error state
        group.classList.remove('has-error');
        var existingError = group.querySelector('.help-block.validation-error');
        if (existingError) {
          existingError.remove();
        }
        
        if (errors.length > 0) {
          // Add error state
          group.classList.add('has-error');
          
          // Create error message
          var errorBlock = document.createElement('span');
          errorBlock.className = 'help-block validation-error';
          errorBlock.innerHTML = errors.join('<br/>');
          
          // Insert after the field
          var field = group.querySelector('input, select, textarea, .btn-group');
          if (field) {
            field.parentNode.insertBefore(errorBlock, field.nextSibling);
          } else {
            group.appendChild(errorBlock);
          }
        }
      }

      function getListDictColumns(field) {
        var fieldName = field.getAttribute('name') || field.dataset.originalName;
        if (!fieldName) return [];

        var columns = [];

        // Preferred source: template-injected JSON block.
        var scriptEl = document.getElementById('listdict-columns-' + fieldName);
        if (scriptEl) {
          try {
            columns = JSON.parse(scriptEl.textContent || '[]');
          } catch (e) {
            columns = [];
          }
        }

        // Fallback: resolved/cached schema from enhancer.
        if ((!Array.isArray(columns) || columns.length === 0) && field.getAttribute('data-columns-resolved')) {
          try {
            columns = JSON.parse(field.getAttribute('data-columns-resolved'));
          } catch (e) {
            columns = [];
          }
        }

        // Backward compatibility fallback.
        if ((!Array.isArray(columns) || columns.length === 0) && field.getAttribute('data-columns')) {
          try {
            columns = JSON.parse(field.getAttribute('data-columns'));
          } catch (e) {
            columns = [];
          }
        }

        return Array.isArray(columns) ? columns : [];
      }

      function validateForm() {
        var hasErrors = false;
        var errorSummary = [];

        document.querySelectorAll('#dynamic-form input[data-enhance="list-dict"]').forEach(function(field) {
          if (typeof field._syncListDictFromDom === 'function') {
            field._syncListDictFromDom();
          }
        });
        
        // Clear any existing client-side validation summary (preserve Django server errors)
        var existingSummary = document.querySelector('.alert.alert-danger.wf-validation-error');
        if (existingSummary) {
          existingSummary.remove();
        }

        // Clear all previous inline validation errors
        document.querySelectorAll('#dynamic-form .mb-3.has-error').forEach(function(g) {
          g.classList.remove('has-error');
          var prev = g.querySelector('.help-block.validation-error');
          if (prev) prev.remove();
        });
        
        // Validate all visible fields
        document.querySelectorAll('#dynamic-form input, #dynamic-form select, #dynamic-form textarea').forEach(function(field) {
          var group = groupOf(field);
          if (!group || group.style.display === 'none') return; // Skip hidden fields
          
          var fieldName = field.getAttribute('name') || field.dataset.originalName;
          if (!fieldName || field.type === 'hidden') return;
          
          if (isDynamicListHelperField(field)) {
            return;
          }
          
          var errors = validateField(field);
          showFieldError(fieldName, errors);
          
          if (errors.length > 0) {
            hasErrors = true;
            var label = getFieldLabel(fieldName);
            errors.forEach(function(error) {
              errorSummary.push({ field: fieldName, label: label, error: error });
            });
          }
        });

        // Validate list and list-of-dictionaries fields explicitly (hidden inputs)
        document.querySelectorAll('#dynamic-form input[data-enhance="list"], #dynamic-form input[data-enhance="list-dict"]').forEach(function(field) {
          var group = groupOf(field);
          if (!group || group.style.display === 'none') return;
          var fieldName = field.getAttribute('name') || field.dataset.originalName;
          if (!fieldName) return;

          var isRequired = field.getAttribute('data-required') === 'true';
          var rawValue = field.value || '[]';
          var parsed = [];
          try {
            parsed = JSON.parse(rawValue);
          } catch (e) {
            parsed = [];
          }

          if (isRequired && (!Array.isArray(parsed) || parsed.length === 0)) {
            var label = getFieldLabel(fieldName);
            var message = label + ' is required.';
            showFieldError(fieldName, [message]);
            hasErrors = true;
            errorSummary.push({ field: fieldName, label: label, error: message });
            return;
          }

          if (field.getAttribute('data-enhance') === 'list-dict') {
            var columns = getListDictColumns(field);

            if (Array.isArray(parsed)) {
              parsed.forEach(function(row, idx){
                columns.forEach(function(col){
                  var labelText = col.label || col.key || 'Value';
                  var required = col.required === true;
                  var type = (col.type || 'string').toLowerCase();
                  var value = row ? row[col.key] : undefined;

                  if (required) {
                    if (type === 'boolean') {
                      // any boolean is acceptable
                    } else if (type === 'integer' || type === 'number') {
                      if (value === '' || value === null || value === undefined) {
                        var msg = (getFieldLabel(fieldName)) + ' row ' + (idx + 1) + ': ' + labelText + ' is required.';
                        showFieldError(fieldName, [msg]);
                        hasErrors = true;
                        errorSummary.push({ field: fieldName, label: getFieldLabel(fieldName), error: msg });
                      }
                    } else {
                      if (!value || String(value).trim() === '') {
                        var msg2 = (getFieldLabel(fieldName)) + ' row ' + (idx + 1) + ': ' + labelText + ' is required.';
                        showFieldError(fieldName, [msg2]);
                        hasErrors = true;
                        errorSummary.push({ field: fieldName, label: getFieldLabel(fieldName), error: msg2 });
                      }
                    }
                  }

                  if (type === 'integer' || type === 'number') {
                    if (value !== '' && value !== null && value !== undefined && isNaN(Number(value))) {
                      var msg3 = (getFieldLabel(fieldName)) + ' row ' + (idx + 1) + ': ' + labelText + ' must be a number.';
                      showFieldError(fieldName, [msg3]);
                      hasErrors = true;
                      errorSummary.push({ field: fieldName, label: getFieldLabel(fieldName), error: msg3 });
                    }
                  }

                  if (Array.isArray(col.validators) && value) {
                    col.validators.forEach(function(validator){
                      if (validator.regex) {
                        var flags = (validator.flags || []).join('');
                        var regex = new RegExp(validator.regex, flags);
                        if (!regex.test(String(value))) {
                          var msg4 = (getFieldLabel(fieldName)) + ' row ' + (idx + 1) + ': ' + (validator.message || (labelText + ' format is invalid.'));
                          showFieldError(fieldName, [msg4]);
                          hasErrors = true;
                          errorSummary.push({ field: fieldName, label: getFieldLabel(fieldName), error: msg4 });
                        }
                      }
                    });
                  }
                });
              });

              // Uniqueness validation for columns marked as unique
              columns.forEach(function(col){
                if (col.unique !== true) return;
                var seen = new Map();
                parsed.forEach(function(row, idx){
                  if (!row) return;
                  var val = row[col.key];
                  if (val === undefined || val === null || String(val).trim() === '') return;
                  var key = String(val).trim().toLowerCase();
                  if (seen.has(key)) {
                    var msgU = (getFieldLabel(fieldName)) + ' row ' + (idx + 1) + ': ' + (col.label || col.key || 'Value') + ' must be unique.';
                    showFieldError(fieldName, [msgU]);
                    hasErrors = true;
                    errorSummary.push({ field: fieldName, label: getFieldLabel(fieldName), error: msgU });
                  } else {
                    seen.set(key, idx);
                  }
                });
              });
            }
          }
        });
        
        // Show error summary if there are errors
        if (hasErrors) {
          showErrorSummary(errorSummary);
          
          // Scroll to the error summary banner so the user sees what's wrong
          var summaryBanner = document.querySelector('.alert.alert-danger.wf-validation-error');
          if (summaryBanner) {
            summaryBanner.scrollIntoView({ behavior: 'smooth', block: 'center' });
          } else {
            var firstError = document.querySelector('.mb-3.has-error');
            if (firstError) {
              firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
          }
        }

        return !hasErrors;
      }

      function showErrorSummary(errors) {
        var summary = document.createElement('div');
        summary.className = 'alert alert-danger wf-validation-error';
        summary.setAttribute('role', 'alert');
        
        var content = '<strong>Please fix the errors below:</strong><ul class="mt-2 mb-0">';
        errors.forEach(function(error) {
          content += '<li><a href="#id_' + error.field + '">' + error.label + ':</a> ' + error.error + '</li>';
        });
        content += '</ul>';
        
        summary.innerHTML = content;
        
        // Insert before the form
        var form = document.querySelector('form');
        form.parentNode.insertBefore(summary, form);
        
        // Make error links scroll to fields
        summary.querySelectorAll('a[href^="#id_"]').forEach(function(link) {
          link.addEventListener('click', function(e) {
            e.preventDefault();
            var fieldName = this.getAttribute('href').replace('#id_', '');
            var group = document.getElementById('group_' + fieldName);
            if (group) {
              group.scrollIntoView({ behavior: 'smooth', block: 'center' });
              
              // Focus the field
              var field = group.querySelector('input, select, textarea');
              if (field && field.type !== 'hidden') {
                setTimeout(function() { field.focus(); }, 300);
              }
            }
          });
        });
      }

      // Real-time validation on field changes
      formEl.addEventListener('input', function(e) {
        var field = e.target;
        
        if (field.type === 'hidden') return;
        
        // Skip validation for list fields (they store JSON and shouldn't be validated with string validators)
        if (field.getAttribute('data-enhance') === 'list') {
          return;
        }
        if (field.getAttribute('data-enhance') === 'list-dict') {
          return;
        }
        
        if (isDynamicListHelperField(field)) {
          return;
        }
        
        var fieldName = field.getAttribute('name') || field.dataset.originalName;
        if (fieldName) {
          var errors = validateField(field);
          showFieldError(fieldName, errors);
        }
      });

      // Validation on checkbox changes
      formEl.addEventListener('change', function(e) {
        var field = e.target;
        if (field.type === 'checkbox') {
          var fieldName = field.getAttribute('name');
          if (fieldName) {
            var errors = validateField(field);
            showFieldError(fieldName, errors);
          }
        }
        
        // Validation on dropdown selection (for enhanced selects)
        if (field.type === 'hidden' && field.getAttribute('data-proxy-for')) {
          var fieldName = field.getAttribute('name');
          if (fieldName) {
            // Create a temporary field object for validation
            var tempField = {
              getAttribute: function(attr) {
                if (attr === 'name') return fieldName;
                if (attr === 'data-required') {
                  var originalSelect = document.querySelector('select[data-original-name="' + fieldName + '"]');
                  return originalSelect ? originalSelect.getAttribute('data-required') : 'false';
                }
                if (attr === 'data-validators') {
                  var originalSelect = document.querySelector('select[data-original-name="' + fieldName + '"]');
                  return originalSelect ? originalSelect.getAttribute('data-validators') : null;
                }
                return null;
              },
              dataset: { originalName: fieldName }
            };
            
            var errors = validateField(tempField);
            showFieldError(fieldName, errors);
          }
        }
      });

      // Intercept form submission for validation
      var formElement = document.getElementById('workflow-launch-form');
      // Guard flag: when true the next native submit should proceed unblocked.
      var _submitPassThrough = false;

      function computeFormDuration() {
        try {
          var started = parseInt(document.getElementById('form_started_at')?.value || '0', 10);
          var nowMs = Date.now();
          var durationSec = 0;
          if (!isNaN(started) && started > 0 && nowMs >= started) {
            durationSec = Math.round((nowMs - started) / 1000);
          }
          var durEl = document.getElementById('form_duration_seconds');
          if (durEl) durEl.value = String(Math.max(0, durationSec));
        } catch (err) {
          var durEl2 = document.getElementById('form_duration_seconds');
          if (durEl2) durEl2.value = '0';
        }
      }

      if (formElement) {
        // Single submit handler — validates once and submits or blocks.
        formElement.addEventListener('submit', function submitHandler(e) {
          // If the pass-through flag is set this is the re-entrant native submit
          // triggered by our own code below — let it go.
          if (_submitPassThrough) {
            console.log('[submit] pass-through → allowing native submit');
            return; // allow default
          }

          e.preventDefault();

          try {
            var isValid = validateForm();
            console.log('[submit] validation result:', isValid);

            if (isValid) {
              computeFormDuration();
              // Set flag so re-entrant submit isn't intercepted again.
              _submitPassThrough = true;
              formElement.submit();
            }
            // If invalid, validateForm already displayed errors.
          } catch (err) {
            console.error('[submit] exception during validation:', err);
            // Show the error visibly so a JS exception never causes silent submit failure.
            var errDiv = document.createElement('div');
            errDiv.className = 'alert alert-danger wf-validation-error';
            errDiv.setAttribute('role', 'alert');
            errDiv.innerHTML = '<strong>An unexpected error occurred:</strong> ' + (err.message || String(err));
            var frm = document.getElementById('workflow-launch-form');
            if (frm && frm.parentNode) frm.parentNode.insertBefore(errDiv, frm);
            errDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
          }
        });
      } else {
        console.error('No form element found for validation setup');
      }

      // ---------- Tooltip functionality for validator messages ----------
      function setupTooltips() {
        // Add tooltips to fields with validators
        document.querySelectorAll('input[data-validators], textarea[data-validators]').forEach(function(field) {
          // Skip tooltip setup for list helper inputs
          if (field.getAttribute('data-list-helper') === 'true' || field.getAttribute('data-no-validate') === 'true' || field.closest('.list-field-container')) {
            return;
          }
          
          var validators = field.getAttribute('data-validators');
          if (validators) {
            try {
              var validatorList = JSON.parse(validators);
              var tooltipMessages = [];
              
              validatorList.forEach(function(validator) {
                if (validator.message) {
                  tooltipMessages.push(validator.message);
                } else if (validator.regex) {
                  tooltipMessages.push('Must match pattern: ' + validator.regex);
                }
              });
              
              if (tooltipMessages.length > 0) {
                var tooltipText = tooltipMessages.join('\n');
                field.setAttribute('title', tooltipText);
                
                // If Bootstrap 5 is available, use native Tooltip API
                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
                  new bootstrap.Tooltip(field, {
                    placement: 'top',
                    trigger: 'hover focus',
                    container: 'body',
                    title: tooltipText
                  });
                }
              }
            } catch (e) {
              console.warn('Invalid validator format for tooltip:', field.name);
            }
          }
        });
      }

      // init
      window.addEventListener('load', function(){
        // Apply BS5 select styling universally
        document.querySelectorAll('select').forEach(function(sel){
          sel.classList.remove('form-control');
          if (!sel.classList.contains('form-select')) sel.classList.add('form-select');
        });
        document.querySelectorAll('select[data-enhance="dropdown"]').forEach(enhanceSelect);
        document.querySelectorAll('input[data-enhance="list"]').forEach(enhanceListField);
        document.querySelectorAll('input[data-enhance="list-dict"]').forEach(enhanceListDictField);
        // Upgrade checkbox styling for Bootstrap 5
        document.querySelectorAll('#dynamic-form input[type="checkbox"]').forEach(function(cb){
          cb.classList.add('form-check-input');
        });
        // During initial load, preserve any server-provided initial values so
        // dependent fields seeded via ?from_run aren't cleared before
        // visibility rules are evaluated. We use a temporary global flag that
        // `setVisible` checks to skip wiping values.
        window._preserve_initial = true;
        document.querySelectorAll('#dynamic-form [data-show-if-field], #dynamic-form [data-depends-on]').forEach(function(el){
          setVisible(el, false);
        });
        updateVisibility();
        // Disable the preserve flag after initial visibility calculation
        window._preserve_initial = false;
        
        // Setup tooltips for validator messages
        setupTooltips();
      });
    })();
    </script>
    
{% endblock content %}