{% extends "base.html" %}
{% import "icons.html" as icon %}
{% import "player.html" as player %}

{% block title %}{{ exercise.title }}{% endblock %}

{% block styles %}
<link rel="stylesheet" href="/static/exercise.css">
{% endblock %}

{% block body_attributes %} data-exercise="{{ exercise.identifier }}" data-type="{{ exercise.type }}"{% endblock %}

{% block header %}
  {# Where the student is: a dot per item, then the end. A dot says how its
     item went, and a click on it goes there. #}
  <nav class="middle steps"{% if items|length > 8 %} data-many{% endif %}>
    <ol>
      {% for item in items %}
        <li>
          <a class="dot" href="#{{ loop.index }}" aria-label="{{ loop.index }}">
            <span class="number">{{ loop.index }}</span>{{ icon.check() }}{{ icon.cross() }}
          </a>
        </li>
      {% endfor %}
      <li>
        <a class="dot finish" href="#end" aria-label="🏁">{{ icon.flag() }}</a>
      </li>
    </ol>
  </nav>
  {% if exercise.type == "shadowing" %}
    {# The takes of the sentence on screen, and how often it was heard. #}
    <p class="end counts">
      {{ icon.mic() }}<span class="takes">0</span>
      {{ icon.headphones() }}<span class="listens">0</span>
    </p>
  {% endif %}
{% endblock %}

{% block content %}
  {% set reading = exercise.text or exercise.media %}
  <div class="exercise{% if reading %} reading{% endif %}">
    {# What every item is about, kept beside them from one to the next. #}
    {% if reading %}
      <aside class="text sheet">
        {% if exercise.media %}
          {% with media = exercise.media, seek = true %}
            {% include "media.html" %}
          {% endwith %}
        {% endif %}
        {% if exercise.text %}
          {% if exercise.text.title %}<h2 dir="{{ exercise.text.title|direction }}">{{ exercise.text.title }}</h2>{% endif %}
          {% for lines in exercise.text.paragraphs %}
            <p dir="{{ lines|direction }}">{% for line in lines %}{{ line }}{% if not loop.last %}<br>{% endif %}{% endfor %}</p>
          {% endfor %}
          {% if exercise.text.source %}
            <p class="source"><a href="{{ exercise.text.source }}" target="_blank"
                                 rel="noopener noreferrer">{{ exercise.text.source }}</a></p>
          {% endif %}
        {% endif %}
      </aside>
    {% endif %}

    <div class="questions">
      {% if exercise.instructions %}
        <p class="bubble instructions" dir="{{ exercise.instructions|direction }}">{{ exercise.instructions }}</p>
      {% endif %}

      <form id="exercise" novalidate>
        {% for item in items %}
          {% set index = loop.index0 %}
          {# One item per screen. An answered item is rebuilt from what the
             student sent, and how it went: they find it as they left it,
             with the right answer beside a wrong one. #}
          <section class="item step" data-item="{{ index }}" data-type="{{ exercise.type }}"
                   {% if not loop.first %} hidden{% endif %}
                   {% if item.answered %} data-answered="yes"
                   data-given='{{ item.given|tojson }}'
                   data-marks='{{ item.marks|tojson }}'{% endif %}>
            {% if item.instruction %}
              <p class="bubble" dir="{{ item.instruction|direction }}">{{ item.instruction }}</p>
            {% endif %}

            <div class="work{% if not reading %} sheet{% endif %}">
              {% if item.media and exercise.type != "shadowing" %}
                {% with media = item.media, size = "big" %}
                  {% include "media.html" %}
                {% endwith %}
              {% endif %}

              {% if exercise.type == "gap-fill" %}
                {# Only the spaces written in the prompt: l'___ and و___ stay
                   joined to their blank. #}
                <p class="prompt gaps" dir="{{ item.segments|direction }}">
                  {%- for segment in item.segments -%}
                    {{ segment }}
                    {%- if not loop.last -%}
                      <input class="blank" type="text" autocomplete="off"
                             autocapitalize="off" spellcheck="false" dir="auto"
                             data-blank="{{ loop.index0 }}">
                    {%- endif -%}
                  {%- endfor -%}
                </p>

              {% elif exercise.type == "mcq" %}
                <h2 class="prompt" dir="{{ item.prompt|direction }}">{{ item.prompt }}</h2>
                {# Short options, as minimal pairs have, are tiles to hit;
                   longer ones are rows to read. #}
                {% set tiles = item.options and item.options|length <= 4
                               and item.options|map("length")|max <= 10 %}
                <ul class="options{% if tiles %} tiles{% endif %}" data-count="{{ item.options|length }}">
                  {% for option in item.options %}
                    <li>
                      <label class="option">
                        <input type="radio" name="item-{{ index }}"
                               data-option="{{ option }}">
                        <span class="key">{{ loop.index }}</span>
                        <span class="label" dir="{{ option|direction }}">{{ option }}</span>
                        <span class="badge">{{ icon.check() }}{{ icon.cross() }}</span>
                      </label>
                    </li>
                  {% endfor %}
                </ul>

              {% elif exercise.type == "matching" %}
                {% if item.prompt %}<h2 class="prompt" dir="{{ item.prompt|direction }}">{{ item.prompt }}</h2>{% endif %}
                <div class="matching">
                  <ul class="pairs">
                    {% for entry in item.left %}
                      <li class="pair">
                        <span class="side" dir="{{ entry|direction }}">{{ entry }}</span>
                        {# Every entry is in each place, unseen and stacked, so that
                           a place is as wide as the widest of them, empty or
                           filled. #}
                        <button type="button" class="slot" dir="{{ item.choices|direction }}" data-slot="{{ loop.index0 }}">
                          {% for choice in item.choices %}<span class="fit" aria-hidden="true">{{ choice }}</span>{% endfor %}
                          <span class="entry"><span class="placeholder">…</span></span>
                        </button>
                      </li>
                    {% endfor %}
                  </ul>
                  <ul class="pool" dir="{{ item.choices|direction }}">
                    {% for choice in item.choices %}
                      <li>
                        <button type="button" class="word chip"
                                data-value="{{ choice }}">{{ choice }}</button>
                      </li>
                    {% endfor %}
                  </ul>
                </div>

              {% elif exercise.type == "ordering" %}
                {% if item.prompt %}<h2 class="prompt" dir="{{ item.prompt|direction }}">{{ item.prompt }}</h2>{% endif %}
                {# The sentence is built from its start, on the right in a
                   language written right to left. #}
                <div class="ordering" dir="{{ item.shuffled|direction }}">
                  <div class="sentence"></div>
                  <div class="bank">
                    {% for segment in item.shuffled %}
                      <span class="pocket" data-slot="{{ loop.index0 }}">
                        <button type="button" class="word" data-slot="{{ loop.index0 }}"
                                data-value="{{ segment }}">{{ segment }}</button>
                      </span>
                    {% endfor %}
                  </div>
                </div>

              {% elif exercise.type == "shadowing" %}
                {# Heard first, read if wanted: blurred, so that it shows how
                   many words there are and not which, and a click shows it. #}
                <button type="button" class="veil" aria-pressed="false"><span class="words" dir="{{ item.prompt|direction }}">{{ item.prompt }}</span><span class="eye">{{ icon.eye() }}{{ icon.eye_off() }}</span></button>
                {# The sound is played by the page rather than by an <audio>:
                   that is how a play is counted, how recording stops it, and
                   how it can start together with the take. Above, the
                   sentence; below, the take; on the right, both at once. Each
                   ▶ is first on its row, one below the other. #}
                <div class="shadowing" data-src="/media/{{ item.media.src }}">
                  <div class="controls reference">
                    <button type="button" class="play reference" aria-label="▶" disabled>{{ icon.play() }}</button>
                    {# The speed button every sound has, started by its script
                       where the item's last take left it. #}
                    {{ player.speed() }}
                  </div>
                  <canvas class="envelope reference"></canvas>
                  <button type="button" class="play both" aria-label="▶▶" disabled>{{ icon.play_both() }}</button>
                  <div class="controls take">
                    <button type="button" class="play take" aria-label="▶" disabled>{{ icon.play() }}</button>
                    <button type="button" class="record" aria-label="●" disabled>{{ icon.record() }}{{ icon.stop() }}</button>
                  </div>
                  <canvas class="envelope take"></canvas>
                </div>

              {% else %}
                <h2 class="prompt" dir="{{ item.prompt|direction }}">{{ item.prompt }}</h2>
                <textarea class="free-text" rows="5" spellcheck="false" dir="auto"></textarea>
              {% endif %}
            </div>
          </section>
        {% endfor %}

        {# The end: nothing to send, every answer is already in the file. What
           is left is how it went, and the items still open. #}
        <section class="summary step" hidden>
          <span class="flag">{{ icon.flag() }}</span>
          <p class="tally">
            <span class="count" data-verdict="right" hidden><span class="badge">{{ icon.check() }}{{ icon.cross() }}</span><span class="number"></span></span>
            <span class="count" data-verdict="wrong" hidden><span class="badge">{{ icon.check() }}{{ icon.cross() }}</span><span class="number"></span></span>
            <a class="count open" href="#1" hidden><span class="hollow"></span><span class="number"></span></a>
          </p>
          {% if exercise.completed_at %}
            <p class="locked">{{ icon.lock() }}<time datetime="{{ exercise.completed_at }}">{{ exercise.completed_at }}</time></p>
          {% endif %}
        </section>
      </form>
    </div>
  </div>
{% endblock %}

{% block footer %}
  {# One button to press next, always in the same place: ✓ while the item
     holds an answer not yet checked, → otherwise. → never stands beside an
     answer that was not checked, so it cannot be taken for sending it. #}
  <footer>
    <div class="controls">
      <button type="button" class="square back" aria-label="←">{{ icon.left() }}</button>
      <div class="outcome">
        <span class="badge" id="verdict" hidden>{{ icon.check() }}{{ icon.cross() }}</span>
        <p id="state" class="state" role="status" aria-live="polite"></p>
      </div>
      <button type="button" class="main next" aria-label="→" data-action="skip">{{ icon.check() }}{{ icon.right() }}</button>
    </div>
  </footer>
{% endblock %}

{% block scripts %}
<script src="/static/exercise.js" type="module"></script>
{% endblock %}