{# Shared "Pair a phone" panel. Caller passes scan_modes (all permitted modes),
   optionally scan_modes_checked (the subset to pre-check; defaults to all), and
   csrf_token. #}
{% if scan_modes %}
{% set checked_modes = scan_modes_checked if scan_modes_checked is defined else scan_modes %}
<article class="scan-pair-article">
  <header><strong>Pair a phone</strong></header>
  <p>Generate a QR code to pair a phone as a wireless barcode scanner for this session.</p>
  <form hx-post="/ui/scan/pairings"
        hx-target="#scan-pair-result"
        hx-swap="innerHTML"
        hx-include="#scan-pair-form-fields">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div class="scan-pair-modes" id="scan-pair-form-fields">
      {% for m in scan_modes %}
      <label>
        <input type="checkbox" name="{{ m }}" value="on"{% if m in checked_modes %} checked{% endif %}>
        {{ m }}
      </label>
      {% endfor %}
    </div>
    <button type="submit">Generate pairing QR</button>
  </form>
  <div id="scan-pair-result"></div>
</article>
{% endif %}