LEDMatrix/web_interface/templates/v3/partials/plugin_config.html

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

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

{# Render a single form field based on schema type #}
{% macro render_field(key, prop, value, prefix='', plugin_id='') %}
    {% 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 field_type = prop.type if prop.type is string else (prop.type[0] if prop.type is iterable else 'string') %}
    
    {# Handle nested objects recursively #}
    {% if field_type == 'object' and prop.properties %}
        {{ render_nested_section(key, prop, value, prefix, plugin_id) }}
    {% else %}
        <div class="form-group mb-4">
            <label for="{{ field_id }}" class="block text-sm font-medium text-gray-700 mb-1">
                {{ label }}
            </label>
            
            {% if description %}
            <p class="text-sm text-gray-500 mb-2">{{ description }}</p>
            {% endif %}
            
            {# Boolean checkbox #}
            {% if field_type == 'boolean' %}
            <label class="flex items-center cursor-pointer">
                <input type="checkbox" 
                       id="{{ field_id }}"
                       name="{{ full_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>
            
            {# Enum dropdown #}
            {% elif prop.enum %}
            <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 %}>
                    {{ option|replace('_', ' ')|title }}
                </option>
                {% endfor %}
            </select>
            
            {# Number input #}
            {% elif field_type in ['number', 'integer'] %}
            <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">
            
            {# Array - check if it's an array of objects first, then file upload widget #}
            {% elif field_type == 'array' %}
            {% set items_schema = prop.get('items') or {} %}
            {% set is_array_of_objects = items_schema.get('type') == 'object' and items_schema.get('properties') %}
            {% if is_array_of_objects %}
                {# Array of objects widget (like custom_feeds with name, url, enabled, logo) #}
                {% 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 []) %}
                
                <div class="array-of-objects-container mt-1">
                    <div id="{{ field_id }}_items" class="space-y-4">
                        {% for item in array_value %}
                        {% set item_index = loop.index0 %}
                        <div class="border border-gray-300 rounded-lg p-4 bg-gray-50 array-object-item" data-index="{{ item_index }}">
                            {% for prop_key, prop_schema in item_properties.items() %}
                            {% set prop_value = item.get(prop_key, prop_schema.get('default')) %}
                            {% set prop_label = prop_schema.get('title') or prop_key|replace('_', ' ')|title %}
                            {% set prop_description = prop_schema.get('description') or '' %}
                            {% set prop_full_key = full_key ~ '[' ~ item_index ~ '].' ~ prop_key %}
                            {% set prop_field_id = field_id ~ '_item_' ~ item_index ~ '_' ~ prop_key %}
                            
                            <div class="mb-3">
                                {% if prop_schema.get('x-widget') == 'file-upload' %}
                                    {# File upload widget for logo field #}
                                    {% set upload_config = prop_schema.get('x-upload-config') or {} %}
                                    {% set plugin_id_from_config = upload_config.get('plugin_id', plugin_id) %}
                                    {% set allowed_types = upload_config.get('allowed_types', ['image/png', 'image/jpeg', 'image/bmp']) %}
                                    
                                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ prop_label }}</label>
                                    {% if prop_description %}
                                    <p class="text-xs text-gray-500 mb-2">{{ prop_description }}</p>
                                    {% endif %}
                                    
                                    <div class="file-upload-widget-inline">
                                        <input type="file" 
                                               id="{{ prop_field_id }}_file" 
                                               accept="{{ allowed_types|join(',') }}"
                                               style="display: none;"
                                               onchange="if (typeof window.handleArrayObjectFileUpload === 'function') { window.handleArrayObjectFileUpload(event, '{{ field_id }}', {{ item_index }}, '{{ prop_key }}', '{{ plugin_id_from_config }}'); } else { console.error('handleArrayObjectFileUpload not available'); }">
                                        <button type="button" 
                                                onclick="document.getElementById('{{ prop_field_id }}_file').click()"
                                                class="px-3 py-2 text-sm bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-md transition-colors">
                                            <i class="fas fa-upload mr-1"></i> Upload Logo
                                        </button>
                                        
                                        {% if prop_value and prop_value.get('path') %}
                                        <div class="mt-2 flex items-center space-x-2" data-file-data='{{ prop_value|tojson|safe }}' data-prop-key="{{ prop_key }}">
                                            <img src="/{{ prop_value.get('path') }}" alt="Logo" class="w-16 h-16 object-cover rounded border">
                                            <button type="button" 
                                                    onclick="if (typeof window.removeArrayObjectFile === 'function') { window.removeArrayObjectFile('{{ field_id }}', {{ item_index }}, '{{ prop_key }}'); } else { console.error('removeArrayObjectFile not available'); }"
                                                    class="text-red-600 hover:text-red-800">
                                                <i class="fas fa-trash"></i> Remove
                                            </button>
                                        </div>
                                        {% endif %}
                                    </div>
                                {% elif prop_schema.get('type') == 'boolean' %}
                                    {# Boolean checkbox #}
                                    <label class="flex items-center">
                                        <input type="checkbox" 
                                               id="{{ prop_field_id }}"
                                               data-prop-key="{{ prop_key }}"
                                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                                               {% if prop_value %}checked{% endif %}
                                               onchange="if (typeof window.updateArrayObjectData === 'function') { window.updateArrayObjectData('{{ field_id }}'); }">
                                        <span class="ml-2 text-sm text-gray-700">{{ prop_label }}</span>
                                    </label>
                                {% else %}
                                    {# Regular text/string input #}
                                    <label for="{{ prop_field_id }}" class="block text-sm font-medium text-gray-700 mb-1">
                                        {{ prop_label }}
                                    </label>
                                    {% if prop_description %}
                                    <p class="text-xs text-gray-500 mb-1">{{ prop_description }}</p>
                                    {% endif %}
                                    <input type="text" 
                                           id="{{ prop_field_id }}"
                                           data-prop-key="{{ prop_key }}"
                                           class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white text-black"
                                           value="{{ prop_value if prop_value is not none else '' }}"
                                           placeholder="{% if prop_schema.get('format') == 'uri' %}https://example.com/feed{% endif %}"
                                           onchange="updateArrayObjectData('{{ field_id }}')">
                                {% endif %}
                            </div>
                            {% endfor %}
                            
                            <div class="flex justify-end mt-2">
                                <button type="button" 
                                        onclick="if (typeof window.removeArrayObjectItem === 'function') { window.removeArrayObjectItem('{{ field_id }}', {{ item_index }}); } else { console.error('removeArrayObjectItem not available'); }"
                                        class="px-3 py-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md transition-colors"
                                        title="Remove Feed">
                                    <i class="fas fa-trash mr-1"></i> Remove Feed
                                </button>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    
                    <button type="button" 
                            onclick="console.log('Button clicked, checking functions:', { addArrayObjectItem: typeof window.addArrayObjectItem, removeArrayObjectItem: typeof window.removeArrayObjectItem, updateArrayObjectData: typeof window.updateArrayObjectData }); if (typeof window.addArrayObjectItem === 'function') { window.addArrayObjectItem('{{ field_id }}', '{{ full_key }}', {{ max_items }}); } else { console.error('addArrayObjectItem not available. Available window functions:', Object.keys(window).filter(k => k.includes('Array'))); }"
                            class="mt-3 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors"
                            {% if array_value|length >= max_items %}disabled style="opacity: 0.5; cursor: not-allowed;"{% endif %}>
                        <i class="fas fa-plus mr-1"></i> Add Feed
                    </button>
                    
                    <input type="hidden" id="{{ field_id }}_data" name="{{ full_key }}_data" value='{{ array_value|tojson|safe }}'>
                </div>
            {% elif prop.get('x-widget') == 'file-upload' or prop.get('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 }}"
                         onclick="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 }}"
                               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', '') }}" 
                                         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>
                                        {% if has_schedule %}
                                        <p class="text-xs text-blue-600 mt-1">
                                            <i class="fas fa-clock mr-1"></i>Scheduled
                                        </p>
                                        {% endif %}
                                    </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">
                                        <i class="fas fa-calendar-alt"></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">
                                        <i class="fas fa-trash"></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 }}'>
                </div>
            {% else %}
                {# 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 %}
            
            {# Text input (default) #}
            {% else %}
            <input type="text" 
                   id="{{ field_id }}"
                   name="{{ full_key }}" 
                   value="{{ value if value is not none else (prop.default if prop.default is defined else '') }}"
                   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 %}
        </div>
    {% endif %}
{% 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 '' %}
    {% set nested_value = value if value else {} %}
    
    <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 %}
                    {% set nested_prop = prop.properties[nested_key] %}
                    {% set nested_val = nested_value[nested_key] if nested_key in nested_value else none %}
                    {{ render_field(nested_key, nested_prop, nested_val, full_key, plugin_id) }}
                {% 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">
                <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>
                <div class="space-y-4 max-h-96 overflow-y-auto pr-2">
                    {% 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 %}
                        {% for key in property_order %}
                            {% if key in schema.properties and key != 'enabled' %}
                                {% set prop = schema.properties[key] %}
                                {% set value = config[key] if key in config else none %}
                                {{ render_field(key, prop, value, '', plugin.id) }}
                            {% endif %}
                        {% endfor %}
                    {% 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">
                                    <label 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" 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" 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" 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 (if any) #}
        {% if web_ui_actions %}
        <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 web_ui_actions[0].section_description %}
            <p class="text-sm text-gray-600 mb-4">{{ web_ui_actions[0].section_description }}</p>
            {% endif %}
            <div class="space-y-3">
                {% for action in web_ui_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>