<!-- Game Integration Editor Modal — sectioned rack-panel layout matching
     the settings-modal-redesign vocabulary. The four channels read as a
     pipeline:
       Identity    (signal) — name + description + tags + enabled switch
       Adapter     (cyan)   — adapter type + auto-generated config + setup buttons
       Mappings    (amber)  — event→effect mapping list + preset loader
       Diagnostics (violet) — live event feed + connection test panel
     The Enabled checkbox is upgraded to a .ds-toggle-row recessed switch.
     All inner element IDs preserved for game-integration.ts compatibility. -->
<div id="game-integration-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="gi-title">
    <div class="modal-content modal-lg">
        <div class="modal-header">
            <h2 id="gi-title" data-i18n="game_integration.add">Add Game Integration</h2>
            <button class="modal-close-btn" onclick="closeGameIntegrationModal()" data-i18n-aria-label="aria.close">&times;</button>
        </div>
        <div class="modal-body">
            <input type="hidden" id="gi-id">
            <div id="gi-error" class="modal-error" 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="gi-name" data-i18n="game_integration.name">Name:</label>
                        <input type="text" id="gi-name" required>
                        <div id="gi-tags-container"></div>
                    </div>

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

                    <div class="ds-toggle-row">
                        <div class="ds-toggle-text">
                            <div class="label-row">
                                <label for="gi-enabled" data-i18n="game_integration.enabled">Enabled</label>
                            </div>
                            <small class="input-hint" style="display:none" data-i18n="game_integration.enabled.hint">Disabled integrations stop polling and emitting events</small>
                        </div>
                        <label class="settings-toggle">
                            <input type="checkbox" id="gi-enabled" checked>
                            <span class="settings-toggle-slider"></span>
                        </label>
                    </div>
                </div>
            </section>

            <!-- ── 02 · ADAPTER ────────────────────────────────── -->
            <section class="ds-section" data-ds-key="adapter" 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.adapter">Adapter</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="gi-adapter-type" data-i18n="game_integration.adapter_type">Game / Adapter:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="game_integration.adapter_type.hint">Select the game or adapter type for this integration</small>
                        <select id="gi-adapter-type"></select>
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label data-i18n="game_integration.adapter_config">Adapter Configuration</label>
                        </div>
                        <div id="gi-adapter-config-fields"></div>
                    </div>

                    <div id="gi-setup-instructions-btn-wrapper" style="display:none">
                        <button type="button" class="btn btn-secondary btn-sm" onclick="openSetupInstructions()" data-i18n="game_integration.setup_instructions">Setup Instructions</button>
                        <button type="button" id="gi-auto-setup-btn" class="btn btn-primary btn-sm" onclick="autoSetupGameIntegration()" style="display:none" data-i18n="game_integration.auto_setup">Auto Setup</button>
                    </div>
                </div>
            </section>

            <!-- ── 03 · MAPPINGS ───────────────────────────────── -->
            <section class="ds-section" data-ds-key="mappings" 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.mappings">Mappings</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 data-i18n="game_integration.event_mappings">Event Mappings</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="game_integration.event_mappings.hint">Map game events to LED effects. Each event type can trigger a different visual effect.</small>

                        <div class="gi-mapping-toolbar">
                            <select id="gi-mapping-preset" onchange="onMappingPresetChange()">
                                <option value="" data-i18n="game_integration.preset.select">Load preset...</option>
                                <option value="fps_combat" data-i18n="game_integration.preset.fps_combat">FPS Combat</option>
                                <option value="moba_health" data-i18n="game_integration.preset.moba_health">MOBA Health</option>
                            </select>
                            <button class="btn btn-secondary btn-sm" onclick="addGameMapping()" data-i18n="game_integration.mapping.add">+ Add Mapping</button>
                        </div>
                        <div id="gi-mappings-list" class="gi-mappings-list"></div>
                    </div>
                </div>
            </section>

            <!-- ── 04 · DIAGNOSTICS ────────────────────────────── -->
            <section class="ds-section" data-ds-key="diagnostics" 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.diagnostics">Diagnostics</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 data-i18n="game_integration.events.title">Live Events</label>
                        </div>
                        <div id="gi-event-feed" class="gi-event-feed"></div>
                    </div>

                    <div class="form-group">
                        <button class="btn btn-secondary" onclick="testGameConnection()" data-i18n="game_integration.test.button">Test Connection</button>
                        <div id="gi-test-panel" style="display:none" class="gi-test-panel"></div>
                    </div>
                </div>
            </section>

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

<!-- Setup Instructions Overlay (full-screen, same pattern as release notes) -->
<div id="gi-setup-overlay" class="log-overlay" style="display:none;">
    <button class="log-overlay-close" onclick="closeSetupInstructions()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
    <div class="log-overlay-toolbar">
        <h3 id="gi-setup-overlay-title" data-i18n="game_integration.setup_instructions">Setup Instructions</h3>
    </div>
    <div id="gi-setup-overlay-content" class="release-notes-content"></div>
</div>
