<!-- Setup Required Modal — sectioned rack-panel; three numbered steps
     map to three rack panels (signal/cyan/amber). -->
<div id="setup-required-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="setup-required-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="setup-required-title">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12"/><circle cx="17" cy="7" r="5"/></svg>
                <span data-i18n="setup.title">Server setup required</span>
            </h2>
        </div>
        <div class="modal-body">
            <p class="modal-description" data-i18n="setup.description">
                This LedGrab server has no API keys configured, so access from other devices on the network is disabled for security. Configure a key on the machine running the server to enable LAN access.
            </p>

            <!-- ── 01 · CONFIGURE ──────────────────────────────── -->
            <section class="ds-section" data-ds-key="configure" 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.configure">Configure</span>
                    <span class="ds-section-index" aria-hidden="true">01</span>
                </div>
                <div class="ds-section-body">
                    <div class="form-group">
                        <label data-i18n="setup.step1_label">1. On the server machine, edit <code>config/default_config.yaml</code>:</label>
                        <div class="code-snippet-wrapper">
                            <pre id="setup-yaml-snippet" class="code-snippet"><code>auth:
  api_keys:
    dev: "REPLACE_WITH_A_LONG_RANDOM_SECRET"</code></pre>
                            <button type="button" class="btn btn-icon btn-secondary copy-btn" onclick="copySetupSnippet()" data-i18n-title="setup.copy" title="Copy">
                                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                            </button>
                        </div>
                        <small class="input-hint" data-i18n="setup.hint_openssl">
                            Generate a strong key on Linux/macOS with <code>openssl rand -hex 32</code>, or on Windows PowerShell with <code>[guid]::NewGuid().ToString('N') + [guid]::NewGuid().ToString('N')</code>.
                        </small>
                    </div>
                </div>
            </section>

            <!-- ── 02 · RESTART ────────────────────────────────── -->
            <section class="ds-section" data-ds-key="restart" 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.restart">Restart</span>
                    <span class="ds-section-index" aria-hidden="true">02</span>
                </div>
                <div class="ds-section-body">
                    <div class="form-group">
                        <label data-i18n="setup.step2_label">2. Restart the server, then reload this page and log in with that key.</label>
                    </div>
                </div>
            </section>

            <!-- ── 03 · LOOPBACK ───────────────────────────────── -->
            <section class="ds-section" data-ds-key="loopback" 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.loopback">Loopback</span>
                    <span class="ds-section-index" aria-hidden="true">03</span>
                </div>
                <div class="ds-section-body">
                    <div class="form-group">
                        <label data-i18n="setup.step3_label">Alternative: open LedGrab from the server machine itself (loopback), no key required:</label>
                        <div class="code-snippet-wrapper">
                            <a id="setup-loopback-link" class="btn btn-secondary" href="http://localhost:8080" target="_blank" rel="noopener">http://localhost:8080</a>
                        </div>
                    </div>
                </div>
            </section>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-icon btn-secondary" onclick="retrySetupCheck()" data-i18n-title="setup.retry" title="Retry">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg>
            </button>
        </div>
    </div>
</div>
