<!-- Target Editor Modal (name, device, segments, settings) -->
<div id="target-editor-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="target-editor-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="target-editor-title"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg> <span data-i18n="targets.add">Add Target</span></h2>
            <button class="modal-close-btn" onclick="closeTargetEditorModal()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
        </div>
        <div class="modal-body">
            <form id="target-editor-form">
                <input type="hidden" id="target-editor-id">

                <div class="form-group">
                    <label for="target-editor-name" data-i18n="targets.name">Target Name:</label>
                    <input type="text" id="target-editor-name" data-i18n-placeholder="targets.name.placeholder" placeholder="My Target" required>
                    <div id="target-tags-container"></div>
                </div>

                <div class="form-group">
                    <div class="label-row">
                        <label for="target-editor-device" data-i18n="targets.device">Device:</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="targets.device.hint">Select the LED device to send data to</small>
                    <select id="target-editor-device"></select>
                    <small id="target-editor-device-info" class="device-led-info" style="display:none"></small>
                </div>

                <div class="form-group">
                    <div class="label-row">
                        <label for="target-editor-css-source" data-i18n="targets.color_strip_source">Color Strip Source:</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="targets.color_strip_source.hint">Select the color strip source that provides LED colors for this target</small>
                    <select id="target-editor-css-source"></select>
                </div>

                <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="target-editor-brightness-container"></div>
                </div>

                <div class="form-group" id="target-editor-fps-group">
                    <div class="label-row">
                        <label>
                            <span data-i18n="targets.fps">Target FPS:</span>
                        </label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="targets.fps.hint">How many frames per second to send to the device (1-90). Higher values give smoother animations but use more bandwidth.</small>
                    <div id="target-editor-fps-container"></div>
                    <small id="target-editor-fps-rec" class="input-hint" style="display:none"></small>
                </div>

                <details class="form-collapse" id="target-editor-advanced-settings">
                    <summary data-i18n="targets.section.advanced">Advanced</summary>
                    <div class="form-collapse-body">
                        <div class="form-group" id="target-editor-brightness-threshold-group">
                            <div class="label-row">
                                <label>
                                    <span data-i18n="targets.min_brightness_threshold">Min Brightness Threshold:</span>
                                </label>
                                <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                            </div>
                            <small class="input-hint" style="display:none" data-i18n="targets.min_brightness_threshold.hint">Effective output brightness (pixel brightness × device/source brightness) below this value turns LEDs off completely (0 = disabled)</small>
                            <div id="target-editor-brightness-threshold-container"></div>
                        </div>

                        <div class="form-group" id="target-editor-adaptive-fps-group">
                            <div class="label-row">
                                <label for="target-editor-adaptive-fps" data-i18n="targets.adaptive_fps">Adaptive FPS:</label>
                                <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                            </div>
                            <small class="input-hint" style="display:none" data-i18n="targets.adaptive_fps.hint">Automatically reduce send rate when the device becomes unresponsive, and gradually recover when it stabilizes. Recommended for WiFi devices with weak signal.</small>
                            <label class="settings-toggle">
                                <input type="checkbox" id="target-editor-adaptive-fps">
                                <span class="settings-toggle-slider"></span>
                            </label>
                        </div>

                        <div class="form-group" id="target-editor-protocol-group">
                            <div class="label-row">
                                <label for="target-editor-protocol" data-i18n="targets.protocol">Protocol:</label>
                                <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                            </div>
                            <small class="input-hint" style="display:none" data-i18n="targets.protocol.hint">DDP sends pixels via fast UDP (recommended). HTTP uses the JSON API — slower but reliable, limited to ~500 LEDs.</small>
                            <select id="target-editor-protocol">
                                <option value="ddp">DDP (UDP)</option>
                                <option value="http">HTTP</option>
                            </select>
                        </div>

                        <div class="form-group" id="target-editor-keepalive-group">
                            <div class="label-row">
                                <label for="target-editor-keepalive-interval">
                                    <span data-i18n="targets.keepalive_interval">Keep Alive Interval:</span>
                                    <span id="target-editor-keepalive-interval-value">1.0</span><span>s</span>
                                </label>
                                <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                            </div>
                            <small class="input-hint" style="display:none" data-i18n="targets.keepalive_interval.hint">How often to resend the last frame when the screen is static, to keep the device in live mode (0.5-5.0s)</small>
                            <input type="range" id="target-editor-keepalive-interval" min="0.5" max="5.0" step="0.5" value="1.0" oninput="document.getElementById('target-editor-keepalive-interval-value').textContent = this.value">
                        </div>
                    </div>
                </details>

                <div id="target-editor-error" class="error-message" style="display: none;"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-icon btn-secondary" onclick="closeTargetEditorModal()" title="Cancel" data-i18n-aria-label="aria.cancel">&#x2715;</button>
            <button class="btn btn-icon btn-primary" onclick="saveTargetEditor()" title="Save" data-i18n-aria-label="aria.save">&#x2713;</button>
        </div>
    </div>
</div>
