<!-- Test Value Source Modal -->
<div id="test-value-source-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="test-value-source-modal-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="test-value-source-modal-title" data-i18n="value_source.test.title">Test Value Source</h2>
            <button class="modal-close-btn" onclick="closeTestValueSourceModal()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
        </div>
        <div class="modal-body">
            <canvas id="vs-test-canvas" class="vs-test-canvas"></canvas>
            <div id="vs-test-color-swatch" class="vs-test-color-swatch" style="display:none">
                <canvas id="vs-test-color-canvas" class="vs-test-color-canvas"></canvas>
            </div>
            <div class="vs-test-stats">
                <span class="vs-test-stat vs-test-stat-current">
                    <span class="vs-test-stat-label" data-i18n="value_source.test.current">Current</span>
                    <span class="vs-test-stat-value vs-test-value-large" id="vs-test-current">---</span>
                </span>
                <span class="vs-test-stat">
                    <span class="vs-test-stat-label" data-i18n="value_source.test.min">Min</span>
                    <span class="vs-test-stat-value" id="vs-test-min">---</span>
                </span>
                <span class="vs-test-stat">
                    <span class="vs-test-stat-label" data-i18n="value_source.test.max">Max</span>
                    <span class="vs-test-stat-value" id="vs-test-max">---</span>
                </span>
            </div>
            <div id="vs-test-status" class="vs-test-status" data-i18n="value_source.test.connecting">Connecting...</div>
        </div>
    </div>
</div>
