<!-- Scene Preset Editor Modal -->
<div id="scene-preset-editor-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="scene-preset-editor-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="scene-preset-editor-title"><svg class="icon" viewBox="0 0 24 24"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg> <span data-i18n="scenes.add">Capture Scene</span></h2>
            <button class="modal-close-btn" onclick="closeScenePresetEditor()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
        </div>
        <div class="modal-body">
            <form id="scene-preset-editor-form">
                <input type="hidden" id="scene-preset-editor-id">

                <div class="form-group">
                    <div class="label-row">
                        <label for="scene-preset-editor-name" data-i18n="scenes.name">Name:</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="scenes.name.hint">A descriptive name for this scene preset</small>
                    <input type="text" id="scene-preset-editor-name" data-i18n-placeholder="scenes.name.placeholder" placeholder="My Scene" required>
                    <div id="scene-tags-container"></div>
                </div>

                <div class="form-group">
                    <div class="label-row">
                        <label for="scene-preset-editor-description" data-i18n="scenes.description">Description:</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="scenes.description.hint">Optional description of what this scene does</small>
                    <input type="text" id="scene-preset-editor-description">
                </div>

                <div class="form-group" id="scene-target-selector-group" style="display:none">
                    <div class="label-row">
                        <label data-i18n="scenes.targets">Targets:</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="scenes.targets.hint">Select which targets to include in this scene snapshot</small>
                    <div id="scene-target-list" class="scene-target-list"></div>
                    <button type="button" id="scene-target-add-btn" class="btn btn-sm btn-secondary" onclick="addSceneTarget()" style="margin-top: 6px;">+ <span data-i18n="scenes.targets.add">Add Target</span></button>
                </div>

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