{% extends "lanexam/base.html" %}
{% block title %}Join an exam{% endblock %}
{% block content %}
<div class="card" style="max-width:440px;margin:50px auto;text-align:center">
  <h1>Join your exam</h1>
  <p class="muted">Type the code your invigilator read out.</p>
  <div class="field" style="margin-top:20px">
    <input id="code" maxlength="8" autocomplete="off" autofocus
           style="text-align:center;font-size:1.4rem;letter-spacing:.2em;text-transform:uppercase"
           placeholder="ABC123">
  </div>
  <button class="btn" id="go" style="width:100%">Continue</button>
  <p class="small muted" id="pc" style="margin-top:14px"></p>
</div>
<script>
  const pc = new URLSearchParams(location.search).get("pc") || "";
  if (pc) document.getElementById("pc").textContent = "This PC: " + pc;
  function go() {
    const c = document.getElementById("code").value.trim().toUpperCase();
    if (!c) return;
    location = `/${encodeURIComponent(c)}/join/` + (pc ? `?pc=${encodeURIComponent(pc)}` : "");
  }
  document.getElementById("go").onclick = go;
  document.getElementById("code").addEventListener("keydown",
    (e) => { if (e.key === "Enter") go(); });
</script>
{% endblock %}