{# Plugin Configuration Partial - Server-side rendered form #}
{# This template is loaded via HTMX when a plugin tab is clicked #}

{% import 'v3/partials/_macros.html' as ui %}

{# ===== MACROS FOR FORM FIELD GENERATION ===== #}

{# Render a single form field based on schema type #}
{# "x-display": "hidden" keeps a property declared -- so stored configs that
   still carry it keep validating -- without drawing a control for it
   (deprecated keys, internal ids). An object whose every child is hidden
   counts as hidden too, so it doesn't render as an empty section. Outputs
   "1" when hidden, nothing otherwise; test it with `|trim`.
   Nothing hidden is posted for a plain or nested field: the save deep-merges
   the form over the stored section, so the stored value stays. Array rows are
   the exception (a posted list replaces the stored one), see array-table. #}
{% macro prop_is_hidden(prop) -%}
    {%- if prop is mapping -%}
        {%- if prop.get('x-display') == 'hidden' -%}1
        {%- elif prop.get('properties') is mapping and prop.get('properties') -%}
            {%- set _hid = namespace(all=true) -%}
            {%- for _child in prop.get('properties').values() -%}
                {%- if not prop_is_hidden(_child)|trim -%}{%- set _hid.all = false -%}{%- endif -%}
            {%- endfor -%}
            {%- if _hid.all -%}1{%- endif -%}
        {%- endif -%}
    {%- endif -%}
{%- endmacro %}

{% macro render_field(key, prop, value, prefix='', plugin_id='') %}
    {% if not prop_is_hidden(prop)|trim %}
    {# A key the saved config doesn't have renders its schema default. The
       route merges defaults first, but that merge stops at an object that
       declares its own default (often {}), leaving its children missing here.
       Booleans matter most: an unchecked box saves as false. #}
    {% if value is none and prop.default is defined %}{% set value = prop.default %}{% endif %}
    {% set full_key = (prefix ~ '.' ~ key) if prefix else key %}
    {% set field_id = (plugin_id ~ '-' ~ full_key)|replace('.', '-')|replace('_', '-') %}
    {% set label = prop.title if prop.title else key|replace('_', ' ')|title %}
    {% set description = prop.description if prop.description else '' %}
    {% set _pt = prop.get('type') %}
    {% set field_type = _pt if (_pt is string) else ((_pt | first) if (_pt and _pt is iterable and _pt is not string) else 'string') %}
    
    {# Handle nested objects - check for widget first #}
    {% if field_type == 'object' %}
        {% set obj_widget = prop.get('x-widget') or prop.get('x_widget') %}
        {% if obj_widget == 'schedule-picker' %}
            {# Schedule picker widget - renders enable/mode/times UI #}
            {% set obj_value = value if value is not none else {} %}
            <div class="form-group mb-4" id="setting-{{ field_id }}" data-setting-key="{{ full_key }}">
                <label id="{{ field_id }}-label" class="block text-sm font-medium text-gray-700 mb-1">{{ label }}{{ ui.help_tip(description, label) }}</label>
                <div id="{{ field_id }}_container" class="schedule-picker-container mt-1" role="group" aria-labelledby="{{ field_id }}-label"></div>
                <input type="hidden" id="{{ field_id }}_data" name="{{ full_key }}" value='{{ (obj_value|tojson|safe)|replace("'", "&#39;") }}'>
            </div>
            <script>
            (function() {
                function initWidget() {
                    if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
                    var widget = window.LEDMatrixWidgets.get('schedule-picker');
                    if (!widget) { setTimeout(initWidget, 50); return; }
                    var container = document.getElementById('{{ field_id }}_container');
                    if (!container) return;
                    var value = {{ obj_value|tojson|safe }};
                    var config = { 'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }} };
                    widget.render(container, config, value, { fieldId: '{{ field_id }}', pluginId: '{{ plugin_id }}' });
                }
                if (document.readyState === 'loading') {
                    document.addEventListener('DOMContentLoaded', initWidget);
                } else {
                    setTimeout(initWidget, 50);
                }
            })();
            </script>
        {% elif obj_widget == 'time-range' %}
            {# Time range widget - renders start/end time inputs #}
            {% set obj_value = value if value is not none else {} %}
            <div class="form-group mb-4" id="setting-{{ field_id }}" data-setting-key="{{ full_key }}">
                <label id="{{ field_id }}-label" class="block text-sm font-medium text-gray-700 mb-1">{{ label }}{{ ui.help_tip(description, label) }}</label>
                <div id="{{ field_id }}_container" class="time-range-container mt-1" role="group" aria-labelledby="{{ field_id }}-label"></div>
                <input type="hidden" id="{{ field_id }}_data" name="{{ full_key }}" value='{{ (obj_value|tojson|safe)|replace("'", "&#39;") }}'>
            </div>
            <script>
            (function() {
                function initWidget() {
                    if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
                    var widget = window.LEDMatrixWidgets.get('time-range');
                    if (!widget) { setTimeout(initWidget, 50); return; }
                    var container = document.getElementById('{{ field_id }}_container');
                    if (!container) return;
                    var value = {{ obj_value|tojson|safe }};
                    var config = { 'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }} };
                    widget.render(container, config, value, { fieldId: '{{ field_id }}', pluginId: '{{ plugin_id }}' });
                }
                if (document.readyState === 'loading') {
                    document.addEventListener('DOMContentLoaded', initWidget);
                } else {
                    setTimeout(initWidget, 50);
                }
            })();
            </script>
        {% elif obj_widget == 'style-editor' %}
            {# Composite per-element style editor. It renders its own inputs
               with the same dotted names the generic renderer would produce
               (customization.score_text.font, ...text_color.0, ...), so the
               save/validate/merge pipeline is untouched -- no hidden JSON
               blob, no new server-side parsing. It falls back to the normal
               nested rendering if the widget cannot be loaded. #}
            {% set obj_value = value if value is not none else {} %}
            <div class="form-group mb-4" id="setting-{{ field_id }}" data-setting-key="{{ full_key }}">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ label }}{{ ui.help_tip(description, label) }}</label>
                <div id="{{ field_id }}_container" class="style-editor-container mt-1"></div>
                <div id="{{ field_id }}_fallback">
                    {{ render_nested_section(key, prop, value, prefix, plugin_id) }}
                </div>
            </div>
            <script>
            (function() {
                // ~10s at 50ms: enough for the widget bundle to arrive over a
                // slow link to a Pi, bounded so a bundle that never registers
                // style-editor doesn't poll for the life of the page.
                var retries = 0;
                var MAX_RETRIES = 200;
                function giveUp() {
                    var container = document.getElementById('{{ field_id }}_container');
                    if (container) { container.remove(); }
                }
                // Did a *person* type into the fallback before this widget
                // took over? Comparing values against their defaults cannot
                // answer that. The fallback holds this block's own font
                // fields, and the font-selector widget populates them on the
                // same 50ms timer -- so a plain page load with nobody
                // touching anything raced into "dirty" (measured: seven
                // customization.*.font selects, ~60ms in) and silently
                // removed the style editor, leaving the accordion form it
                // exists to replace.
                //
                // isTrusted is false for programmatic changes and true only
                // for real input, which is exactly the question. The
                // listeners go on now, synchronously, because the edit to
                // protect can happen before initWidget ever runs.
                var userEdited = false;
                (function watchForRealEdits() {
                    var fb = document.getElementById('{{ field_id }}_fallback');
                    if (!fb) { return; }
                    ['input', 'change'].forEach(function (evt) {
                        fb.addEventListener(evt, function (e) {
                            if (e && e.isTrusted) { userEdited = true; }
                        }, true);
                    });
                })();
                function initWidget() {
                    var widget = window.LEDMatrixWidgets && window.LEDMatrixWidgets.get('style-editor');
                    if (!widget) {
                        // The plain fallback fields stay in place either way.
                        if (++retries < MAX_RETRIES) { setTimeout(initWidget, 50); } else { giveUp(); }
                        return;
                    }
                    var container = document.getElementById('{{ field_id }}_container');
                    var fallback = document.getElementById('{{ field_id }}_fallback');
                    if (!container) { return; }
                    // A user may already be editing the plain fallback fields
                    // while this widget's script is still loading; swapping
                    // in the widget now would replace them with the stale
                    // server-rendered value and silently drop that edit.
                    if (userEdited) { container.remove(); return; }
                    var value = {{ obj_value|tojson|safe }};
                    var config = { schema: {{ prop|tojson|safe }} };
                    try {
                        widget.render(container, config, value, {
                            fieldId: '{{ field_id }}',
                            name: '{{ full_key }}',
                            pluginId: '{{ plugin_id }}'
                        });
                    } catch (e) {
                        console.error('[style-editor] render failed', e);
                        container.remove();
                        return;
                    }
                    // The widget owns the style blocks now, so drop those from
                    // the generic rendering or the form would post both. Only
                    // those: a customization block can also hold a feature of
                    // its own (football keeps favorite_result_colors there),
                    // and removing the section wholesale took the only UI that
                    // feature had with it.
                    if (fallback) {
                        var owned = (container.dataset.ownedKeys || '')
                            .split(',').filter(function (k) { return k; });
                        owned.forEach(function (k) {
                            // CSS.escape: k is a schema property key read
                            // back off dataset.ownedKeys, not a literal --
                            // building the attribute selector by raw
                            // concatenation would break (or be steerable)
                            // on a key containing a quote or backslash.
                            var node = fallback.querySelector(
                                '[data-child-key="' + CSS.escape(k) + '"]');
                            if (node) { node.remove(); }
                        });
                        // Nothing left but the section heading, or a widget
                        // that reported nothing: drop the lot, as before.
                        if (!owned.length
                                || !fallback.querySelector('[data-child-key]')) {
                            fallback.remove();
                        }
                    }
                }
                if (document.readyState === 'loading') {
                    document.addEventListener('DOMContentLoaded', initWidget);
                } else {
                    setTimeout(initWidget, 50);
                }
            })();
            </script>
        {% elif prop.properties %}
            {{ render_nested_section(key, prop, value, prefix, plugin_id) }}
        {% endif %}
    {% else %}
        {# Point the label at the control that actually takes focus. Widgets
           render their own element (e.g. <id>_input), so a plain for="<id>"
           would label nothing. Mirrors the branch order below; a miss just
           falls back to the old for="<id>". #}
        {% set _lw = prop.get('x-widget') or prop.get('x_widget') %}
        {% set label_target = field_id %}
        {% if field_type == 'boolean' %}
            {% if _lw == 'toggle-switch' %}{% set label_target = field_id ~ '_button' %}{% endif %}
        {% elif prop.enum %}
        {% elif field_type in ['number', 'integer'] %}
            {% if _lw in ['slider', 'number-input'] %}{% set label_target = field_id ~ '_input' %}{% endif %}
        {% elif field_type == 'array' %}
            {% if _lw == 'color-picker' %}{% set label_target = field_id ~ '_hex' %}
            {% elif _lw == 'file-upload' %}{% set label_target = field_id ~ '_file_input' %}{% endif %}
        {% elif _lw in ['text-input', 'textarea', 'select-dropdown', 'date-picker', 'time-picker', 'slider', 'email-input', 'url-input', 'password-input', 'font-selector'] %}
            {% set label_target = field_id ~ '_input' %}
        {% elif _lw == 'color-picker' %}
            {% set label_target = field_id ~ '_color' %}
        {% endif %}
        <div class="form-group mb-4" id="setting-{{ field_id }}" data-setting-key="{{ full_key }}">
            <label for="{{ label_target }}" id="{{ field_id }}-label" class="block text-sm font-medium text-gray-700 mb-1">
                {{ label }}{{ ui.help_tip(description, label) }}
            </label>

            {# Boolean - check for widget first #}
            {% if field_type == 'boolean' %}
            {% set bool_widget = prop.get('x-widget') or prop.get('x_widget') %}
            {% if bool_widget == 'toggle-switch' %}
                {# Render toggle-switch widget #}
                <div id="{{ field_id }}_container" class="toggle-switch-container"></div>
                <script>
                (function() {
                    function initWidget() {
                        if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
                        var widget = window.LEDMatrixWidgets.get('toggle-switch');
                        if (!widget) { setTimeout(initWidget, 50); return; }
                        var container = document.getElementById('{{ field_id }}_container');
                        if (!container) return;
                        var value = {{ value|tojson|safe if value is not none else 'false' }};
                        var config = {
                            'type': 'boolean',
                            'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }}
                        };
                        widget.render(container, config, value, { fieldId: '{{ field_id }}', name: '{{ full_key }}', pluginId: '{{ plugin_id }}' });
                    }
                    if (document.readyState === 'loading') {
                        document.addEventListener('DOMContentLoaded', initWidget);
                    } else {
                        setTimeout(initWidget, 50);
                    }
                })();
                </script>
            {% else %}
            {# Default checkbox - value="true" ensures checked sends "true" not "on" #}
            <label class="flex items-center cursor-pointer">
                <input type="checkbox"
                       id="{{ field_id }}"
                       name="{{ full_key }}"
                       value="true"
                       {% if value %}checked{% endif %}
                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                <span class="ml-2 text-sm text-gray-600">Enabled</span>
            </label>
            {% endif %}
            
            {# Enum dropdown. Option text comes from x-options.labels when the
               schema supplies it -- the same convention the checkbox-group
               widget already uses -- because humanising the raw value cannot
               express every label: "vs" reads as "Vs", and "abbrev" says
               nothing about the "Sep 19" it produces. Values without a label
               fall back to the humanised form, so existing schemas render
               exactly as before. #}
            {% elif prop.enum %}
            {% set enum_labels = (prop.get('x-options') or prop.get('x_options') or {}).get('labels') or {} %}
            <select id="{{ field_id }}"
                    name="{{ full_key }}"
                    class="form-select w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-white text-black">
                {% for option in prop.enum %}
                <option value="{{ option }}" {% if value == option %}selected{% endif %}>
                    {{ enum_labels.get(option, option|replace('_', ' ')|title) }}
                </option>
                {% endfor %}
            </select>
            
            {# Number input - check for widget first #}
            {% elif field_type in ['number', 'integer'] %}
            {% set num_widget = prop.get('x-widget') or prop.get('x_widget') %}
            {% if num_widget in ['slider', 'number-input'] %}
                {# Render slider or number-input widget #}
                <div id="{{ field_id }}_container" class="{{ num_widget }}-container"></div>
                <script>
                (function() {
                    function initWidget() {
                        if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
                        var widget = window.LEDMatrixWidgets.get('{{ num_widget }}');
                        if (!widget) { setTimeout(initWidget, 50); return; }
                        var container = document.getElementById('{{ field_id }}_container');
                        if (!container) return;
                        var value = {{ value|tojson if value is not none else (prop.default|tojson if prop.default is defined else 'null') }};
                        var config = {
                            'type': '{{ field_type }}',
                            'minimum': {{ prop.minimum|tojson if prop.minimum is defined else 'null' }},
                            'maximum': {{ prop.maximum|tojson if prop.maximum is defined else 'null' }},
                            'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }}
                        };
                        widget.render(container, config, value, { fieldId: '{{ field_id }}', name: '{{ full_key }}', pluginId: '{{ plugin_id }}' });
                    }
                    if (document.readyState === 'loading') {
                        document.addEventListener('DOMContentLoaded', initWidget);
                    } else {
                        setTimeout(initWidget, 50);
                    }
                })();
                </script>
            {% else %}
            {# Default number input #}
            <input type="number"
                   id="{{ field_id }}"
                   name="{{ full_key }}"
                   value="{{ value if value is not none else (prop.default if prop.default is defined else '') }}"
                   {% if prop.minimum is defined %}min="{{ prop.minimum }}"{% endif %}
                   {% if prop.maximum is defined %}max="{{ prop.maximum }}"{% endif %}
                   {% if field_type == 'integer' %}step="1"{% else %}step="any"{% endif %}
                   class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-white text-black placeholder:text-gray-500">
            {% endif %}
            
            {# Array - check for file upload widget first (to avoid breaking static-image plugin), then checkbox-group, then array of objects #}
            {% elif field_type == 'array' %}
            {# An array of objects with no widget named would otherwise reach the
               comma-separated text input, which joins each item as a Python dict
               repr and posts it back as a list of strings -- the schema rejects
               that and every save of the plugin returns 400. The table widget
               already edits any array of objects, so make it the default. #}
            {% set _items = prop.get('items') or {} %}
            {% set x_widget = prop.get('x-widget') or prop.get('x_widget')
                or ('array-table' if (_items.get('type') == 'object' and _items.get('properties')) else none) %}
            {% if x_widget == 'file-upload' %}
                {# File upload widget for arrays #}
                {% set upload_config = prop.get('x-upload-config') or {} %}
                {% set max_files = upload_config.get('max_files', 10) %}
                {% set allowed_types = upload_config.get('allowed_types', ['image/png', 'image/jpeg', 'image/bmp', 'image/gif']) %}
                {% set max_size_mb = upload_config.get('max_size_mb', 5) %}
                {% set plugin_id_from_config = upload_config.get('plugin_id', plugin_id) %}
                {% set array_value = value if value is not none and value is iterable and value is not string else (prop.default if prop.default is defined and prop.default is iterable and prop.default is not string else []) %}
                
                <div id="{{ field_id }}_upload_widget" class="mt-1">
                    <!-- File Upload Drop Zone -->
                    <div id="{{ field_id }}_drop_zone"
                         class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 transition-colors cursor-pointer"
                         ondrop="window.handleFileDrop(event, this.dataset.fieldId)"
                         ondragover="event.preventDefault()"
                         data-field-id="{{ field_id }}"
                         data-plugin-id="{{ plugin_id_from_config }}"
                         data-upload-endpoint="{{ upload_config.get('endpoint', '/api/v3/plugins/assets/upload') }}"
                         data-file-type="{{ upload_config.get('file_type', 'image') }}"
                         data-max-files="{{ max_files }}"
                         data-max-size-mb="{{ max_size_mb }}"
                         data-allowed-types="{{ allowed_types|join(',') }}"
                         role="button"
                         tabindex="0"
                         aria-label="Upload files: drop them here or press Enter to choose"
                         onclick="document.getElementById('{{ field_id }}_file_input').click()"
                         onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();document.getElementById('{{ field_id }}_file_input').click();}">
                        <input type="file"
                               id="{{ field_id }}_file_input"
                               multiple
                               accept="{{ allowed_types|join(',') }}"
                               style="display: none;"
                               data-field-id="{{ field_id }}"
                               data-plugin-id="{{ plugin_id_from_config }}"
                               data-upload-endpoint="{{ upload_config.get('endpoint', '/api/v3/plugins/assets/upload') }}"
                               data-file-type="{{ upload_config.get('file_type', 'image') }}"
                               data-multiple="true"
                               data-max-files="{{ max_files }}"
                               data-max-size-mb="{{ max_size_mb }}"
                               data-allowed-types="{{ allowed_types|join(',') }}"
                               onchange="window.handleFileSelect(event, this.dataset.fieldId)">
                        <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
                        <p class="text-sm text-gray-600">Drag and drop images here or click to browse</p>
                        <p class="text-xs text-gray-500 mt-1">Max {{ max_files }} files, {{ max_size_mb }}MB each (PNG, JPG, GIF, BMP)</p>
                    </div>
                    <p class="text-xs text-amber-600 mt-2 flex items-center">
                        <i class="fas fa-info-circle mr-1"></i>
                        Remember to save configuration after upload
                    </p>
                    
                    <!-- Uploaded Images List -->
                    <div id="{{ field_id }}_image_list" class="mt-4 space-y-2">
                        {% for img in array_value %}
                        {% set img_id = img.get('id', loop.index0) %}
                        {% set img_schedule = img.get('schedule', {}) %}
                        {% set has_schedule = img_schedule.get('enabled', false) and img_schedule.get('mode') and img_schedule.get('mode') != 'always' %}
                        <div id="img_{{ img_id|string|replace('.', '_')|replace('-', '_') }}" class="bg-gray-50 p-3 rounded-lg border border-gray-200">
                            <div class="flex items-center justify-between mb-2">
                                <div class="flex items-center space-x-3 flex-1">
                                    <img src="/{{ img.get('path', '') }}"
                                         alt="{{ img.get('filename', '') }}"
                                         loading="lazy" decoding="async"
                                         class="w-16 h-16 object-cover rounded"
                                         onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                    <div style="display:none;" class="w-16 h-16 bg-gray-200 rounded flex items-center justify-center">
                                        <i class="fas fa-image text-gray-400"></i>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <p class="text-sm font-medium text-gray-900 truncate">{{ img.get('original_filename') or img.get('filename', 'Image') }}</p>
                                        <p class="text-xs text-gray-500">
                                            {% if img.get('size') %}{{ (img.get('size') / 1024)|round }} KB{% endif %}
                                            {% if img.get('uploaded_at') %} • {{ img.get('uploaded_at') }}{% endif %}
                                        </p>
                                        {# file-upload.js rewrites .image-schedule-summary in place when the schedule is edited #}
                                        <p class="text-xs text-blue-600 mt-1 image-schedule-summary">
                                            <i class="fas fa-clock mr-1"></i>{{ 'Scheduled' if has_schedule else 'Always shown' }}
                                        </p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-2 ml-4">
                                    <button type="button" 
                                            data-field-id="{{ field_id }}"
                                            data-image-id="{{ img_id }}"
                                            data-image-idx="{{ loop.index0 }}"
                                            onclick="window.openImageSchedule(this.dataset.fieldId, this.dataset.imageId || null, parseInt(this.dataset.imageIdx))"
                                            class="text-blue-600 hover:text-blue-800 p-2"
                                            title="Schedule this image"
                                            aria-label="Schedule image {{ img.get('original_filename') or img.get('filename', '') }}">
                                        <i class="fas fa-calendar-alt" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" 
                                            data-field-id="{{ field_id }}"
                                            data-image-id="{{ img_id }}"
                                            data-plugin-id="{{ plugin_id_from_config }}"
                                            onclick="window.deleteUploadedImage(this.dataset.fieldId, this.dataset.imageId, this.dataset.pluginId)"
                                            class="text-red-600 hover:text-red-800 p-2"
                                            title="Delete image"
                                            aria-label="Delete image {{ img.get('original_filename') or img.get('filename', '') }}">
                                        <i class="fas fa-trash" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>
                            <div id="schedule_{{ img_id|string|replace('.', '_')|replace('-', '_') }}" class="hidden mt-3 pt-3 border-t border-gray-300"></div>
                        </div>
                        {% endfor %}
                    </div>
                    
                    <!-- Hidden input to store image data -->
                    <input type="hidden" id="{{ field_id }}_images_data" name="{{ full_key }}" value='{{ (array_value|tojson|safe)|replace("'", "&#39;") }}'>
                </div>
            {% elif x_widget == 'checkbox-group' %}
                {# Checkbox group widget for multi-select arrays with enum items #}
                {% set array_value = value if value is not none and value is iterable and value is not string else (prop.default if prop.default is defined and prop.default is iterable and prop.default is not string else []) %}
                {% set items_schema = prop.get('items') or {} %}
                {% set enum_items = items_schema.get('enum') or [] %}
                {% set x_options = prop.get('x-options') or {} %}
                {% set labels = x_options.get('labels') or {} %}
                {# A saved value that is no longer one of the options -- a team
                   code the league retired, an option dropped from the schema --
                   has no checkbox to render, so it would sit unseen in the
                   hidden input below and be posted back on save. The schema
                   rejects it and the save endpoint returns 400, which blocks
                   editing any other field on the plugin until the stale entry
                   is found and removed. Drop them here instead, and say which,
                   so the value is not lost silently. Only when the widget
                   actually has options: an empty enum means nothing to check
                   against, and filtering on it would wipe the field. #}
                {% set stale_values = (array_value | reject('in', enum_items) | list) if enum_items else [] %}
                {% set array_value = (array_value | select('in', enum_items) | list) if enum_items else array_value %}

                {% if stale_values %}
                <div class="mt-1 mb-2 rounded border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-800"
                     data-stale-options="{{ field_id }}">
                    No longer offered, and will be removed when you save:
                    <span class="font-mono">{{ stale_values | join(', ') }}</span>.
                </div>
                {% endif %}

                <div class="mt-1 space-y-2" role="group" aria-labelledby="{{ field_id }}-label">
                    {% for option in enum_items %}
                    {% set is_checked = option in array_value %}
                    {% set option_label = labels.get(option, option|replace('_', ' ')|title) %}
                    {% set checkbox_id = (field_id ~ '_' ~ option)|replace('.', '_')|replace(' ', '_') %}
                    <label class="flex items-center cursor-pointer">
                        <input type="checkbox" 
                               id="{{ checkbox_id }}"
                               name="{{ full_key }}[]"
                               data-checkbox-group="{{ field_id }}"
                               data-option-value="{{ option }}"
                               value="{{ option }}"
                               {% if is_checked %}checked{% endif %}
                               onchange="updateCheckboxGroupData('{{ field_id }}')"
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <span class="ml-2 text-sm text-gray-700">{{ option_label }}</span>
                    </label>
                    {% endfor %}
                </div>
                {# Hidden input to store selected values as JSON array (like array-of-objects pattern) #}
                <input type="hidden" id="{{ field_id }}_data" name="{{ full_key }}_data" value='{{ (array_value|tojson|safe)|replace("'", "&#39;") }}'>
                {# Sentinel hidden input with bracket notation to allow clearing array to [] when all unchecked #}
                {# This ensures the field is always submitted, even when all checkboxes are unchecked #}
                <input type="hidden" name="{{ full_key }}[]" value="">
            {% elif x_widget == 'google-calendar-picker' %}
                {# Google Calendar picker — dynamically loads calendars from the API #}
                {# Normalise: if value is a string (legacy comma-separated), split it; otherwise fall back to default or [] #}
                {% if value is not none and value is string and value %}
                    {% set array_value = value.split(',') | map('trim') | list %}
                {% elif value is not none and value is iterable and value is not string %}
                    {% set array_value = value %}
                {% elif prop.default is defined and prop.default is string and prop.default %}
                    {% set array_value = prop.default.split(',') | map('trim') | list %}
                {% elif prop.default is defined and prop.default is iterable and prop.default is not string %}
                    {% set array_value = prop.default %}
                {% else %}
                    {% set array_value = [] %}
                {% endif %}
                <div id="{{ field_id }}_container" class="google-calendar-picker-container mt-1"></div>
                <script>
                (function() {
                    var MAX_RETRIES = 40;
                    var retries = 0;
                    function initWidget() {
                        if (retries >= MAX_RETRIES) { return; }
                        retries++;
                        if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
                        var widget = window.LEDMatrixWidgets.get('google-calendar-picker');
                        if (!widget) { setTimeout(initWidget, 50); return; }
                        var container = document.getElementById('{{ field_id }}_container');
                        if (!container) return;
                        var value = {{ array_value|tojson|safe }};
                        widget.render(container, {}, value, { fieldId: '{{ field_id }}', pluginId: '{{ plugin_id }}', name: '{{ full_key }}' });
                    }
                    if (document.readyState === 'loading') {
                        document.addEventListener('DOMContentLoaded', initWidget);
                    } else {
                        setTimeout(initWidget, 50);
                    }
                })();
                </script>
            {% elif x_widget == 'day-selector' %}
                {# Day selector widget for selecting days of the week #}
                {% set array_value = value if value is not none and value is iterable and value is not string else (prop.default if prop.default is defined and prop.default is iterable and prop.default is not string else []) %}
                <div id="{{ field_id }}_container" class="day-selector-container mt-1"></div>
                <script>
                (function() {
                    function initWidget() {
                        if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
                        var widget = window.LEDMatrixWidgets.get('day-selector');
                        if (!widget) { setTimeout(initWidget, 50); return; }
                        var container = document.getElementById('{{ field_id }}_container');
                        if (!container) return;
                        var value = {{ array_value|tojson|safe }};
                        var config = { 'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }} };
                        widget.render(container, config, value, { fieldId: '{{ field_id }}', pluginId: '{{ plugin_id }}', name: '{{ full_key }}' });
                    }
                    if (document.readyState === 'loading') {
                        document.addEventListener('DOMContentLoaded', initWidget);
                    } else {
                        setTimeout(initWidget, 50);
                    }
                })();
                </script>
            {% else %}
                {# Check for custom-feeds widget first #}
                {% set items_schema = prop.get('items') or {} %}
                {% if x_widget == 'custom-feeds' %}
                    {# Custom feeds table interface - widget-specific implementation #}
                    {# Validate that required fields exist in schema #}
                    {% set item_properties = items_schema.get('properties', {}) %}
                    {% if not (item_properties.get('name') and item_properties.get('url')) %}
                        {# Fallback to generic if schema doesn't match expected structure #}
                        <p class="text-xs text-amber-600 mt-1">
                            <i class="fas fa-exclamation-triangle mr-1"></i>
                            Custom feeds widget requires 'name' and 'url' properties in items schema.
                        </p>
                    {% else %}
                        {% set max_items = prop.get('maxItems', 50) %}
                        {% set array_value = value if value is not none and value is iterable and value is not string else (prop.default if prop.default is defined and prop.default is iterable and prop.default is not string else []) %}
                        
                        <div class="custom-feeds-table-container mt-1">
                            <table class="min-w-full divide-y divide-gray-200 border border-gray-300 rounded-lg">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Logo</th>
                                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Enabled</th>
                                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="{{ field_id }}_tbody" class="bg-white divide-y divide-gray-200">
                                    {% for item in array_value %}
                                    {% set item_index = loop.index0 %}
                                    <tr class="custom-feed-row" data-index="{{ item_index }}">
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <input type="text" 
                                                   name="{{ full_key }}.{{ item_index }}.name"
                                                   value="{{ item.get('name', '') }}"
                                                   class="block w-full px-2 py-1 border border-gray-300 rounded text-sm"
                                                   aria-label="Feed name, row {{ item_index + 1 }}"
                                                   placeholder="Feed Name"
                                                   required>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <input type="url" 
                                                   name="{{ full_key }}.{{ item_index }}.url"
                                                   value="{{ item.get('url', '') }}"
                                                   class="block w-full px-2 py-1 border border-gray-300 rounded text-sm"
                                                   aria-label="Feed URL, row {{ item_index + 1 }}"
                                                   placeholder="https://example.com/feed"
                                                   required>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            {% set logo_value = item.get('logo') or {} %}
                                            {% set logo_path = logo_value.get('path', '') %}
                                            <div class="flex items-center space-x-2">
                                                <input type="file" 
                                                       id="{{ field_id }}_logo_{{ item_index }}"
                                                       accept="image/png,image/jpeg,image/bmp,image/gif"
                                                       style="display: none;"
                                                       onchange="handleCustomFeedLogoUpload(event, '{{ field_id }}', {{ item_index }}, '{{ plugin_id }}', '{{ full_key }}')">
                                                <button type="button" 
                                                        onclick="document.getElementById('{{ field_id }}_logo_{{ item_index }}').click()"
                                                        class="px-2 py-1 text-xs bg-gray-200 hover:bg-gray-300 rounded">
                                                    <i class="fas fa-upload mr-1"></i> Upload
                                                </button>
                                                {% if logo_path %}
                                                <img src="/{{ logo_path }}" alt="Logo" loading="lazy" decoding="async" class="w-8 h-8 object-cover rounded border" id="{{ field_id }}_logo_preview_{{ item_index }}">
                                                <input type="hidden" name="{{ full_key }}.{{ item_index }}.logo.path" value="{{ logo_path }}">
                                                {# Only when there is one, as custom-feeds.js does: a blank id
                                                   is saved as null and fails the id's string type. #}
                                                {% if logo_value.get('id') %}
                                                <input type="hidden" name="{{ full_key }}.{{ item_index }}.logo.id" value="{{ logo_value.get('id') }}">
                                                {% endif %}
                                                {% else %}
                                                <span class="text-xs text-gray-400">No logo</span>
                                                {% endif %}
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-center">
                                            <input type="hidden" name="{{ full_key }}.{{ item_index }}.enabled" value="{{ 'true' if item.get('enabled', true) else 'false' }}">
                                            <input type="checkbox"
                                                   name="{{ full_key }}.{{ item_index }}.enabled"
                                                   {% if item.get('enabled', true) %}checked{% endif %}
                                                   value="true"
                                                   onchange="this.previousElementSibling.value = this.checked ? 'true' : 'false'"
                                                   aria-label="Feed enabled, row {{ item_index + 1 }}"
                                                   class="h-4 w-4 text-blue-600">
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-center">
                                            <button type="button"
                                                    onclick="removeCustomFeedRow(this)"
                                                    aria-label="Remove feed, row {{ item_index + 1 }}"
                                                    class="text-red-600 hover:text-red-800 px-2 py-1">
                                                <i class="fas fa-trash" aria-hidden="true"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <button type="button" 
                                    onclick="addCustomFeedRow('{{ field_id }}', '{{ full_key }}', {{ max_items }}, '{{ plugin_id }}')"
                                    class="mt-3 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md"
                                    {% if array_value|length >= max_items %}disabled style="opacity: 0.5;"{% endif %}>
                                <i class="fas fa-plus mr-1"></i> Add Feed
                            </button>
                        </div>
                    {% endif %}
                {% elif x_widget == 'array-table' %}
                    {# Generic array-of-objects table widget - reads columns from schema #}
                    {% set item_properties = items_schema.get('properties', {}) %}
                    {% set max_items = prop.get('maxItems', 50) %}
                    {% set array_value = value if value is not none and value is iterable and value is not string else (prop.default if prop.default is defined and prop.default is iterable and prop.default is not string else []) %}

                    {# Use x-columns if specified, otherwise auto-detect first 4 simple properties #}
                    {# Hidden item properties never become columns (see prop_is_hidden). #}
                    {% set x_columns = prop.get('x-columns') %}
                    {% if x_columns %}
                        {% set display_columns = [] %}
                        {% for col_name in x_columns %}
                            {% if not prop_is_hidden(item_properties.get(col_name))|trim %}
                                {% set _ = display_columns.append(col_name) %}
                            {% endif %}
                        {% endfor %}
                    {% else %}
                        {% set display_columns = [] %}
                        {% for col_name in item_properties.keys() %}
                            {% set col_def = item_properties[col_name] %}
                            {% if col_def.get('type') not in ['object', 'array'] and display_columns|length < 4 and not prop_is_hidden(col_def)|trim %}
                                {% set _ = display_columns.append(col_name) %}
                            {% endif %}
                        {% endfor %}
                    {% endif %}

                    <div class="array-table-container mt-1" data-field-id="{{ field_id }}" data-full-key="{{ full_key }}" data-max-items="{{ max_items }}" data-plugin-id="{{ plugin_id }}">
                        <div style="overflow-x:auto">
                        <table class="divide-y divide-gray-200 border border-gray-300 rounded-lg" style="min-width:max-content;width:100%">
                            <thead class="bg-gray-50">
                                <tr>
                                    {% for col_name in display_columns %}
                                        {% set col_def = item_properties.get(col_name, {}) %}
                                        {% set col_title = col_def.get('title', col_name|replace('_', ' ')|title) %}
                                        {% set col_xwidget = col_def.get('x-widget') or col_def.get('x_widget', '') %}
                                        {% set col_enum = col_def.get('enum', []) %}
                                        {% set _raw_ctype = col_def.get('type', 'string') %}
                                        {% if _raw_ctype is iterable and _raw_ctype is not string %}
                                            {% set col_ctype = (_raw_ctype | reject('equalto','null') | list | first) or 'string' %}
                                        {% else %}
                                            {% set col_ctype = _raw_ctype or 'string' %}
                                        {% endif %}
                                        {% if col_xwidget == 'date-picker' %}{% set col_min_w = '140px' %}
                                        {% elif col_xwidget == 'time-picker' %}{% set col_min_w = '115px' %}
                                        {% elif col_xwidget == 'file-upload-single' %}{% set col_min_w = '200px' %}
                                        {% elif col_enum %}{% set col_min_w = '90px' %}
                                        {% elif col_ctype == 'boolean' %}{% set col_min_w = '60px' %}
                                        {% elif col_ctype in ['integer', 'number'] %}{% set col_min_w = '80px' %}
                                        {% else %}{% set col_min_w = '110px' %}{% endif %}
                                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" style="min-width:{{ col_min_w }}">{{ col_title }}</th>
                                    {% endfor %}
                                    <th class="px-3 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider" style="min-width:90px">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="{{ field_id }}_tbody" class="bg-white divide-y divide-gray-200">
                                {% for item in array_value %}
                                {% set item_index = loop.index0 %}
                                <tr class="array-table-row" data-index="{{ item_index }}">
                                    {% for col_name in display_columns %}
                                        {% set col_def = item_properties.get(col_name, {}) %}
                                        {# Accessible name for the cell's control: column title + row. #}
                                        {% set cell_label = col_def.get('title', col_name|replace('_', ' ')|title) ~ ', row ' ~ (item_index + 1) %}
                                        {# Normalize nullable types e.g. ["null","integer"] → "integer" #}
                                        {% set _raw_type = col_def.get('type', 'string') %}
                                        {% if _raw_type is iterable and _raw_type is not string %}
                                            {% set col_type = (_raw_type | reject('equalto','null') | list | first) or 'string' %}
                                        {% else %}
                                            {% set col_type = _raw_type or 'string' %}
                                        {% endif %}
                                        {% set col_xwidget = col_def.get('x-widget') or col_def.get('x_widget', '') %}
                                        {% set col_enum = col_def.get('enum', []) %}
                                        {% set col_value = item.get(col_name, col_def.get('default', '')) %}
                                        {% if col_xwidget == 'date-picker' %}{% set td_min_w = '140px' %}
                                        {% elif col_xwidget == 'time-picker' %}{% set td_min_w = '115px' %}
                                        {% elif col_xwidget == 'file-upload-single' %}{% set td_min_w = '200px' %}
                                        {% elif col_enum %}{% set td_min_w = '90px' %}
                                        {% elif col_type == 'boolean' %}{% set td_min_w = '60px' %}
                                        {% elif col_type in ['integer', 'number'] %}{% set td_min_w = '80px' %}
                                        {% else %}{% set td_min_w = '110px' %}{% endif %}
                                        <td class="px-3 py-3 whitespace-nowrap" style="min-width:{{ td_min_w }};vertical-align:middle">
                                            {% if col_type == 'boolean' %}
                                                {# Hidden sentinel ensures unchecked boxes still submit "false" (browsers
                                                   omit unchecked checkboxes entirely). It shares the checkbox's `name`,
                                                   so it must always mirror the checkbox's actual state — both here at
                                                   render time and on every toggle — or whichever of the two same-named
                                                   inputs the save request happens to prefer can silently revert this
                                                   field to false regardless of what's checked. #}
                                                <input type="hidden" name="{{ full_key }}.{{ item_index }}.{{ col_name }}" value="{{ 'true' if col_value else 'false' }}">
                                                <input type="checkbox"
                                                       name="{{ full_key }}.{{ item_index }}.{{ col_name }}"
                                                       aria-label="{{ cell_label }}"
                                                       {% if col_value %}checked{% endif %}
                                                       value="true"
                                                       onchange="this.previousElementSibling.value = this.checked ? 'true' : 'false'"
                                                       class="h-4 w-4 text-blue-600">
                                            {% elif col_type == 'integer' or col_type == 'number' %}
                                                <input type="number"
                                                       name="{{ full_key }}.{{ item_index }}.{{ col_name }}"
                                                       aria-label="{{ cell_label }}"
                                                       value="{{ col_value if col_value is not none else '' }}"
                                                       {% if col_def.get('minimum') is not none %}min="{{ col_def.get('minimum') }}"{% endif %}
                                                       {% if col_def.get('maximum') is not none %}max="{{ col_def.get('maximum') }}"{% endif %}
                                                       {% if col_type == 'integer' %}step="1"{% else %}step="any"{% endif %}
                                                       class="block w-20 px-2 py-1 border border-gray-300 rounded text-sm text-center"
                                                       {% if col_def.get('description') %}title="{{ col_def.get('description') }}"{% endif %}>
                                            {% elif col_enum %}
                                                {# Labels are opt-in here and the fallback stays the raw
                                                   value: table columns hold things like ticker symbols,
                                                   which must not be title-cased behind the user's back. #}
                                                {% set col_labels = (col_def.get('x-options') or col_def.get('x_options') or {}).get('labels') or {} %}
                                                <select name="{{ full_key }}.{{ item_index }}.{{ col_name }}"
                                                        aria-label="{{ cell_label }}"
                                                        class="block w-full px-2 py-1 border border-gray-300 rounded text-sm bg-white">
                                                    {% for opt in col_enum %}{% if opt is not none %}
                                                    <option value="{{ opt }}" {% if col_value == opt or (col_value is none and col_def.get('default') == opt) %}selected{% endif %}>{{ col_labels.get(opt, opt) }}</option>
                                                    {% endif %}{% endfor %}
                                                </select>
                                            {% elif col_xwidget == 'date-picker' %}
                                                <input type="date"
                                                       name="{{ full_key }}.{{ item_index }}.{{ col_name }}"
                                                       aria-label="{{ cell_label }}"
                                                       value="{{ col_value if col_value is not none else '' }}"
                                                       class="block w-full px-2 py-1 border border-gray-300 rounded text-sm">
                                            {% elif col_xwidget == 'time-picker' %}
                                                <input type="time"
                                                       name="{{ full_key }}.{{ item_index }}.{{ col_name }}"
                                                       aria-label="{{ cell_label }}"
                                                       value="{{ col_value if col_value is not none else '00:00' }}"
                                                       class="block w-full px-2 py-1 border border-gray-300 rounded text-sm">
                                            {% elif col_xwidget == 'file-upload-single' %}
                                                {% set cell_input_id = field_id ~ '_' ~ item_index ~ '_' ~ col_name %}
                                                <div class="flex items-center gap-1">
                                                    {% if col_value %}<img src="/{{ col_value }}" alt="" loading="lazy" decoding="async" class="w-6 h-6 object-cover rounded flex-shrink-0" onerror="this.style.display='none'">{% endif %}
                                                    <input type="text"
                                                           id="{{ cell_input_id }}"
                                                           aria-label="{{ cell_label }}"
                                                           name="{{ full_key }}.{{ item_index }}.{{ col_name }}"
                                                           value="{{ col_value if col_value is not none else '' }}"
                                                           class="block w-20 px-1 py-1 border border-gray-300 rounded text-xs"
                                                           placeholder="path…">
                                                    <label class="file-trigger cursor-pointer flex-shrink-0 inline-flex items-center px-1 py-1 bg-blue-50 border border-blue-200 rounded text-xs text-blue-600 hover:bg-blue-100" title="Upload image">
                                                        <i class="fas fa-upload" aria-hidden="true"></i>
                                                        <input type="file"
                                                               class="sr-only"
                                                               aria-label="Upload image: {{ cell_label }}"
                                                               accept="image/png,image/jpeg,image/bmp,image/gif"
                                                               data-plugin-id="{{ plugin_id }}"
                                                               data-target-input="{{ cell_input_id }}"
                                                               onchange="(function(e){ const t=document.getElementById('{{ cell_input_id }}'); const p=t.previousElementSibling && t.previousElementSibling.tagName==='IMG' ? t.previousElementSibling : null; window.handleArrayTableImageUpload(e,t,p,'{{ plugin_id }}'); })(event)">
                                                    </label>
                                                </div>
                                            {% else %}
                                                <input type="text"
                                                       name="{{ full_key }}.{{ item_index }}.{{ col_name }}"
                                                       aria-label="{{ cell_label }}"
                                                       value="{{ col_value if col_value is not none else '' }}"
                                                       class="block w-full px-2 py-1 border border-gray-300 rounded text-sm"
                                                       {% if col_def.get('description') %}placeholder="{{ col_def.get('description') }}"{% endif %}
                                                       {% if col_def.get('pattern') %}pattern="{{ col_def.get('pattern') }}"{% endif %}
                                                       {% if col_def.get('minLength') %}minlength="{{ col_def.get('minLength') }}"{% endif %}
                                                       {% if col_def.get('maxLength') %}maxlength="{{ col_def.get('maxLength') }}"{% endif %}>
                                            {% endif %}
                                        </td>
                                    {% endfor %}

                                    {# Actions cell: delete + optional edit button for advanced props #}
                                    {% set has_advanced = namespace(value=false) %}
                                    {% for k, v in item_properties.items() %}{% if k not in display_columns and k != 'id' and not prop_is_hidden(v)|trim %}{% set has_advanced.value = true %}{% endif %}{% endfor %}
                                    <td class="px-3 py-3 whitespace-nowrap text-center" style="min-width:90px;vertical-align:middle">
                                        {# Hidden item properties (e.g. countdown's auto-generated id) get
                                           no control, but a posted row replaces the stored item wholesale,
                                           so carry the stored value through. JSON-encoded so the save can
                                           restore its exact type (an id "1" must stay a string); absent
                                           values are not invented. #}
                                        {% for k, v in item_properties.items() %}{% if prop_is_hidden(v)|trim and k in item and item[k] is not none %}
                                        <input type="hidden" name="{{ full_key }}.{{ item_index }}.{{ k }}" data-hidden-prop="{{ k }}" value='{{ item[k]|tojson }}'>
                                        {% endif %}{% endfor %}
                                        <button type="button"
                                                onclick="removeArrayTableRow(this)"
                                                aria-label="Remove row {{ item_index + 1 }}"
                                                class="text-red-600 hover:text-red-800 px-2 py-1">
                                            <i class="fas fa-trash" aria-hidden="true"></i>
                                        </button>
                                        {% if has_advanced.value %}
                                        <button type="button"
                                                onclick="openArrayTableRowEditor(this)"
                                                class="text-blue-500 hover:text-blue-700 px-2 py-1 ml-1"
                                                aria-label="Edit advanced settings for row {{ item_index + 1 }}"
                                                title="Edit layout, style and other advanced properties">
                                            <i class="fas fa-sliders-h" aria-hidden="true"></i>
                                        </button>
                                        {% endif %}
                                    </td>

                                    {# Hidden cell: flat hidden inputs for non-displayed props (layout, style, etc.) #}
                                    {% if has_advanced.value %}
                                    {% set adv_schema = namespace(d={}) %}
                                    {% for k, v in item_properties.items() %}{% if k not in display_columns and k != 'id' and not prop_is_hidden(v)|trim %}{% set _ = adv_schema.d.update({k: v}) %}{% endif %}{% endfor %}
                                    <td style="display:none" class="array-table-advanced-data"
                                        data-prop-schema='{{ adv_schema.d|tojson }}'>
                                        {% for prop_name, prop_schema in adv_schema.d.items() %}
                                            {% set prop_type = prop_schema.get('type', 'string') %}
                                            {% if prop_type == 'object' and prop_schema.get('properties') %}
                                                {% for sub_name, sub_schema in prop_schema.get('properties', {}).items() %}
                                                    {% set _sub_obj = item.get(prop_name) if item.get(prop_name) is mapping else {} %}
                                                    {% if prop_is_hidden(sub_schema)|trim %}
                                                    {# Kept out of the row editor (no data-nested-prop); stored value only. #}
                                                    {% if sub_name in _sub_obj and _sub_obj[sub_name] is not none %}
                                                    <input type="hidden"
                                                           name="{{ full_key }}.{{ item_index }}.{{ prop_name }}.{{ sub_name }}"
                                                           data-hidden-prop="{{ prop_name }}.{{ sub_name }}"
                                                           value='{{ _sub_obj[sub_name]|tojson }}'>
                                                    {% endif %}
                                                    {% else %}
                                                    {% set sub_val = item.get(prop_name, {}).get(sub_name) %}
                                                    {% set sub_default = sub_schema.get('default') %}
                                                    {% set final_val = sub_val if sub_val is not none else sub_default %}
                                                    <input type="hidden"
                                                           name="{{ full_key }}.{{ item_index }}.{{ prop_name }}.{{ sub_name }}"
                                                           data-nested-prop="{{ prop_name }}.{{ sub_name }}"
                                                           data-prop-type="{{ sub_schema.get('type', 'string') }}"
                                                           data-prop-schema='{{ sub_schema|tojson }}'
                                                           value="{{ final_val if final_val is not none else '' }}">
                                                    {% endif %}
                                                {% endfor %}
                                            {% else %}
                                                {% set prop_val = item.get(prop_name) %}
                                                {% set prop_default = prop_schema.get('default') %}
                                                {% set final_val = prop_val if prop_val is not none else prop_default %}
                                                <input type="hidden"
                                                       name="{{ full_key }}.{{ item_index }}.{{ prop_name }}"
                                                       data-nested-prop="{{ prop_name }}"
                                                       data-prop-type="{{ prop_schema.get('type', 'string') }}"
                                                       data-prop-schema='{{ prop_schema|tojson }}'
                                                       value="{{ final_val if final_val is not none else '' }}">
                                            {% endif %}
                                        {% endfor %}
                                    </td>
                                    {% endif %}
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        <button type="button"
                                onclick="addArrayTableRow(this)"
                                data-field-id="{{ field_id }}"
                                data-full-key="{{ full_key }}"
                                data-max-items="{{ max_items }}"
                                data-plugin-id="{{ plugin_id }}"
                                data-item-properties='{% set ns = namespace(d={}) %}{% for k in display_columns %}{% if k in item_properties %}{% set _ = ns.d.update({k: item_properties[k]}) %}{% endif %}{% endfor %}{{ ns.d|tojson }}'
                                data-full-item-properties='{{ item_properties|tojson }}'
                                data-display-columns='{{ display_columns|tojson }}'
                                class="mt-3 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md"
                                {% if array_value|length >= max_items %}disabled style="opacity: 0.5;"{% endif %}>
                            <i class="fas fa-plus mr-1"></i> Add Item
                        </button>
                        </div>{# end overflow-x:auto wrapper #}
                    </div>
                {% elif x_widget == 'color-picker' %}
                    {# RGB color array: R / G / B number inputs + visual swatch + sync'd hex picker #}
                    {% set color_arr = value if value is not none and value is iterable and value is not string else (prop.default if prop.default is defined and prop.default is iterable and prop.default is not string else [255, 255, 255]) %}
                    {% set r_val = color_arr[0] if color_arr|length > 0 else 255 %}
                    {% set g_val = color_arr[1] if color_arr|length > 1 else 255 %}
                    {% set b_val = color_arr[2] if color_arr|length > 2 else 255 %}
                    {% set hex_val = '#%02x%02x%02x' % (r_val|int, g_val|int, b_val|int) %}
                    <div class="flex items-center gap-3 flex-wrap mt-1" id="{{ field_id }}_color_row">
                        <input type="color"
                               id="{{ field_id }}_hex"
                               value="{{ hex_val }}"
                               class="h-9 w-12 cursor-pointer rounded border border-gray-300"
                               title="Color picker"
                               aria-label="{{ label }} color picker"
                               oninput="(function(h){var r=parseInt(h.slice(1,3),16),g=parseInt(h.slice(3,5),16),b=parseInt(h.slice(5,7),16);document.getElementById('{{ field_id }}_r').value=r;document.getElementById('{{ field_id }}_g').value=g;document.getElementById('{{ field_id }}_b').value=b;})(this.value)">
                        <div class="flex items-center gap-1">
                            <label for="{{ field_id }}_r" class="text-xs text-gray-500 font-medium"><span aria-hidden="true">R</span><span class="sr-only">Red</span></label>
                            <input type="number" min="0" max="255" step="1"
                                   id="{{ field_id }}_r"
                                   name="{{ full_key }}.0"
                                   value="{{ r_val }}"
                                   class="w-16 px-2 py-1 border border-gray-300 rounded text-sm text-center"
                                   oninput="(function(){var r=+document.getElementById('{{ field_id }}_r').value||0,g=+document.getElementById('{{ field_id }}_g').value||0,b=+document.getElementById('{{ field_id }}_b').value||0;document.getElementById('{{ field_id }}_hex').value='#'+[r,g,b].map(function(n){return n.toString(16).padStart(2,'0')}).join('')})()">
                        </div>
                        <div class="flex items-center gap-1">
                            <label for="{{ field_id }}_g" class="text-xs text-gray-500 font-medium"><span aria-hidden="true">G</span><span class="sr-only">Green</span></label>
                            <input type="number" min="0" max="255" step="1"
                                   id="{{ field_id }}_g"
                                   name="{{ full_key }}.1"
                                   value="{{ g_val }}"
                                   class="w-16 px-2 py-1 border border-gray-300 rounded text-sm text-center"
                                   oninput="(function(){var r=+document.getElementById('{{ field_id }}_r').value||0,g=+document.getElementById('{{ field_id }}_g').value||0,b=+document.getElementById('{{ field_id }}_b').value||0;document.getElementById('{{ field_id }}_hex').value='#'+[r,g,b].map(function(n){return n.toString(16).padStart(2,'0')}).join('')})()">
                        </div>
                        <div class="flex items-center gap-1">
                            <label for="{{ field_id }}_b" class="text-xs text-gray-500 font-medium"><span aria-hidden="true">B</span><span class="sr-only">Blue</span></label>
                            <input type="number" min="0" max="255" step="1"
                                   id="{{ field_id }}_b"
                                   name="{{ full_key }}.2"
                                   value="{{ b_val }}"
                                   class="w-16 px-2 py-1 border border-gray-300 rounded text-sm text-center"
                                   oninput="(function(){var r=+document.getElementById('{{ field_id }}_r').value||0,g=+document.getElementById('{{ field_id }}_g').value||0,b=+document.getElementById('{{ field_id }}_b').value||0;document.getElementById('{{ field_id }}_hex').value='#'+[r,g,b].map(function(n){return n.toString(16).padStart(2,'0')}).join('')})()">
                        </div>
                        <div class="w-8 h-8 rounded border border-gray-300 flex-shrink-0"
                             style="background-color: rgb({{ r_val }}, {{ g_val }}, {{ b_val }})"
                             title="Color preview"></div>
                    </div>
                {% else %}
                    {# Generic array-of-objects would go here if needed in the future #}
                    {# For now, fall back to regular array input (comma-separated) #}
                    {# Regular array input (comma-separated) #}
                    {% set array_value = value if value is not none else (prop.default if prop.default is defined else []) %}
                    <input type="text"
                           id="{{ field_id }}"
                           name="{{ full_key }}"
                           value="{{ array_value|join(', ') if array_value is iterable and array_value is not string else '' }}"
                           placeholder="Enter values separated by commas"
                           class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-white text-black placeholder:text-gray-500">
                    <p class="text-xs text-gray-400 mt-1">Separate multiple values with commas</p>
                {% endif %}
            {% endif %}
            
            {# String/default field - check for widgets #}
            {% else %}
            {% set str_widget = prop.get('x-widget') or prop.get('x_widget') %}
            {% set str_value = value if value is not none else (prop.default if prop.default is defined else '') %}
            {% if str_widget == 'file-upload' %}
                {# Single-file upload widget for string fields (e.g., credentials.json) #}
                {% set upload_config = prop.get('x-upload-config') or {} %}
                {% set upload_endpoint = upload_config.get('upload_endpoint', '') %}
                {% set target_filename = upload_config.get('target_filename', 'file.json') %}
                {% set max_size_mb = upload_config.get('max_size_mb', 1) %}
                {% set allowed_extensions = upload_config.get('allowed_extensions', ['.json']) %}
                <div id="{{ field_id }}_upload_widget" class="mt-1">
                    <div id="{{ field_id }}_drop_zone"
                         class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-blue-400 transition-colors cursor-pointer"
                         role="button"
                         tabindex="0"
                         aria-label="Upload {{ target_filename }}"
                         ondrop="window.handleFileDrop(event, this.dataset.fieldId)"
                         ondragover="event.preventDefault()"
                         data-field-id="{{ field_id }}"
                         onclick="document.getElementById('{{ field_id }}_file_input').click()"
                         onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();document.getElementById('{{ field_id }}_file_input').click();}">
                        <input type="file"
                               id="{{ field_id }}_file_input"
                               accept="{{ allowed_extensions|join(',') }}"
                               style="display: none;"
                               data-field-id="{{ field_id }}"
                               data-upload-endpoint="{{ upload_endpoint }}"
                               data-target-filename="{{ target_filename }}"
                               data-max-size-mb="{{ max_size_mb }}"
                               data-allowed-extensions="{{ allowed_extensions|join(',') }}"
                               onchange="window.handleSingleFileSelect(event, this.dataset.fieldId)">
                        <i class="fas fa-cloud-upload-alt text-2xl text-gray-400 mb-1"></i>
                        <p class="text-sm text-gray-600">Click to upload {{ target_filename }}</p>
                        <p class="text-xs text-gray-500 mt-1">Max {{ max_size_mb }}MB ({{ allowed_extensions|join(', ') }})</p>
                    </div>
                    <div id="{{ field_id }}_upload_status" class="mt-2 text-xs text-gray-500" aria-live="polite"></div>
                    <input type="hidden"
                           id="{{ field_id }}"
                           name="{{ full_key }}"
                           value="{{ str_value }}">
                </div>
            {% elif str_widget == 'json-file-manager' %}
                {# Embedded file manager — plugin's web_ui/file_manager.html served via /v3/plugin-ui/ route #}
                <div class="mt-1 rounded-lg border border-gray-200 overflow-hidden">
                    <iframe id="{{ field_id }}_frame"
                            src="/v3/plugin-ui/{{ plugin_id }}/web-ui/file_manager.html"
                            style="width:100%;height:640px;border:none;"
                            title="File Manager for {{ plugin_id }}"></iframe>
                </div>
                <p class="text-xs text-amber-600 mt-2 flex items-center">
                    <i class="fas fa-info-circle mr-1"></i>
                    Changes in the file manager save immediately — no need to click Save Configuration.
                </p>
            {% elif str_widget in ['text-input', 'textarea', 'select-dropdown', 'toggle-switch', 'radio-group', 'date-picker', 'time-picker', 'slider', 'color-picker', 'email-input', 'url-input', 'password-input', 'font-selector', 'file-upload-single', 'plugin-file-manager', 'google-oauth'] %}
                {# Render widget container #}
                <div id="{{ field_id }}_container" class="{{ str_widget }}-container"></div>
                <script>
                (function() {
                    function initWidget() {
                        if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
                        var widget = window.LEDMatrixWidgets.get('{{ str_widget }}');
                        if (!widget) { setTimeout(initWidget, 50); return; }
                        var container = document.getElementById('{{ field_id }}_container');
                        if (!container) return;
                        var value = {{ str_value|tojson|safe }};
                        var config = {
                            'type': '{{ field_type }}',
                            'enum': {{ (prop.enum or [])|tojson|safe }},
                            'minimum': {{ prop.minimum|tojson if prop.minimum is defined else 'null' }},
                            'maximum': {{ prop.maximum|tojson if prop.maximum is defined else 'null' }},
                            'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }},
                            'x-upload-config': {{ (prop.get('x-upload-config') or prop.get('x_upload_config') or {})|tojson|safe }},
                            'x-widget-config': {{ (prop.get('x-widget-config') or prop.get('x_widget_config') or {})|tojson|safe }}
                        };
                        widget.render(container, config, value, { fieldId: '{{ field_id }}', name: '{{ full_key }}', pluginId: '{{ plugin_id }}' });
                    }
                    if (document.readyState === 'loading') {
                        document.addEventListener('DOMContentLoaded', initWidget);
                    } else {
                        setTimeout(initWidget, 50);
                    }
                })();
                </script>
            {% else %}
                {# Default text input #}
                <input type="text"
                       id="{{ field_id }}"
                       name="{{ full_key }}"
                       value="{{ str_value }}"
                       class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-white text-black placeholder:text-gray-500">
                {% if str_widget %}
                {# An x-widget the core does not ship may be supplied by the
                   plugin itself (manifest "widgets", served from its widgets/
                   directory). Ask the loader for it; the text input above is
                   the fallback and stays put unless the widget really renders,
                   so a missing or broken widget degrades to an editable field
                   rather than dropping the value on save. #}
                <div id="{{ field_id }}_container" class="{{ str_widget }}-container"></div>
                <script>
                (function() {
                    var WIDGET = {{ str_widget|tojson|safe }};
                    var PLUGIN = {{ plugin_id|tojson|safe }};
                    var VERSION = {{ ((plugin.version if plugin is defined and plugin else '') or '')|string|tojson|safe }};
                    function initPluginWidget() {
                        if (!window.LEDMatrixWidgets || !window.LEDMatrixWidgets.ensureWidget) {
                            setTimeout(initPluginWidget, 50);
                            return;
                        }
                        var container = document.getElementById('{{ field_id }}_container');
                        var fallback = document.getElementById('{{ field_id }}');
                        if (!container) { return; }
                        window.LEDMatrixWidgets.ensureWidget(WIDGET, PLUGIN, VERSION).then(function(available) {
                            if (!available) { container.remove(); return; }
                            var widget = window.LEDMatrixWidgets.get(WIDGET);
                            if (!widget || typeof widget.render !== 'function') { container.remove(); return; }
                            // Read the fallback's live value rather than the
                            // server-rendered one, so an edit typed while the
                            // widget script was still loading isn't lost.
                            var value = fallback ? fallback.value : {{ str_value|tojson|safe }};
                            var config = {
                                'type': '{{ field_type }}',
                                'enum': {{ (prop.enum or [])|tojson|safe }},
                                'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }},
                                'x-widget-config': {{ (prop.get('x-widget-config') or prop.get('x_widget_config') or {})|tojson|safe }}
                            };
                            try {
                                widget.render(container, config, value, {
                                    fieldId: '{{ field_id }}',
                                    name: '{{ full_key }}',
                                    pluginId: PLUGIN
                                });
                            } catch (e) {
                                console.error('[PluginWidget] render failed for ' + WIDGET, e);
                                container.remove();
                                return;
                            }
                            // Only now is the widget authoritative for this
                            // field; drop the fallback so the form posts one
                            // value rather than two under the same name.
                            if (fallback) { fallback.remove(); }
                        }).catch(function(e) {
                            console.warn('[PluginWidget] could not load ' + WIDGET, e);
                            container.remove();
                        });
                    }
                    if (document.readyState === 'loading') {
                        document.addEventListener('DOMContentLoaded', initPluginWidget);
                    } else {
                        setTimeout(initPluginWidget, 50);
                    }
                })();
                </script>
                {% endif %}
            {% endif %}
            {% endif %}
        </div>
    {% endif %}
    {% endif %}{# not prop_is_hidden #}
{% endmacro %}

{# Render a nested/collapsible section for object types #}
{% macro render_nested_section(key, prop, value, prefix='', plugin_id='') %}
    {% set full_key = (prefix ~ '.' ~ key) if prefix else key %}
    {% set section_id = (plugin_id ~ '-section-' ~ full_key)|replace('.', '-')|replace('_', '-') %}
    {% set label = prop.title if prop.title else key|replace('_', ' ')|title %}
    {% set description = prop.description if prop.description else '' %}
    {# Only a dict can be looked into. A schema that turns a legacy scalar into
       an object (news' dynamic_duration: true -> {enabled, ...}) still finds
       the scalar in config.json until the next save, and `key in true` is a
       TypeError that takes down the whole config page. A legacy boolean was
       the on/off switch the object's `enabled` now holds, so carry it over --
       rendering {} would draw that checkbox unchecked and the next save would
       quietly turn the feature off. The save then writes the object.
       The plugin loader applies the same rule before validating
       (legacy_bool_as_object in src/plugin_system/schema_manager.py), and
       test/test_legacy_boolean_config.py renders this macro against it:
       change the two together. #}
    {% if value is mapping %}
        {% set nested_value = value %}
    {% elif value is boolean and 'enabled' in (prop.properties or {}) %}
        {% set nested_value = {'enabled': value} %}
    {% else %}
        {% set nested_value = {} %}
    {% endif %}

    <div class="nested-section border border-gray-300 rounded-lg mb-4">
        <button type="button" 
                class="w-full bg-gray-100 hover:bg-gray-200 px-4 py-3 flex items-center justify-between text-left transition-colors rounded-t-lg"
                onclick="toggleSection('{{ section_id }}')">
            <div class="flex-1">
                <h4 class="font-semibold text-gray-900">{{ label }}</h4>
                {% if description %}
                <p class="text-sm text-gray-600 mt-1">{{ description }}</p>
                {% endif %}
            </div>
            <i id="{{ section_id }}-icon" class="fas fa-chevron-right text-gray-500 transition-transform"></i>
        </button>
        <div id="{{ section_id }}" class="nested-content bg-gray-50 px-4 py-4 space-y-3 hidden" style="display: none;">
            {% set property_order = prop['x-propertyOrder'] if 'x-propertyOrder' in prop else prop.properties.keys()|list %}
            {% for nested_key in property_order %}
                {% if nested_key in prop.properties and not prop_is_hidden(prop.properties[nested_key])|trim %}
                    {% set nested_prop = prop.properties[nested_key] %}
                    {% set nested_val = nested_value[nested_key] if nested_key in nested_value else none %}
                    {# Tagged so a widget that takes over part of a block can
                       drop exactly the children it owns and leave the rest
                       rendered, rather than removing the whole section. #}
                    <div data-child-key="{{ nested_key }}">
                        {{ render_field(nested_key, nested_prop, nested_val, full_key, plugin_id) }}
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
{% endmacro %}

{# ===== MAIN TEMPLATE ===== #}

<div class="plugin-config-container" 
     data-plugin-id="{{ plugin.id }}"
     x-data="{ saving: false, saveError: null, saveSuccess: false }">
    
    <div class="border-b border-gray-200 pb-4 mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-lg font-semibold text-gray-900">{{ plugin.name or plugin.id }}</h2>
                <p class="mt-1 text-sm text-gray-600">{{ plugin.description or 'Plugin configuration' }}</p>
            </div>
            <div class="flex items-center space-x-4">
                <button type="button"
                        onclick="window.previewPluginNow('{{ plugin.id }}')"
                        class="btn bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 text-sm rounded-md"
                        title="Run this plugin on the display for 60 seconds and open the live preview">
                    <i class="fas fa-play mr-1"></i>Preview on display
                </button>
                <label class="flex items-center cursor-pointer">
                    <input type="checkbox"
                           id="plugin-enabled-{{ plugin.id }}"
                           name="enabled"
                           value="true"
                           {% if plugin.enabled %}checked{% endif %}
                           hx-post="/api/v3/plugins/toggle?plugin_id={{ plugin.id }}"
                           hx-trigger="change"
                           hx-swap="none"
                           hx-vals='js:{enabled: document.getElementById("plugin-enabled-{{ plugin.id }}").checked ? "true" : "false"}'
                           hx-on::after-request="handleToggleResponse(event, '{{ plugin.id }}')"
                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                    <span class="ml-2 text-sm {% if plugin.enabled %}text-green-600{% else %}text-gray-500{% endif %}">
                        {% if plugin.enabled %}Enabled{% else %}Disabled{% endif %}
                    </span>
                </label>
            </div>
        </div>
    </div>

    <form id="plugin-config-form-{{ plugin.id }}"
          hx-post="/api/v3/plugins/config?plugin_id={{ plugin.id }}"
          hx-trigger="submit"
          hx-swap="none"
          hx-indicator="#save-indicator-{{ plugin.id }}"
          hx-on::before-request="this.querySelector('[type=submit]').disabled = true"
          hx-on::after-request="handleConfigSave(event, '{{ plugin.id }}')"
          onsubmit="return validatePluginConfigForm(this, '{{ plugin.id }}');">
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            {# Plugin Information Panel #}
            <div class="bg-gray-50 rounded-lg p-4">
                <h3 class="text-md font-medium text-gray-900 mb-3">Plugin Information</h3>
                <dl class="space-y-2">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Name</dt>
                        <dd class="text-sm text-gray-900">{{ plugin.name or plugin.id }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Author</dt>
                        <dd class="text-sm text-gray-900">{{ plugin.author or 'Unknown' }}</dd>
                    </div>
                    {% if plugin.version %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Version</dt>
                        <dd class="text-sm text-gray-900">{{ plugin.version }}</dd>
                    </div>
                    {% endif %}
                    {% if plugin.last_commit %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Commit</dt>
                        <dd class="text-sm text-gray-900 font-mono">
                            {{ plugin.last_commit[:7] if plugin.last_commit|length > 7 else plugin.last_commit }}
                            {% if plugin.branch %}
                            <span class="text-gray-500">({{ plugin.branch }})</span>
                            {% endif %}
                        </dd>
                    </div>
                    {% endif %}
                    {% if plugin.category %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Category</dt>
                        <dd class="text-sm text-gray-900">{{ plugin.category }}</dd>
                    </div>
                    {% endif %}
                    {% if plugin.tags %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Tags</dt>
                        <dd class="flex flex-wrap gap-1 mt-1">
                            {% for tag in plugin.tags %}
                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">{{ tag }}</span>
                            {% endfor %}
                        </dd>
                    </div>
                    {% endif %}
                </dl>
                
                {# On-Demand Controls #}
                <div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
                    <div class="flex items-center gap-2">
                        <i class="fas fa-bolt text-blue-500"></i>
                        <span class="text-sm font-semibold text-gray-900">On-Demand Controls</span>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <button type="button"
                                onclick="runPluginOnDemand('{{ plugin.id }}')"
                                class="px-3 py-2 text-sm bg-green-600 hover:bg-green-700 text-white rounded-md flex items-center gap-2 transition-colors">
                            <i class="fas fa-play-circle"></i>
                            <span>Run On-Demand</span>
                        </button>
                        <button type="button"
                                onclick="stopOnDemand()"
                                class="px-3 py-2 text-sm bg-red-600 hover:bg-red-700 text-white rounded-md flex items-center gap-2 transition-colors">
                            <i class="fas fa-stop"></i>
                            <span>Stop On-Demand</span>
                        </button>
                    </div>
                    {% if not plugin.enabled %}
                    <p class="text-xs text-amber-600">Plugin is disabled, but on-demand will temporarily enable it.</p>
                    {% endif %}
                </div>
            </div>
            
            {# Configuration Form Panel #}
            <div class="bg-gray-50 rounded-lg p-4">
                <h3 class="text-md font-medium text-gray-900 mb-3">Configuration</h3>
                {{ ui.settings_filter("Filter this plugin's settings…") }}
                <div class="space-y-4">
                    {% if schema and schema.properties %}
                        {# Use property order if defined, otherwise use natural order #}
                        {# Skip 'enabled' field - it's handled by the header toggle #}
                        {% set property_order = schema['x-propertyOrder'] if 'x-propertyOrder' in schema else schema.properties.keys()|list %}
                        {# Flat (non-object) properties flagged "x-advanced": true are
                           grouped into one collapsed "Advanced Settings" section after
                           the basic fields. Object-type properties already render as
                           their own collapsible sections, so the flag is ignored for
                           them. Schemas without the flag render exactly as before. #}
                        {% set tiers = namespace(basic=[], advanced=[]) %}
                        {% for key in property_order %}
                            {# A hidden key is neither drawn nor reported in
                               __rendered_section, so the save never reads its
                               absence as an unchecked box. #}
                            {% if key in schema.properties and key != 'enabled' and not prop_is_hidden(schema.properties[key])|trim %}
                                {% set prop = schema.properties[key] %}
                                {% set is_object = prop.type is defined and 'object' in prop.type %}
                                {% if prop.get('x-advanced') and not is_object %}
                                    {% set tiers.advanced = tiers.advanced + [key] %}
                                {% else %}
                                    {% set tiers.basic = tiers.basic + [key] %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                        {# Tell the save path which sections this form actually
                           drew. An unchecked checkbox posts nothing, so without
                           this the server cannot tell "the user cleared it"
                           from "the caller never had that field" -- and a
                           partial post would read as every box being off. #}
                        {% for key in tiers.basic + tiers.advanced %}
                            <input type="hidden" name="__rendered_section" value="{{ key }}">
                        {% endfor %}
                        {% for key in tiers.basic %}
                            {% set prop = schema.properties[key] %}
                            {% set value = config[key] if key in config else none %}
                            {{ render_field(key, prop, value, '', plugin.id) }}
                        {% endfor %}
                        {% if tiers.advanced %}
                            {% set adv_section_id = (plugin.id ~ '-section-advanced-settings')|replace('.', '-')|replace('_', '-') %}
                            <div class="nested-section border border-gray-300 rounded-lg mb-4">
                                <button type="button"
                                        class="w-full bg-gray-100 hover:bg-gray-200 px-4 py-3 flex items-center justify-between text-left transition-colors rounded-t-lg"
                                        aria-controls="{{ adv_section_id }}"
                                        aria-expanded="false"
                                        onclick="toggleSection('{{ adv_section_id }}')">
                                    <div class="flex-1">
                                        <h4 class="font-semibold text-gray-900">
                                            <i class="fas fa-sliders-h mr-1 text-gray-500"></i>Advanced Settings ({{ tiers.advanced|length }})
                                        </h4>
                                        <p class="text-sm text-gray-600 mt-1">Optional fine-tuning — the defaults work for most setups.</p>
                                    </div>
                                    <i id="{{ adv_section_id }}-icon" class="fas fa-chevron-right text-gray-500 transition-transform"></i>
                                </button>
                                <div id="{{ adv_section_id }}" class="nested-content bg-gray-50 px-4 py-4 space-y-3 hidden" style="display: none;">
                                    {% for key in tiers.advanced %}
                                        {% set prop = schema.properties[key] %}
                                        {% set value = config[key] if key in config else none %}
                                        {{ render_field(key, prop, value, '', plugin.id) }}
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                    {% else %}
                        {# No schema - render simple form from config #}
                        {% if config %}
                            {% for key, value in config.items() %}
                                {% if key not in ['enabled'] %}
                                <div class="form-group mb-4">
                                    {% set fallback_id = 'fallback-field-' ~ (key|string|replace(' ', '-')) %}
                                    <label for="{{ fallback_id }}" class="block text-sm font-medium text-gray-700 mb-1">
                                        {{ key|replace('_', ' ')|title }}
                                    </label>
                                    {% if value is sameas true or value is sameas false %}
                                    <label class="flex items-center cursor-pointer">
                                        <input type="checkbox" id="{{ fallback_id }}" name="{{ key }}" {% if value %}checked{% endif %}
                                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                        <span class="ml-2 text-sm text-gray-600">Enabled</span>
                                    </label>
                                    {% elif value is number %}
                                    <input type="number" id="{{ fallback_id }}" name="{{ key }}" value="{{ value }}"
                                           class="form-input w-full rounded-md border-gray-300 bg-gray-900 text-white placeholder:text-gray-400">
                                    {% else %}
                                    <input type="text" id="{{ fallback_id }}" name="{{ key }}" value="{{ value }}"
                                           class="form-input w-full rounded-md border-gray-300 bg-gray-900 text-white placeholder:text-gray-400">
                                    {% endif %}
                                </div>
                                {% endif %}
                            {% endfor %}
                        {% else %}
                            <p class="text-gray-500 text-sm">No configuration options available for this plugin.</p>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
        
        {# Web UI Actions — hide if schema has a dedicated file-manager widget,
           or if every action is marked ui_hidden in the manifest. #}
        {% set has_file_manager_widget = namespace(value=false) %}
        {% for _fk, _fp in schema.get('properties', {}).items() %}
            {% if (_fp.get('x-widget') or _fp.get('x_widget')) in ('json-file-manager', 'plugin-file-manager') %}
                {% set has_file_manager_widget.value = true %}
            {% endif %}
        {% endfor %}
        {% set visible_actions = [] %}
        {% for _a in web_ui_actions %}
            {% if not _a.get('ui_hidden', false) %}
                {% set _ = visible_actions.append(_a) %}
            {% endif %}
        {% endfor %}
        {% if visible_actions and not has_file_manager_widget.value %}
        <div class="mt-6 pt-4 border-t border-gray-200">
            <h3 class="text-md font-medium text-gray-900 mb-3">Plugin Actions</h3>
            {% if visible_actions[0].section_description %}
            <p class="text-sm text-gray-600 mb-4">{{ visible_actions[0].section_description }}</p>
            {% endif %}
            <div class="space-y-3">
                {% for action in visible_actions %}
                {% set action_id = "action-" ~ action.id ~ "-" ~ loop.index0 %}
                {% set status_id = "action-status-" ~ action.id ~ "-" ~ loop.index0 %}
                {% set bg_color = action.color or 'blue' %}
                {% if bg_color == 'green' %}
                    {% set bg_class = 'bg-green-50' %}
                    {% set border_class = 'border-green-200' %}
                    {% set text_class = 'text-green-900' %}
                    {% set text_light_class = 'text-green-700' %}
                    {% set btn_class = 'bg-green-600 hover:bg-green-700' %}
                {% elif bg_color == 'red' %}
                    {% set bg_class = 'bg-red-50' %}
                    {% set border_class = 'border-red-200' %}
                    {% set text_class = 'text-red-900' %}
                    {% set text_light_class = 'text-red-700' %}
                    {% set btn_class = 'bg-red-600 hover:bg-red-700' %}
                {% elif bg_color == 'yellow' %}
                    {% set bg_class = 'bg-yellow-50' %}
                    {% set border_class = 'border-yellow-200' %}
                    {% set text_class = 'text-yellow-900' %}
                    {% set text_light_class = 'text-yellow-700' %}
                    {% set btn_class = 'bg-yellow-600 hover:bg-yellow-700' %}
                {% elif bg_color == 'purple' %}
                    {% set bg_class = 'bg-purple-50' %}
                    {% set border_class = 'border-purple-200' %}
                    {% set text_class = 'text-purple-900' %}
                    {% set text_light_class = 'text-purple-700' %}
                    {% set btn_class = 'bg-purple-600 hover:bg-purple-700' %}
                {% else %}
                    {% set bg_class = 'bg-blue-50' %}
                    {% set border_class = 'border-blue-200' %}
                    {% set text_class = 'text-blue-900' %}
                    {% set text_light_class = 'text-blue-700' %}
                    {% set btn_class = 'bg-blue-600 hover:bg-blue-700' %}
                {% endif %}
                <div class="{{ bg_class }} border {{ border_class }} rounded-lg p-4">
                    <div class="flex items-center justify-between">
                        <div class="flex-1">
                            <h4 class="font-medium {{ text_class }} mb-1">
                                {% if action.icon %}<i class="{{ action.icon }} mr-2"></i>{% endif %}{{ action.title or action.id }}
                            </h4>
                            <p class="text-sm {{ text_light_class }}">{{ action.description or '' }}</p>
                        </div>
                        <button type="button"
                                id="{{ action_id }}"
                                onclick="executePluginAction('{{ action.id }}', {{ loop.index0 }}, '{{ plugin.id }}')"
                                data-plugin-id="{{ plugin.id }}"
                                data-action-id="{{ action.id }}"
                                class="btn {{ btn_class }} text-white px-4 py-2 rounded-md whitespace-nowrap">
                            {% if action.icon %}<i class="{{ action.icon }} mr-2"></i>{% endif %}{{ action.button_text or action.title or action.id }}
                        </button>
                    </div>
                    <div id="{{ status_id }}" class="mt-3 hidden"></div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        
        {# Action Buttons #}
        <div class="flex justify-end space-x-3 mt-6 pt-6 border-t border-gray-200">
            <button type="button"
                    onclick="refreshPluginConfig('{{ plugin.id }}')"
                    class="btn bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md">
                <i class="fas fa-sync-alt mr-2"></i>Refresh
            </button>
            <button type="button"
                    hx-post="/api/v3/plugins/update?plugin_id={{ plugin.id }}"
                    hx-swap="none"
                    hx-on::after-request="handlePluginUpdate(event, '{{ plugin.id }}')"
                    class="btn bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-md">
                <i class="fas fa-download mr-2"></i>Update
            </button>
            <button type="button"
                    onclick="if(confirm('Are you sure you want to uninstall {{ plugin.name or plugin.id }}?')) uninstallPlugin('{{ plugin.id }}')"
                    class="btn bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md">
                <i class="fas fa-trash mr-2"></i>Uninstall
            </button>
            <button type="submit" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center">
                <span id="save-indicator-{{ plugin.id }}" class="htmx-indicator mr-2">
                    <i class="fas fa-spinner fa-spin"></i>
                </span>
                <i class="fas fa-save mr-2 save-icon"></i>
                <span>Save Configuration</span>
            </button>
        </div>
    </form>
</div>