<!-- Z2M Light Target Editor Modal — mirrors ha-light-editor.html section
     vocabulary and chrome (rack-panel layout with channel-coloured indices):
       Identity   (signal) — name + description + tags
       Routing    (cyan)   — base topic + colour source + bulb mappings
       Output     (amber)  — update rate + transition + brightness + stop action
       Filtering  (violet) — colour tolerance + min brightness threshold
     All numeric fields use BindableScalarWidget, the stop-action select is
     upgraded by IconSelect, and the colour source select is wrapped by
     EntitySelect — same widget treatment as the HA-light editor. -->
<div id="z2m-light-editor-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="z2m-light-editor-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="z2m-light-editor-title" data-i18n="z2m_light.add">Add Z2M Light Target</h2>
            <button class="modal-close-btn" onclick="closeZ2MLightEditor()" data-i18n-aria-label="aria.close">&#x2715;</button>
        </div>
        <div class="modal-body">
            <form id="z2m-light-editor-form" onsubmit="return false;">
                <input type="hidden" id="z2m-light-editor-id">

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

                <!-- ── 01 · IDENTITY ───────────────────────────────── -->
                <section class="ds-section" data-ds-key="identity" data-ch="signal">
                    <div class="ds-section-header">
                        <span class="ds-section-dot" aria-hidden="true"></span>
                        <span class="ds-section-title" data-i18n="settings.section.identity">Identity</span>
                        <span class="ds-section-index" aria-hidden="true">01</span>
                    </div>
                    <div class="ds-section-body">
                        <div class="form-group ds-name-group">
                            <label for="z2m-light-editor-name" data-i18n="z2m_light.name">Name:</label>
                            <input type="text" id="z2m-light-editor-name" data-i18n-placeholder="z2m_light.name.placeholder" placeholder="Living Room Bulbs" required>
                            <div id="z2m-light-tags-container"></div>
                        </div>

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

                <!-- ── 02 · ROUTING ────────────────────────────────── -->
                <section class="ds-section" data-ds-key="routing" data-ch="cyan">
                    <div class="ds-section-header">
                        <span class="ds-section-dot" aria-hidden="true"></span>
                        <span class="ds-section-title" data-i18n="settings.section.routing">Routing</span>
                        <span class="ds-section-index" aria-hidden="true">02</span>
                    </div>
                    <div class="ds-section-body">
                        <div class="form-group">
                            <div class="label-row">
                                <label for="z2m-light-editor-mqtt-source" data-i18n="z2m_light.mqtt_source">MQTT Broker:</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="z2m_light.mqtt_source.hint">Pick the MQTT source (broker) that Zigbee2MQTT is connected to. Manage brokers under MQTT Sources.</small>
                            <select id="z2m-light-editor-mqtt-source"></select>
                        </div>

                        <div class="form-group">
                            <div class="label-row">
                                <label for="z2m-light-editor-base-topic" data-i18n="z2m_light.base_topic">Z2M Base Topic:</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="z2m_light.base_topic.hint">Override only if your Zigbee2MQTT instance uses a non-default mqtt.base_topic.</small>
                            <input type="text" id="z2m-light-editor-base-topic" placeholder="zigbee2mqtt" value="zigbee2mqtt">
                        </div>

                        <div class="form-group">
                            <div class="label-row">
                                <label for="z2m-light-editor-color-source" data-i18n="z2m_light.color_source">Color Source:</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="z2m_light.color_source.hint">Pick a Color Strip Source (per-bulb LED ranges) or a Color Value Source (one colour broadcast to every bulb).</small>
                            <select id="z2m-light-editor-color-source"></select>
                        </div>

                        <div class="form-group">
                            <div class="label-row">
                                <label data-i18n="z2m_light.mappings">Bulb 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="z2m_light.mappings.hint">Map LED ranges to Z2M friendly names. Each mapping averages the LED segment to a single colour.</small>
                            <small id="z2m-light-mappings-mode-hint" class="input-hint" style="display:none" data-i18n="z2m_light.mappings.color_vs_hint">All listed bulbs will receive the same colour from the selected Color Value Source.</small>
                            <div id="z2m-light-mappings-list"></div>
                            <button type="button" class="ha-mapping-add-slot" onclick="addZ2MLightMapping()"><span data-i18n="z2m_light.mappings.add">Add Mapping</span></button>
                        </div>
                    </div>
                </section>

                <!-- ── 03 · OUTPUT ─────────────────────────────────── -->
                <section class="ds-section" data-ds-key="output" data-ch="amber">
                    <div class="ds-section-header">
                        <span class="ds-section-dot" aria-hidden="true"></span>
                        <span class="ds-section-title" data-i18n="settings.section.output">Output</span>
                        <span class="ds-section-index" aria-hidden="true">03</span>
                    </div>
                    <div class="ds-section-body">
                        <div class="form-group">
                            <div class="label-row">
                                <label>
                                    <span data-i18n="z2m_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="z2m_light.update_rate.hint">How often to publish colour updates to Z2M (0.5–10 Hz). Zigbee mesh tolerates ~5–10 Hz per bulb; higher values risk drops.</small>
                            <div id="z2m-light-editor-update-rate-container"></div>
                        </div>

                        <div class="form-group">
                            <div class="label-row">
                                <label>
                                    <span data-i18n="z2m_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="z2m_light.transition.hint">Smooth fade duration between colours, in seconds (Z2M transition parameter).</small>
                            <div id="z2m-light-editor-transition-container"></div>
                        </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="z2m-light-editor-brightness-container"></div>
                        </div>

                        <div class="form-group">
                            <div class="label-row">
                                <label for="z2m-light-editor-stop-action" data-i18n="z2m_light.stop_action">On Stop:</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="z2m_light.stop_action.hint">What to do with the mapped bulbs when this target stops streaming.</small>
                            <select id="z2m-light-editor-stop-action"></select>
                        </div>
                    </div>
                </section>

                <!-- ── 04 · FILTERING ──────────────────────────────── -->
                <section class="ds-section" data-ds-key="filtering" data-ch="violet">
                    <div class="ds-section-header">
                        <span class="ds-section-dot" aria-hidden="true"></span>
                        <span class="ds-section-title" data-i18n="settings.section.filtering">Filtering</span>
                        <span class="ds-section-index" aria-hidden="true">04</span>
                    </div>
                    <div class="ds-section-body">
                        <div class="form-group">
                            <div class="label-row">
                                <label>
                                    <span data-i18n="z2m_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="z2m_light.color_tolerance.hint">Skip publishes when the RGB delta is below this threshold. Reduces Zigbee mesh traffic for near-static scenes.</small>
                            <div id="z2m-light-editor-color-tolerance-container"></div>
                        </div>

                        <div class="form-group">
                            <div class="label-row">
                                <label>
                                    <span data-i18n="z2m_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="z2m_light.min_brightness_threshold.hint">Effective output brightness below this value turns bulbs off completely (0 = disabled).</small>
                            <div id="z2m-light-editor-min-brightness-threshold-container"></div>
                        </div>
                    </div>
                </section>

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