=minor changes, particularly around the JVB_CHILD_URL pattern

Jake Vanderwerf

2026-02-17 a24a06002081ad71a78ffeff9072725ba39cf121

 assets/js/concise/PopulateForm.js

@@ -1,271 +1,340 @@
/**********************************************
 PopulateForm extracts saved data and populates the form field accordingly
**********************************************/
class PopulateForm {
   constructor(form, fieldData = {}, imageData = {}, options = {}) {
      for (let [fieldName, fieldValue] of Object.entries(fieldData)) {
         let wrapper = form.querySelector(`[data-field="${fieldName}"]`);
         if (wrapper) {
            this.populateField(wrapper, fieldName, fieldValue, imageData, options);
         }
      }
   constructor() {
      this.templates = window.jvbTemplates;
      this.formHelper = window.jvbForm;

      this.defineTemplates();

      this.data = null;
      this.form = null;
   }

   /**
    * Populate a single field with its value
    * @param {HTMLElement} fieldWrapper - The field wrapper element
    * @param {string} fieldName - Field name
    * @param {*} fieldValue - Field value
    * @param {Object} imagesData - Image metadata
    * @param {Object} options - Additional options
    *
    * @param {HTMLElement} form
    * @param {object} data
    *    @param {object} data.fields
    *    @param {object} data.images
    *    @param {object} data.taxonomies
    */
   populateField(fieldWrapper, fieldName, fieldValue, imagesData = {}, options = {}) {
      if (!fieldWrapper || fieldValue === undefined || fieldValue === null) {
   populate (form, data = {})
   {
      this.data = data;
      this.mergeRootData();
      this.form = form;
      if (!this.formHelper) {
         this.formHelper = window.jvbForm;
      }
      // If still not available, queue for retry
      if (!this.formHelper) {
         requestAnimationFrame(() => {
            this.populate(form, data);
         });
         return;
      }

      // Determine field type from classes or data attributes
      const fieldType = this.getFieldType(fieldWrapper);
      if (!Object.hasOwn(this.data, 'fields') || Object.keys(this.data.fields).length === 0) return;

      switch (fieldType) {
         case 'image':
            this.populateImageField(fieldWrapper, fieldName, fieldValue, imagesData);
            break;

         case 'gallery':
            this.populateGalleryField(fieldWrapper, fieldName, fieldValue, imagesData);
            break;

         case 'repeater':
            this.populateRepeaterField(fieldWrapper, fieldName, fieldValue, options);
            break;

         case 'taxonomy':
            this.populateTaxonomyField(fieldWrapper, fieldName, fieldValue);
            break;

         case 'user':
            this.populateUserField(fieldWrapper, fieldName, fieldValue);
            break;

         case 'location':
            this.populateLocationField(fieldWrapper, fieldName, fieldValue);
            break;

         case 'set':
         case 'checkbox':
            this.populateSetField(fieldWrapper, fieldName, fieldValue);
            break;

         case 'select':
         case 'radio':
            this.populateSelectField(fieldWrapper, fieldName, fieldValue);
            break;

         case 'true_false':
            this.populateBooleanField(fieldWrapper, fieldName, fieldValue);
            break;

         case 'date':
         case 'time':
         case 'datetime':
            this.populateDateField(fieldWrapper, fieldName, fieldValue);
            break;

         case 'number':
            this.populateNumberField(fieldWrapper, fieldName, fieldValue);
            break;
         case 'textarea':
            if (fieldWrapper.querySelector('.editor-container')) {
               this.populateEditorField(fieldWrapper, fieldName, fieldValue);
            } else {
               this.populateTextareaField(fieldWrapper, fieldName, fieldValue);
            }
            break;

         case 'text':
         case 'email':
         case 'url':
         case 'tel':
         case 'phone':
         default:
            this.populateTextField(fieldWrapper, fieldName, fieldValue);
            break;
      }
   }

   /**
    * Determine field type from wrapper element
    * @param {HTMLElement} fieldWrapper - Field wrapper element
    * @returns {string} Field type
    */
   getFieldType(fieldWrapper) {
      // Check for specific field classes
      const typeClasses = [
         'image', 'gallery', 'repeater', 'taxonomy', 'user', 'location',
         'set', 'checkbox', 'select', 'radio', 'true_false', 'date',
         'time', 'datetime', 'editor', 'number', 'text', 'textarea',
         'email', 'url', 'tel', 'phone'
      ];

      for (const type of typeClasses) {
         if (fieldWrapper.classList.contains(type)) {
            return type;
         }
      }

      // Check for data attribute
      if (fieldWrapper.dataset.type) {
         return fieldWrapper.dataset.type;
      }

      // Check input type
      const input = fieldWrapper.querySelector('input, select, textarea');
      if (input) {
         if (input.tagName === 'TEXTAREA') {
            return input.dataset.editor === 'true' ? 'editor' : 'textarea';
         }
         if (input.type) {
            return input.type === 'checkbox' && !fieldWrapper.classList.contains('true_false') ? 'set' : input.type;
         }
      }

      return 'text';
   }

   /**
    * Populate text-based fields
    */
   populateTextField(fieldWrapper, fieldName, fieldValue) {
      const input = fieldWrapper.querySelector(`[name="${fieldName}"], input, textarea`);
      if (input) {
         input.value = String(fieldValue || '');

         // Update character counter if present
         if (input.dataset.limit) {
            const counter = fieldWrapper.querySelector('.char-count .current');
            if (counter) {
               counter.textContent = input.value.length;
            }
      for (let [name, value] of Object.entries(this.data.fields)) {
         let field = form.querySelector(`[data-field="${name}"]`);
         if (field) {
            this.populateField(field, name, value);
         }
      }
   }

   /**
    * Populate textarea fields
    */
   populateTextareaField(fieldWrapper, fieldName, fieldValue) {
      const textarea = fieldWrapper.querySelector(`textarea[name="${fieldName}"]`) ||
         fieldWrapper.querySelector('textarea:not([data-editor="true"])');

      if (textarea) {
         const oldValue = textarea.value;
         textarea.value = String(fieldValue || '');

         // Trigger change event to update any dependencies
         textarea.dispatchEvent(new Event('change', { bubbles: true }));

         // Update character counter if present
         if (textarea.dataset.limit) {
            const counter = fieldWrapper.querySelector('.char-count .current');
            if (counter) {
               counter.textContent = textarea.value.length;

               // Check if limit is reached
               const limit = parseInt(textarea.dataset.limit, 10);
               if (textarea.value.length >= limit) {
                  fieldWrapper.classList.add('reached');
               } else {
                  fieldWrapper.classList.remove('reached');
               }
            }
         }
      } else {
         console.warn(`No textarea found for field ${fieldName} in wrapper:`, fieldWrapper);
      }
   }



   /**
    * Populate number fields
    */
   populateNumberField(fieldWrapper, fieldName, fieldValue) {
      const input = fieldWrapper.querySelector(`[name="${fieldName}"], input[type="number"]`);
      if (input) {
         input.value = Number(fieldValue) || 0;
      }
   }

   /**
    * Populate boolean/true_false fields
    */
   populateBooleanField(fieldWrapper, fieldName, fieldValue) {
      const input = fieldWrapper.querySelector(`[name="${fieldName}"], input[type="checkbox"]`);
      if (input) {
         input.checked = Boolean(fieldValue);
      }
   }

   /**
    * Populate select/radio fields
    */
   populateSelectField(fieldWrapper, fieldName, fieldValue) {
      const value = String(fieldValue || '');

      // Try select first
      const select = fieldWrapper.querySelector(`select[name="${fieldName}"]`);
      if (select) {
         select.value = value;
         return;
      }

      // Try radio buttons
      const radio = fieldWrapper.querySelector(`input[type="radio"][name="${fieldName}"][value="${value}"]`);
      if (radio) {
         radio.checked = true;
      }
   }

   /**
    * Populate set/checkbox fields (multiple selections)
    */
   populateSetField(fieldWrapper, fieldName, fieldValue) {
      // Parse value if it's a string
      let values = fieldValue;
      if (typeof fieldValue === 'string') {
         try {
            values = JSON.parse(fieldValue);
         } catch (e) {
            values = fieldValue.split(',').map(v => v.trim());
         }
      }

      if (!Array.isArray(values)) {
         values = [String(values)];
      }

      // Update checkboxes
      fieldWrapper.querySelectorAll(`input[type="checkbox"][name*="${fieldName}"]`).forEach(checkbox => {
         checkbox.checked = values.includes(checkbox.value);
   mergeRootData(){
      let check = ['status','date','modified'];
      check.forEach(ch =>{
         this.data.fields[`post_${ch}`] = this.data[ch];
      });
   }

   /**
    * Populate date/time fields
    *
    * @param {HTMLElement} field
    * @param {string} name
    * @param {mixed} value
    */
   populateDateField(fieldWrapper, fieldName, fieldValue) {
      const input = fieldWrapper.querySelector(`[name="${fieldName}"], input`);
      if (input && fieldValue) {
         // Handle different date formats
         let dateValue = fieldValue;
         if (typeof fieldValue === 'object' && fieldValue.date) {
            dateValue = fieldValue.date;
   populateField(field, name, value) {

      let type = this.formHelper.getFieldType(field);
      if (!type || this.isEmptyValue(name) || this.isEmptyValue(value)) return;

      const handlers = {
         'repeater': this.populateRepeater.bind(this),
         'tag-list': this.populateTagList.bind(this),
         'group': this.populateGroup.bind(this),
         'location': this.populateLocation.bind(this),
         'selector': this.populateTaxonomy.bind(this),
         'user':  this.populateUser.bind(this),
         'upload':   this.populateUpload.bind(this),
         'gallery':  this.populateUpload.bind(this),
         'image':    this.populateUpload.bind(this),
         'set':      this.populateMultiValue.bind(this),
         'checkbox': this.populateMultiValue.bind(this),
         'select':   this.populateSingleValue.bind(this),
         'radio': this.populateSingleValue.bind(this),
         'true-false': this.populateBoolean.bind(this),
         'toggle-text': this.populateBoolean.bind(this),
         'date':  this.populateDate.bind(this),
         'time':  this.populateDate.bind(this),
         'datetime': this.populateDate.bind(this),
         'number':   this.populateNumber.bind(this),
         'textarea': this.populateTextarea.bind(this),
         'quantity': this.populateNumber.bind(this),
      };

      if (Object.hasOwn(handlers, type)) {
         handlers[type](field, name, value);
      } else {
         this.populateText(field, name, value);
      }
   }

   populateRepeater(field, name, value) {
      if (!value || !Array.isArray(value)) return;

      const container = field.querySelector('.repeater-items');
      let template = field.querySelector('template')?.className ?? false;
      if (!container || !template) return;

      window.removeChildren(container);

      value.forEach((data, index) => {
         const templateData = { ...data, index, repeater: field };

         const row = this.templates.create(template, templateData);
         if (!row) return;

         container.append(row);

         const formConfig = this.formHelper.getForm(row);
         if (formConfig) {
            this.formHelper.initializeFields(row, formConfig);
         }

         // Convert to appropriate format for input type
         for (let [fieldName, fieldValue] of Object.entries(data)) {
            let subField = row.querySelector(`[data-field="${fieldName}"]`);
            if (subField) {
               this.populateField(subField, fieldName, fieldValue);
            }
         }
      });
   }
   populateTagList(field, name, value) {
      if (!value || !Array.isArray(value)) return;

      const container = field.querySelector('.tag-items');
      let template = field.querySelector('template')?.className ?? false;
      if (!container || !template) return;

      window.removeChildren(container);

      value.forEach((data, index) => {
         const row = this.templates.create(template, {
            label: this.getTagLabel(data, field.dataset.tagFormat ?? 'first_field'),
            fieldName: name,
            ...data
         });
         if (!row) return;

         // Set hidden input values directly
         row.querySelectorAll('input[type="hidden"]').forEach(input => {
            const key = input.dataset.field;
            if (key && data[key] !== undefined) {
               input.value = data[key];
            }
         });

         container.append(row);
      });
   }
   /**
    * Build tag label from data - mirrors addTagListItem logic
    */
   getTagLabel(data, format) {
      const values = Object.values(data).filter(v => !this.isEmptyValue(v));
      switch (format) {
         case 'first_field':
            return values[0] ?? 'New Item';
         case 'all_fields':
            return values.join(', ') || 'New Item';
         default:
            if (format.includes('{')) {
               let label = format;
               for (const [key, value] of Object.entries(data)) {
                  label = label.replace(`{${key}}`, value);
               }
               return label;
            }
            return data[format] ?? values[0] ?? 'New Item';
      }
   }
   populateGroup(field, name, value) {
      if (!value || typeof value !== 'object') return;

      for (let [subName, subValue] of Object.entries(value)) {
         let subField = field.querySelector(`[data-field="${subName}"]`);
         if (subField) {
            this.populateField(subField, subName, subValue);
         }
      }
   }
   populateLocation(field, name, value) {
      const subFields = ['address', 'lat', 'lng', 'street', 'city', 'province', 'postal_code', 'country'];
      subFields.forEach(subField => {
         if (Object.hasOwn(value, subField)) {
            let input = field.querySelector(`[data-location-field="${subField}"]`);
            if (input) input.value = String(value[subField]||'');
         }
      });
   }
   populateTaxonomy(field, name, value) {
      let termIds = this.splitIDs(value);
      if (termIds.length === 0) return;

      const hiddenInput = field.querySelector(`input[type="hidden"][name="${name}"]`);
      if (hiddenInput) {
         hiddenInput.value = termIds.join(',');
         if (window.jvbSelector) {
            requestAnimationFrame(() => {
               window.jvbSelector.updateFieldFromInput(hiddenInput);
            });
         }
      }
   }
   populateUser(field, name, value) {
      this.populateTaxonomy(field, name, value);
   }
   populateUpload(field, name, value) {
      if (name === 'timeline' || field.dataset.subtype && field.dataset.subtype === 'timeline') {
         this.populateTimelineGallery(field,name,value);
         return;
      }

      if (this.isEmptyValue(value)) return;
      const ids = this.splitIDs(value);
      if (ids.length === 0) return;
      const hiddenInput = field.querySelector(`input[type="hidden"]`);
      if (hiddenInput) {
         hiddenInput.value = ids.join(',');
      }

      const grid = field.querySelector('.item-grid');
      let uploadContainer = field.querySelector('.file-upload-wrapper');
      uploadContainer.hidden = ids.length > 0;
      field.querySelector('.progress')?.remove();
      if (grid) {
         window.removeChildren(grid);
         ids.forEach(id => {
            let data = this.data.images[id]??{};
            data.field = {
               config: {
                  showMeta: true
               }
            };
            data.id = id;
            grid.append(this.templates.create('uploadItem', data));
         });
      }

      this.populateUploadMeta(field, name, value);
   }
      populateUploadMeta(element, name, id) {
         // Find the image_data field group
         const imageDataField = element.querySelector('[data-field="image_data"]');
         if (!imageDataField) return;
         let data = this.data.images[id]??false;
         if (!data) return;

         // Set upload ID or attachment ID
         imageDataField.dataset.attachmentId = data.id;
         imageDataField.setAttribute('data-ignore', '');

         // Populate the metadata fields
         const meta = [
            'image-title',
            'image-alt-text',
            'image-caption'
         ];

         for (const m of meta) {
            const input = imageDataField.querySelector(`[data-field="${m}"] input, [data-field="${m}"] textarea`);
            if (input && data[m]!=='') {
               input.value = window.decodeHTMLEntities(data[m]);
            }
         }
      }
      populateTimelineGallery(field,name, value) {
         if (!value || !Array.isArray(value) || value.length === 0) return;

         let grid = field.querySelector('.item-grid');
         let uploadContainer = field.querySelector('.file-upload-wrapper');
         uploadContainer.hidden = value.length > 0;
         if (grid) {
            window.removeChildren(grid);

            field.querySelector('.progress')?.remove();
            for (let data of value) {
               let point = this.templates.create('timelineItem', data);
               if (point) {
                  grid.append(point);
               }
            }
         }
      }
   populateMultiValue(field, name, value) {
      if (typeof value === 'string') {
         try {
            const date = new Date(dateValue);
            value = JSON.parse(value);
         } catch (e) {
            value = value.split(',').map(v => v.trim());
         }
      }
      if (!Array.isArray(value)) {
         value = [String(value)];
      }
      let select = field.querySelector(`select[name="${name}"]`);
      if (select && select.multiple) {
         for (let option of select.options) {
            option.selected = value.includes(option.value);
         }
         return;
      }
      field.querySelectorAll(`input[type="checkbox"][name="${name}[]"], input[type="checkbox"][name="${name}"]`).forEach(checkbox => {
         checkbox.checked = value.includes(checkbox.value);
      });

   }
   populateSingleValue(field, name, value) {
      value = String(value || '');

      // Try select first
      let select = field.querySelector(`select[name="${name}"]`);
      if (select) {
         select.value = value;
         return;
      }
      let input = field.querySelector(`[name="${name}"][value="${value}"]`);
      if (input) {
         input.checked = true;
      }
   }
   populateBoolean(field, name, value) {
      const input = field.querySelector(`[name="${name}"], input[type="checkbox"]`);
      if (input) {
         input.checked = Boolean(value);
      }
   }
   populateDate(field, name, value) {
      const input = field.querySelector(`[name="${name}"], input`);
      if (input) {
         if (typeof value === 'object' && Object.hasOwn(value, 'date')) {
            value = value.date;
         }
         try {
            const date = new Date(value);
            if (!isNaN(date.getTime())) {
               switch (input.type) {
                  case 'date':
@@ -278,292 +347,139 @@
                     input.value = date.toISOString().slice(0, 16);
                     break;
                  default:
                     input.value = dateValue;
                     input.value = value;
               }
            }
         } catch (e) {
            input.value = dateValue;
            input.value = value;
         }
      }
   }

   /**
    * Populate editor fields (Quill)
    */
   populateEditorField(fieldWrapper, fieldName, fieldValue) {
      const textarea = fieldWrapper.querySelector(`textarea[name="${fieldName}"]`) ||
         fieldWrapper.querySelector('textarea[data-editor="true"]') ||
         fieldWrapper.querySelector('textarea');

      if (!textarea) {
         console.warn(`Editor field ${fieldName}: textarea not found`);
         return;
   populateNumber(field, name, value) {
      const input = field.querySelector(`[name="${name}"], input[type="number"]`);
      if (input) {
         input.value = Number(value) || 0;
      }
   }
   populateTextarea(field, name, value) {
      let textarea = field.querySelector('textarea[data-editor], textarea');
      this.populateText(field, name, value);

      const content = String(fieldValue || '');

      // Update the textarea value
      textarea.value = content;

      // Try to find and update Quill editor
      const editorContainer = fieldWrapper.querySelector('.editor');
      if (editorContainer) {
         // Try different ways to access the Quill instance
         let quillInstance = null;

         // Method 1: Check if Quill is stored on the editor element
         if (editorContainer.__quill) {
            quillInstance = editorContainer.__quill;
         }
         // Method 2: Check if Quill is stored as quill property
         else if (editorContainer.quill) {
            quillInstance = editorContainer.quill;
         }
         // Method 3: Try to find Quill in the global registry (if you have one)
         else if (window.Quill && window.Quill.find) {
            quillInstance = window.Quill.find(editorContainer);
         }
         // Method 4: Check all Quill instances if available
         else if (window.Quill && window.Quill.instances) {
            // Some setups store instances in a registry
            for (let instance of window.Quill.instances) {
               if (instance.container === editorContainer) {
                  quillInstance = instance;
                  break;
               }
            }
         }

         if (quillInstance) {
            // Set the content in Quill
            quillInstance.root.innerHTML = content;
            // Store the instance reference for future use
            editorContainer.__quill = quillInstance;
      if (textarea?.dataset.editor) {
         const editor = field.querySelector('.ql-editor');
         if (editor) {
            editor.innerHTML = value;
         } else {
            console.warn(`Quill instance not found for ${fieldName}, setting HTML directly`);
            // Fallback: set HTML directly
            editorContainer.innerHTML = content;
            textarea.dispatchEvent(new Event('change', { bubbles: true }));
         }
      } else {
         console.warn(`Editor container not found for ${fieldName}`);
      }

      // Trigger change event on textarea
      textarea.dispatchEvent(new Event('change', { bubbles: true }));
   }

   /**
    * Populate location fields
    */
   populateLocationField(fieldWrapper, fieldName, fieldValue) {
      if (!fieldValue || typeof fieldValue !== 'object') {
         return;
   populateText(field, name, value) {
      let input = field.querySelector(`[name="${name}"]`)
         || field.querySelector('textarea[data-editor]')
         || field.querySelector('input:not([type="hidden"]):not([type="file"]), textarea, select');
      if (input) {
         input.value = window.decodeHTMLEntities(value??'');
      }

      // Location fields typically have sub-fields
      const subFields = ['address', 'lat', 'lng', 'street', 'city', 'province', 'postal_code', 'country'];

      subFields.forEach(subField => {
         if (fieldValue[subField] !== undefined) {
            const input = fieldWrapper.querySelector(`[name="${fieldName}_${subField}"], [name="${subField}"]`);
            if (input) {
               input.value = String(fieldValue[subField] || '');
            }
         }
   }
   /********************************************************************
   UTILITY
    ********************************************************************/
   getFormHelper() {
      window.requestAnimationFrame(()=> {
         this.formHelper = window.jvbForm;
      });
   }

   /**
    * Populate taxonomy fields
    */
   populateTaxonomyField(fieldWrapper, fieldName, fieldValue) {
      // Handle different value formats
      let termIds = [];

      if (Array.isArray(fieldValue)) {
         termIds = fieldValue.map(v => String(v));
      } else if (typeof fieldValue === 'string') {
         try {
            const parsed = JSON.parse(fieldValue);
            termIds = Array.isArray(parsed) ? parsed.map(v => String(v)) : [String(parsed)];
         } catch (e) {
            termIds = fieldValue.split(',').map(v => v.trim());
         }
      } else if (fieldValue) {
         termIds = [String(fieldValue)];
      }

      if (termIds.length === 0) {
         return;
      }

      // Update hidden input
      const hiddenInput = fieldWrapper.querySelector(`input[type="hidden"][name="${fieldName}"]`);
      if (hiddenInput) {
         hiddenInput.value = termIds.join(',');
      }
   splitIDs(value) {
      return String(value).split(',')
         .map(v=>parseInt(v.trim()))
         .filter(v=>!isNaN(v) && v>0);
   }
   isEmptyValue(value) {
      if (value === null || value === undefined || value === '') return true;
      if (Array.isArray(value) && value.length === 0) return true;
      return typeof value === 'object' && Object.keys(value).length === 0;
   }

   /**
    * Populate user fields (similar to taxonomy)
    */
   populateUserField(fieldWrapper, fieldName, fieldValue) {
      // Similar logic to taxonomy fields
      this.populateTaxonomyField(fieldWrapper, fieldName, fieldValue);
   }
   defineTemplates() {
      const T = this.templates;
      const p = this;

   /**
    * Populate image fields
    */
   populateImageField(fieldWrapper, fieldName, fieldValue, imagesData = {}) {
      if (!fieldValue) {
         return;
      }
      T.define('timelineItem', {
         refs: {
            select: '[name="select-item"]',
            video: 'video',
            file: '.select-item span',
            img: 'img',
            details: 'details[data-field]',
            imgAlt: '[name="image-alt-text"]',
            imgTitle: '[name="image-title"]',
            imgDesc: '[name="image-caption"]',
         },
         manyRefs: {
            fields: '.field',
         },
         setup({el, refs, manyRefs, data}) {
            el.dataset.itemId = data.id;

      // Handle comma-separated IDs or single ID
      const imageIds = String(fieldValue).split(',').filter(id => parseInt(id.trim()));
      if (imageIds.length === 0) {
         return;
      }

      // Update hidden input
      const hiddenInput = fieldWrapper.querySelector(`input[type="hidden"][name="${fieldName}"]`);
      if (hiddenInput) {
         hiddenInput.value = imageIds.join(',');
      }

      // Update image display
      const grid = fieldWrapper.querySelector('.item-grid');
      const uploadContainer = fieldWrapper.querySelector('.file-upload-container');
      fieldWrapper.querySelector('.progress')?.remove();
      if (grid) {
         window.removeChildren(grid);
         imageIds.forEach(imageId => {
            let image = window.getTemplate('uploadItem');
            let img = image.querySelector('img');

            let details = image.querySelector('details');
            let meta = window.getTemplate('uploadMeta')
            details.append(meta);
            [
               img.src,
               img.alt,
               image.querySelector('[name="image-title"]').value,
               image.querySelector('[name="image-alt-text"]').value,
               image.querySelector('[name="image-caption"]').value,
            ] = [
               imagesData[imageId].medium,
               imagesData[imageId].alt,
               imagesData[imageId].title,
               imagesData[imageId].alt,
               imagesData[imageId].caption,
            ];

            details.querySelector('.upload-meta > .hint')?.remove();

            grid.append(image);
         });

         if (imageIds.length > 0) {
            if (uploadContainer) {
               uploadContainer.hidden = true;
            if (refs.select) {
               let wrapper = refs.select.closest('.preview');
               window.prefixInput(refs.select, `${data.id}-`, wrapper);
            }
         }
      }
   }
            if (refs.video) refs.video.remove();
            if (refs.file) refs.file.remove();

   /**
    * Populate gallery fields
    */
   populateGalleryField(fieldWrapper, fieldName, fieldValue, imagesData = {}) {
      this.populateImageField(fieldWrapper, fieldName, fieldValue, imagesData);
   }

   /**
    * Populate repeater fields
    */
   populateRepeaterField(fieldWrapper, fieldName, fieldValue, options = {}) {
      if (!fieldValue || !Array.isArray(fieldValue)) {
         return;
      }

      const container = fieldWrapper.querySelector('.repeater-items');
      const template = fieldWrapper.querySelector('template');

      if (!container || !template) {
         console.warn(`Repeater field ${fieldName}: missing container or template`);
         return;
      }

      // Clear existing rows
      window.removeChildren(container);

      // Create rows for each data item
      fieldValue.forEach((rowData, index) => {
         if (!rowData || typeof rowData !== 'object') {
            return;
         }

         const row = window.getTemplate(template.className);
         if (!row) {
            console.warn(`Repeater field ${fieldName}: template not found`);
            return;
         }

         // Set row ID and update row number
         row.id = `${fieldWrapper.closest('form').id}-${fieldName}-row-${index}`;
         row.dataset.index = index;

         const rowNumber = row.querySelector('.row-number');
         if (rowNumber) {
            rowNumber.textContent = `#${index + 1}`;
         }

         // Update field names and populate values
         row.querySelectorAll('input, select, textarea').forEach(field => {
            const originalName = field.name;
            const newName = `${fieldName}:${index}:${originalName}`;
            const newId = `${fieldName}-${index}-${originalName}-${field.value}`;

            // Update field identifiers
            field.name = newName;
            field.id = newId;

            // Update label
            const label = field.nextElementSibling;
            if (label && label.tagName === 'LABEL') {
               label.htmlFor = newId;
            let imgData = p.data.images[data['post_thumbnail']]??false;
            if (refs.img && imgData) {
               refs.img.src = imgData.medium || imgData.small || imgData.large || '';
               refs.img.title = imgData['image-title']??'';
               refs.img.alt = imgData['image-alt-text']??'';
            }

            // Populate field value
            if (rowData[originalName] !== undefined) {
               this.populateRepeaterFieldValue(field, originalName, rowData[originalName]);
            }
         });
            if (refs.details) {
               let imgData = p.data.images[data.post_thumbnail];

         container.appendChild(row);
               refs.details.setAttribute('data-ignore', '');
               refs.details.dataset.attachmentId = data.post_thumbnail;
               if (Object.hasOwn(imgData, 'image-alt-text') && refs.alt) {
                  refs.alt.value = imgData['image-alt-text'];
               }
               if ((Object.hasOwn(imgData, 'image-title') || Object.hasOwn(data, 'file')) && refs.title) {
                  refs.title.value = imgData['image-title']||data.file.name;
               }
               if (Object.hasOwn(imgData, 'image-caption') && refs.description) {
                  refs.description.value = imgData['image-caption'];
               }
            }

            if (manyRefs.fields) {
               for (let field of manyRefs.fields) {
                  if (field.dataset.fieldType === 'group') continue;
                  if (field.dataset.field === 'post_thumbnail') {
                     field.remove();
                     continue;
                  }
                  let name = field.dataset.field;
                  let value = data[name]??'';
                  if (!p.isEmptyValue(value)) {
                     p.populateField(field, name, value);
                  }
                  const input = field.querySelector('input:not([type="file"])');
                  if (!input) continue;
                  window.prefixInput(input, `[${data.id}]`, field);
               }

            }
         }
      });
   }

   /**
    * Populate individual repeater field value
    */
   populateRepeaterFieldValue(field, fieldName, fieldValue) {
      switch (field.type) {
         case 'checkbox':
            field.checked = Boolean(fieldValue);
            break;
         case 'radio':
            field.checked = field.value === String(fieldValue);
            break;
         case 'select-one':
         case 'select-multiple':
            field.value = String(fieldValue || '');
            break;
         default:
            field.value = String(fieldValue || '');
      }
   }
}

window.jvbPopulate = PopulateForm;
document.addEventListener('DOMContentLoaded', function() {
   window.auth.subscribe(event => {
      if (event === 'auth-loaded') {
         window.jvbPopulate = new PopulateForm();
      }
   });
});