{% extends "lanexam/base.html" %}
{% load static %}
{% block title %}{{ session.title }} · exam{% endblock %}
{% block topright %}{% endblock %}
{% block style %}
<style>
  .proctor-bar { position:sticky; top:0; z-index:50; display:flex; align-items:center;
    gap:12px; flex-wrap:wrap; padding:10px 16px; margin:-24px -16px 18px;
    border-bottom:1px solid var(--line); background:var(--card); }
  .proctor-bar .pip { width:11px; height:11px; border-radius:50%;
    background:var(--muted); flex:none; }
  .proctor-bar .msg { font-weight:700; font-size:.92rem; }
  .proctor-bar .clock { margin-left:auto; font-weight:800;
    font-variant-numeric:tabular-nums; font-size:1.05rem; }
  .proctor-bar[data-state="ok"] .pip { background:var(--good); }
  .proctor-bar[data-state="warning"] { background:var(--warn-soft); }
  .proctor-bar[data-state="warning"] .pip { background:var(--warn); animation:blink 1s infinite; }
  .proctor-bar[data-state="warning"] .msg { color:var(--warn); }
  .proctor-bar[data-state="flagged"] { background:var(--bad-soft); }
  .proctor-bar[data-state="flagged"] .pip { background:var(--bad); }
  .proctor-bar[data-state="flagged"] .msg { color:var(--bad); }
  .proctor-bar[data-state="permitted"] .pip { background:var(--accent); }
  .proctor-bar[data-state="paused"] .pip { background:var(--muted); }
  @keyframes blink { 50% { opacity:.25; } }
  .clock.low { color:var(--bad); }
  .gate { max-width:620px; margin:30px auto; text-align:center; }
  .gate ul { text-align:left; display:inline-block; margin:16px 0 24px; line-height:1.9; }
  .gate .err { color:var(--bad); font-weight:700; min-height:1.4em; }
  .q { background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:18px 20px; margin-bottom:14px; }
  .q .n { font-size:.76rem; font-weight:800; color:var(--muted); letter-spacing:.08em; }
  .q .text { font-weight:700; margin:6px 0 14px; }
  .opt { display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--line);
    border-radius:12px; padding:10px 14px; margin-bottom:8px; cursor:pointer; }
  .opt.sel { border-color:var(--accent); background:var(--accent-soft); }
  .ext { background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:22px; text-align:center; }
  .submit-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    margin:24px 0 60px; }
  .debug { font-family:ui-monospace,Consolas,monospace; font-size:.78rem;
    color:var(--muted); background:var(--card); padding:6px 12px;
    border:1px solid var(--line); border-radius:8px; margin:-8px 0 14px;
    white-space:pre; overflow-x:auto; }
</style>
{% endblock %}
{% block content %}
{{ questions|json_script:"qdata" }}
{{ student.answers|json_script:"adata" }}

<div id="connection" class="card" role="status" aria-live="polite">Checking the teacher server and Windows agent…</div>
<section class="gate" id="gate">
  <h1>{{ session.title }}</h1>
  <p class="muted">{{ session.minutes }} minutes · {{ student.name }}
     {% if student.roll %}· {{ student.roll }}{% endif %}</p>
  <p class="small muted">Time remaining: <strong id="gate-clock">--:--</strong>. The deadline continues while monitoring is restored.</p>
  <ul>
    <li>Close everything except what you need for the exam.</li>
    <li>The Windows agent and browser ML screen monitoring are both required.</li>
    <li>Share your <b>entire screen</b>. The model must load and analyse a frame before you can enter.</li>
    <li>Only <i>times</i> and events are recorded. A screenshot is saved only if
        something is flagged.</li>
    {% if session.exam_url %}<li>Your exam page becomes available after compulsory monitoring starts.</li>
    {% elif session.platform %}<li>Answer in: <b>{{ session.platform }}</b></li>{% endif %}
  </ul>
  <button class="btn" id="begin">Share entire screen &amp; start exam</button>
  <p class="err" id="gate-err"></p>
</section>

<section id="exam" hidden>
  <div class="proctor-bar" id="bar" data-state="ok">
    <span class="pip"></span>
    <span class="msg" id="bar-msg">Screen is being monitored</span>
    <span class="clock" id="clock">--:--</span>
  </div>
  <div class="debug" id="debug" hidden></div>

  {% if session.exam_url or not session.questions %}
  <div class="ext" id="extpanel">
    <h2 style="margin-bottom:6px">Your exam is in another {% if session.exam_url %}page{% else %}app{% endif %}</h2>
    {% if session.exam_url %}
      <p class="muted">Open it and keep working. This tab must stay open — it's
         what keeps you monitored and keeps your clock running.</p>
      <p style="margin-top:12px"><a class="btn" id="external-exam-link"
         target="_blank" rel="noopener">Open exam page</a></p>
    {% else %}
      <p class="muted">Answer in <b>{{ session.platform|default:"your exam application" }}</b>.
         Keep this tab open — it keeps you monitored and your clock running.</p>
    {% endif %}
  </div>
  {% endif %}

  <div id="questions"></div>

  <div class="submit-row">
    <button class="btn" id="submit">{% if session.questions %}Submit exam{% else %}I've finished — submit{% endif %}</button>
    <span class="small muted" id="progress"></span><span class="small" id="save-status" role="status"></span>
  </div>
</section>
{% endblock %}

{% block script %}
<script type="module">
  import { startExamPage } from "{% static 'lanexam/exam.js' %}";
  startExamPage({
    code: "{{ session.code }}", sittingId: {{ student.id }},
    heartbeatUrl: "{% url 'lan_hb' session.code %}",
    startUrl: "{% url 'lan_start' session.code %}",
    answerUrl: "{% url 'lan_answer' session.code %}",
    submitUrl: "{% url 'lan_submit' session.code %}",
    reportUrl: "{% url 'lan_report' session.code %}",
    modelUrl: "{% static 'lanexam/screen_model/model.json' %}",
    tfUrl: "{% static 'lanexam/tf.min.js' %}",
    csrf: "{{ csrf_token }}", secondsLeft: {{ seconds_left }},
    serverTime: "{{ server_time|escapejs }}",
    watchTabAway: {% if session.exam_url or session.platform or not session.questions %}false{% else %}true{% endif %}
  });
</script>
{% endblock %}