{% extends "base.html" %}
{% block title %}{{ exam.title }}{% endblock %}
{% block bodyclass %}examing{% endblock %}
{% block topbar %}
<header class="examtop">
  <div class="inner">
    <div class="title">{{ exam.title }}<small>{{ g.user.full_name }} · {{ g.user.username }}</small></div>
    <span class="savestate" id="savestate"></span>
    <div class="timer" id="timer" aria-live="off">--:--</div>
    <button class="btn primary" type="button" id="finish-top">Submit</button>
  </div>
</header>
{% endblock %}
{% block content %}
<script id="boot" type="application/json" data-csrf="{{ csrf_token() }}">{{ boot|tojson }}</script>
<div class="exam-layout">
  <section>
    <div class="warnbar">Your answers save automatically, even if the connection drops, and you resume where you stopped if the page closes. Leaving the exam screen gives a warning and is recorded for your teacher. The exam submits itself when the timer reaches zero.</div>
    <div class="qcard" id="qcard"></div>
  </section>
  <aside class="palette">
    <h3>Questions <span class="muted small" id="count"></span></h3>
    <div class="pgrid" id="pgrid"></div>
    <div class="legend">
      <span><i class="d"></i>Answered</span>
      <span><i></i>Not answered</span>
      <span><i style="border-radius:50%;background:var(--accent);border-color:var(--accent)"></i>Marked for review</span>
    </div>
    <button class="btn dark block" type="button" id="finish-side">Submit exam</button>
  </aside>
</div>

<div class="modal" id="modal" hidden>
  <div class="box">
    <h2>Submit your exam?</h2>
    <p id="modal-text"></p>
    <div class="row" style="margin-top:16px">
      <button class="btn primary" type="button" id="confirm-submit">Yes, submit</button>
      <button class="btn" type="button" id="cancel-submit">Keep working</button>
    </div>
  </div>
</div>
<div class="modal gate" id="fsgate" hidden>
  <div class="box" style="text-align:center">
    <h2 id="fs-title">Ready to begin</h2>
    <p id="fs-text"></p>
    <button class="btn primary" type="button" id="fs-btn" style="margin-top:12px">Enter fullscreen and continue</button>
  </div>
</div>
<div class="modal" id="busy" hidden><div class="box" style="text-align:center"><h2 id="busy-text">Submitting your exam…</h2><p class="muted">Please do not close this page.</p></div></div>
{% endblock %}
{% block scripts %}<script src="{{ url_for('static', filename='exam.js') }}?v={{ app_version }}"></script>{% endblock %}