<!-- HA Light Target Editor Modal -->
<div id="ha-light-editor-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="ha-light-editor-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="ha-light-editor-title" data-i18n="ha_light.add">Add HA Light Target</h2>
            <button class="modal-close-btn" onclick="closeHALightEditor()" data-i18n-aria-label="aria.close">&#x2715;</button>
        </div>
        <div class="modal-body">
            <form id="ha-light-editor-form" onsubmit="return false;">
                <input type="hidden" id="ha-light-editor-id">

                <div id="ha-light-editor-error" class="error-message" style="display: none;"></div>

                <!-- Name -->
                <div class="form-group">
                    <div class="label-row">
                        <label for="ha-light-editor-name" data-i18n="ha_light.name">Name:</label>
                    </div>
                    <input type="text" id="ha-light-editor-name" data-i18n-placeholder="ha_light.name.placeholder" placeholder="Living Room Lights" required>
                    <div id="ha-light-tags-container"></div>
                </div>

                <!-- HA Source -->
                <div class="form-group">
                    <div class="label-row">
                        <label for="ha-light-editor-ha-source" data-i18n="ha_light.ha_source">HA Connection:</label>
                    </div>
                    <select id="ha-light-editor-ha-source"></select>
                </div>

                <!-- CSS Source -->
                <div class="form-group">
                    <div class="label-row">
                        <label for="ha-light-editor-css-source" data-i18n="ha_light.css_source">Color Strip Source:</label>
                    </div>
                    <select id="ha-light-editor-css-source"></select>
                </div>

                <!-- Update Rate -->
                <div class="form-group">
                    <div class="label-row">
                        <label>
                            <span data-i18n="ha_light.update_rate">Update Rate:</span>
                        </label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="ha_light.update_rate.hint">How often to send color updates to HA lights (0.5-5.0 Hz). Lower values are safer for HA performance.</small>
                    <div id="ha-light-editor-update-rate-container"></div>
                </div>

                <!-- Transition -->
                <div class="form-group">
                    <div class="label-row">
                        <label>
                            <span data-i18n="ha_light.transition">Transition:</span>
                        </label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="ha_light.transition.hint">Smooth fade duration between colors (HA transition parameter). Higher values give smoother but slower transitions.</small>
                    <div id="ha-light-editor-transition-container"></div>
                </div>

                <!-- Brightness -->
                <div class="form-group">
                    <div class="label-row">
                        <label data-i18n="targets.brightness">Brightness:</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="targets.brightness.hint">Output brightness multiplier (0–1). Can be bound to a value source for dynamic control.</small>
                    <div id="ha-light-editor-brightness-container"></div>
                </div>

                <!-- Color Tolerance -->
                <div class="form-group">
                    <div class="label-row">
                        <label>
                            <span data-i18n="ha_light.color_tolerance">Color Tolerance:</span>
                        </label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="ha_light.color_tolerance.hint">Skip sending color updates when the RGB delta is below this threshold. Reduces HA traffic for near-static scenes.</small>
                    <div id="ha-light-editor-color-tolerance-container"></div>
                </div>

                <!-- Min Brightness Threshold -->
                <div class="form-group">
                    <div class="label-row">
                        <label>
                            <span data-i18n="ha_light.min_brightness_threshold">Min Brightness Threshold:</span>
                        </label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="ha_light.min_brightness_threshold.hint">Effective output brightness below this value turns lights off completely (0 = disabled)</small>
                    <div id="ha-light-editor-min-brightness-threshold-container"></div>
                </div>

                <!-- Light Mappings -->
                <div class="form-group">
                    <div class="label-row">
                        <label data-i18n="ha_light.mappings">Light Mappings:</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="ha_light.mappings.hint">Map LED ranges to HA light entities. Each mapping averages the LED segment to a single color.</small>
                    <div id="ha-light-mappings-list"></div>
                    <button type="button" class="btn btn-sm btn-secondary" onclick="addHALightMapping()" style="margin-top: 4px;">
                        + <span data-i18n="ha_light.mappings.add">Add Mapping</span>
                    </button>
                </div>

                <!-- Description -->
                <div class="form-group">
                    <div class="label-row">
                        <label for="ha-light-editor-description" data-i18n="ha_light.description">Description (optional):</label>
                    </div>
                    <input type="text" id="ha-light-editor-description" placeholder="">
                </div>

            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-icon btn-secondary" onclick="closeHALightEditor()" title="Cancel" data-i18n-title="settings.button.cancel" data-i18n-aria-label="aria.cancel">&#x2715;</button>
            <button class="btn btn-icon btn-primary" onclick="saveHALightEditor()" title="Save" data-i18n-title="settings.button.save" data-i18n-aria-label="aria.save">&#x2713;</button>
        </div>
    </div>
</div>
