{% extends "base.html" %}
{% block title %}{{ exam.title }}{% endblock %}
{% block content %}
<div class="card" style="max-width:720px;margin:0 auto">
  <div class="crumbs"><a href="{{ url_for('student_home') }}">My exams</a></div>
  <h1>{{ exam.title }}</h1>
  <p class="muted">{{ exam.subject }}{% if teacher %} · {{ teacher.full_name }}{% endif %}</p>

  <div class="pill-row">
    <div class="pill"><b>{{ nq }}</b><span>Questions</span></div>
    <div class="pill"><b>{{ exam.duration_min }} min</b><span>Time allowed</span></div>
    <div class="pill"><b>{{ total|num }}</b><span>Total marks</span></div>
    <div class="pill"><b>{{ exam.pass_mark|num }}%</b><span>Pass mark</span></div>
  </div>

  {% if exam.instructions %}<h3>Instructions</h3><div class="instructions">{{ exam.instructions }}</div>{% endif %}

  <h3 style="margin-top:18px">Before you begin</h3>
  <ul>
    <li>The timer starts the moment you press <b>Start exam</b> and keeps running even if you close the page.</li>
    <li>Your answers save automatically. You can change them until you submit or time runs out.</li>
    <li>When time is up the exam is submitted for you.</li>
    <li>Staying on this tab is expected. Leaving it is recorded for your teacher.</li>
    <li>You can only take this exam once.</li>
  </ul>

  {% if state == 'open' %}
  <form method="post" action="{{ url_for('exam_start', eid=exam.id) }}" style="margin-top:20px">
    <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
    <button class="btn primary" type="submit">Start exam</button>
    <a class="btn" href="{{ url_for('student_home') }}">Not yet</a>
  </form>
  {% elif state == 'upcoming' %}
    <div class="flash info" style="margin-top:20px">This exam opens on {{ exam.opens_at|dt }}.</div>
  {% else %}
    <div class="flash error" style="margin-top:20px">This exam closed on {{ exam.closes_at|dt }}.</div>
  {% endif %}
</div>
{% endblock %}