<h1>Connect GitHub</h1>

<div class="card" style="max-width:520px">
  <p>1. Open GitHub and enter this code:</p>
  <div class="device-code" id="device-code"><%= userCode %></div>
  <div class="actions" style="margin:14px 0">
    <a class="btn primary" href="<%= verificationUri %>" target="_blank" rel="noopener">Open github.com/login/device</a>
    <button class="btn" type="button" data-copy="<%= userCode %>" onclick="copyText(this)">Copy code</button>
  </div>
  <p class="muted" id="device-status">2. Waiting for authorization… this page finishes automatically.</p>
</div>

<script>
(function () {
  var done = false;
  function poll() {
    if (done) return;
    fetch('/auth/github/poll?id=<%= pollId %>').then(function (r) { return r.json(); }).then(function (d) {
      if (d.done) {
        done = true;
        document.getElementById('device-status').textContent = 'Connected! Redirecting…';
        location.href = '/settings/git?msg=' + encodeURIComponent('GitHub connected');
      } else if (d.error) {
        done = true;
        document.getElementById('device-status').textContent = 'Failed: ' + d.error;
      }
    }).catch(function () { /* keep polling */ });
  }
  setInterval(poll, <%= Math.max(interval, 5) * 1000 %>);
})();
</script>
