<!-- Pair Device Modal — reusable handshake UI for drivers that require a
     physical pairing action on the device (Nanoleaf, Tuya, Twinkly, …).

     The runtime controller (`features/pairing-flow.ts`) populates the
     instructions text, drives state transitions (idle → pairing → success
     | not_ready | failed), and resolves a Promise with the provider-returned
     fields. State blocks are toggled via the `[data-pair-state]` attribute
     on `.pair-states`; only the active block is visible. -->
<div id="pair-device-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="pair-device-modal-title">
    <div class="modal-content" style="max-width: 480px;">
        <div class="modal-header">
            <h2 id="pair-device-modal-title">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12h6"/><path d="M12 9v6"/><circle cx="12" cy="12" r="9"/></svg>
                <span data-i18n="pairing.title">Pair Device</span>
            </h2>
            <button class="modal-close-btn" id="pair-device-close-btn" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
        </div>
        <div class="modal-body">
            <p id="pair-device-instructions" class="pair-instructions" data-i18n="pairing.instructions.default">
                Press and hold the pairing button on your device, then click Start. Devices typically open a 30-second pairing window — be ready to act quickly.
            </p>

            <div class="pair-states" data-pair-state="idle">

                <!-- ── IDLE ────────────────────────────────────────── -->
                <div class="pair-state pair-state-idle" data-pair-state-block="idle">
                    <div class="pair-visual pair-visual-idle" aria-hidden="true">
                        <span class="pair-pulse"></span>
                        <svg class="icon pair-visual-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14M16.24 7.76a6 6 0 0 1 0 8.48M7.76 7.76a6 6 0 0 0 0 8.48"/></svg>
                    </div>
                    <button type="button" class="btn btn-primary pair-action" id="pair-start-btn" data-i18n="pairing.start">
                        Start pairing
                    </button>
                </div>

                <!-- ── PAIRING (progress ring + countdown) ─────────── -->
                <div class="pair-state pair-state-pairing" data-pair-state-block="pairing" style="display: none;">
                    <div class="pair-ring-wrap" role="status" aria-live="polite">
                        <svg class="pair-ring" viewBox="0 0 100 100" aria-hidden="true">
                            <circle class="pair-ring-bg" cx="50" cy="50" r="44" fill="none" stroke-width="4"/>
                            <circle class="pair-ring-fg" cx="50" cy="50" r="44" fill="none" stroke-width="4" stroke-linecap="round" pathLength="100"/>
                        </svg>
                        <div class="pair-ring-content">
                            <div class="pair-ring-count" id="pair-countdown">30</div>
                            <div class="pair-ring-label" data-i18n="pairing.pairing">Pairing…</div>
                        </div>
                    </div>
                </div>

                <!-- ── NOT READY (409 retryable) ───────────────────── -->
                <div class="pair-state pair-state-notready" data-pair-state-block="notready" style="display: none;">
                    <div class="pair-status pair-status-warn">
                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
                        <span data-i18n="pairing.not_ready">Device didn't respond. Press the pairing button on your device, then try again.</span>
                    </div>
                    <button type="button" class="btn btn-primary pair-action" id="pair-retry-btn" data-i18n="pairing.retry">
                        Try again
                    </button>
                </div>

                <!-- ── SUCCESS (brief confirmation) ────────────────── -->
                <div class="pair-state pair-state-success" data-pair-state-block="success" style="display: none;">
                    <div class="pair-status pair-status-ok">
                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                        <span data-i18n="pairing.success">Paired successfully</span>
                    </div>
                </div>

                <!-- ── FAILED (terminal) ───────────────────────────── -->
                <div class="pair-state pair-state-failed" data-pair-state-block="failed" style="display: none;">
                    <div class="pair-status pair-status-err">
                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                        <span id="pair-failure-detail" data-i18n="pairing.failed">Pairing failed.</span>
                    </div>
                    <button type="button" class="btn btn-secondary pair-action" id="pair-close-btn" data-i18n="pairing.close">
                        Close
                    </button>
                </div>

            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-icon btn-secondary" id="pair-cancel-btn" title="Cancel" data-i18n-aria-label="aria.cancel">&#x2715;</button>
        </div>
    </div>
</div>
