<!-- Test Color Strip Source Modal -->
<div id="test-css-source-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="test-css-source-modal-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="test-css-source-modal-title" data-i18n="color_strip.test.title">Test Preview</h2>
            <button class="modal-close-btn" onclick="closeTestCssSourceModal()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
        </div>
        <div class="modal-body">
            <!-- Strip view (for generic sources) -->
            <div id="css-test-strip-view" class="css-test-strip-wrap">
                <canvas id="css-test-strip-canvas" class="css-test-strip-canvas"></canvas>
                <canvas id="css-test-strip-axis" class="css-test-strip-axis"></canvas>
                <button id="css-test-fire-btn" class="css-test-fire-btn" style="display:none"
                        onclick="fireCssTestNotification()"
                        data-i18n-title="color_strip.notification.test"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/><path d="M4 2C2.8 3.7 2 5.7 2 8"/><path d="M22 8c0-2.3-.8-4.3-2-6"/></svg></button>
            </div>

            <!-- Rectangle view (for picture sources) -->
            <div id="css-test-rect-view" style="display:none">
                <div class="css-test-rect-outer">
                    <canvas id="css-test-rect-ticks" class="css-test-rect-ticks"></canvas>
                    <div class="css-test-rect" id="css-test-rect">
                        <div class="css-test-rect-corner"></div>
                        <div class="css-test-edge-wrap"><canvas id="css-test-edge-top" class="css-test-edge"></canvas></div>
                        <div class="css-test-rect-corner"></div>

                        <div class="css-test-edge-wrap"><canvas id="css-test-edge-left" class="css-test-edge"></canvas></div>
                        <div id="css-test-rect-screen" class="css-test-rect-screen">
                            <span id="css-test-rect-name" class="css-test-rect-label"></span>
                            <span id="css-test-rect-leds" class="css-test-rect-label css-test-rect-leds"></span>
                        </div>
                        <div class="css-test-edge-wrap"><canvas id="css-test-edge-right" class="css-test-edge"></canvas></div>

                        <div class="css-test-rect-corner"></div>
                        <div class="css-test-edge-wrap"><canvas id="css-test-edge-bottom" class="css-test-edge"></canvas></div>
                        <div class="css-test-rect-corner"></div>
                    </div>
                </div>
            </div>

            <!-- Composite layers view -->
            <div id="css-test-layers-view" style="display:none">
                <div id="css-test-layers" class="css-test-layers"></div>
                <canvas id="css-test-layers-axis" class="css-test-strip-axis"></canvas>
            </div>

            <!-- CSPT test: input source selector (hidden by default) -->
            <div id="css-test-cspt-input-group" style="display:none" class="css-test-led-control">
                <label for="css-test-cspt-input-select" data-i18n="color_strip.processed.input">Source:</label>
                <select id="css-test-cspt-input-select" class="css-test-cspt-select" onchange="applyCssTestSettings()"></select>
            </div>

            <!-- LED count & FPS controls -->
            <div id="css-test-led-fps-group" class="css-test-led-control">
                <span id="css-test-led-group">
                    <label for="css-test-led-input" data-i18n="color_strip.test.led_count">LEDs:</label>
                    <input type="number" id="css-test-led-input" min="1" max="2000" step="1" value="100" class="css-test-led-input">
                    <span class="css-test-separator"></span>
                </span>
                <label for="css-test-fps-input" data-i18n="color_strip.test.fps">FPS:</label>
                <input type="number" id="css-test-fps-input" min="1" max="60" step="1" value="20" class="css-test-led-input">
                <button class="btn btn-icon btn-sm btn-secondary css-test-led-apply" onclick="applyCssTestSettings()" title="Apply" data-i18n-title="color_strip.test.apply">&#x2713;</button>
            </div>

            <!-- FPS chart (for api_input sources) — matches target card sparkline -->
            <div id="css-test-fps-chart-group" class="target-fps-row" style="display:none">
                <div class="target-fps-sparkline">
                    <canvas id="css-test-fps-chart"></canvas>
                </div>
                <div class="target-fps-label">
                    <span id="css-test-fps-value" class="metric-value">0</span>
                    <span class="target-fps-avg" id="css-test-fps-avg"></span>
                </div>
            </div>

            <div id="css-test-status" class="css-test-status" data-i18n="color_strip.test.connecting">Connecting...</div>
        </div>
    </div>
</div>
