{% extends "lanexam/base.html" %}
{% block title %}Start an exam{% endblock %}
{% block content %}
<div style="max-width:680px;margin:20px auto">
  <h1>Start an exam</h1>
  <p class="muted">You get a code to read out. Students join with it — no
     accounts, nothing typed on their side but a name and roll number.</p>

  {% if errors %}
    <div class="error"><b>Please fix:</b>
      <ul>{% for e in errors %}<li>{{ e }}</li>{% endfor %}</ul></div>
  {% endif %}

  <form method="post" class="card">
    {% csrf_token %}
    <div class="field">
      <label for="title">Exam name</label>
      <input id="title" name="title" maxlength="80" required
             value="{{ title|default:'' }}">
      <div class="hint">Students see this at the top of their screen.</div>
    </div>

    <div style="display:grid;grid-template-columns:2fr 1fr;gap:14px">
      <div class="field">
        <label for="platform">Where do students answer?</label>
        <input id="platform" name="platform" maxlength="80"
               value="{{ platform|default:'' }}"
               placeholder="e.g. VS Code · Jupyter · AutoCAD · On paper">
        <div class="hint">Just a note for the record. Leave blank to use the
           built-in question sheet below.</div>
      </div>
      <div class="field">
        <label for="minutes">Minutes</label>
        <input id="minutes" name="minutes" type="number" min="1" max="300"
               required value="{{ minutes|default:'30' }}">
        <div class="hint">Clock is kept by the server.</div>
      </div>
    </div>

    <div class="field">
      <label for="exam_url">Exam website (optional)</label>
      <input id="exam_url" name="exam_url" maxlength="300"
             value="{{ exam_url|default:'' }}"
             placeholder="http://192.168.1.20:8888/ — an exam hosted on this LAN">
      <div class="hint">If the exam is on another site, paste it here — it's
         shown to students as a link and treated as their allowed exam page.
         For an offline exam, this page must also be hosted on the LAN.</div>
    </div>

    <div class="field">
      <label for="questions">Questions (optional)</label>
      <textarea id="questions" name="questions" spellcheck="false"
        placeholder="Leave blank if the exam is in another app or on paper.">{{ questions_text|default:'' }}</textarea>
      <div class="hint">Blank line between questions, <b>*</b> on the right
         answer. Fill this only if students answer here on SnapNPlan.</div>
    </div>

    <button class="btn" type="submit">Create session</button>
  </form>

  <div class="card small muted">
    <b style="color:var(--ink)">What happens on exam day</b><br>
    Every set-up PC runs a background monitor. When a student joins, it logs
    every website, app switch, USB stick and clipboard action, and saves a
    screenshot when a flag requests one. Browser ML screen monitoring is required
    alongside the Windows agent. Review observations before deciding what happened.
    You can Allow or Deny a site or app for the room or one student.
    <button class="btn ghost small" type="button" id="fill" style="margin-top:12px">
      Use sample questions</button>
  </div>
</div>
{{ sample|json_script:"sample" }}
<script>
  document.getElementById("fill").onclick = () => {
    const t = document.getElementById("questions");
    t.value = JSON.parse(document.getElementById("sample").textContent);
    t.focus();
  };
</script>
{% endblock %}