{% 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>
  <div class="end tools">
    {% if exercise.type == "shadowing" %}
      {# The takes of the sentence on screen, and how often it was heard. #}
      <p class="counts">
        {{ icon.mic() }}<span class="takes">0</span>
        {{ icon.headphones() }}<span class="listens">0</span>
      </p>
    {% endif %}
    {# A word to the agent, about the item on screen. #}
    <button type="button" class="square note-toggle" aria-label="💬" aria-expanded="false"
            aria-controls="notes">{{ icon.note() }}<span class="noted" hidden></span></button>
  </div>
{% 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 in ("mcq", "multi-select") %}
                <h2 class="prompt" dir="{{ item.prompt|direction }}">{{ item.prompt }}</h2>
                {# One to pick, or every one that applies. An option that holds a
                   sound or a picture is a tile with its own player, and the
                   tiles stand side by side. Short texts are tiles to hit;
                   longer ones are rows to read. #}
                {% set box = "checkbox" if exercise.type == "multi-select" else "radio" %}
                {% set sensed = item.options|selectattr("media")|list|length > 0 %}
                {% set tiles = not sensed and item.options and item.options|length <= 4
                               and item.options|map(attribute="text")|map("length")|max <= 10 %}
                <ul class="options{% if sensed %} sensed{% elif tiles %} tiles{% endif %}" data-count="{{ item.options|length }}">
                  {% for option in item.options %}
                    <li>
                      {% if option.media %}
                        {# Nothing but its number is written on it: the name is the
                           answer's, and would give the answer away. The tile is
                           chosen by a click anywhere on it but its own buttons
                           (exercise.js). #}
                        <div class="option sensed">
                          <input type="{{ box }}" name="item-{{ index }}"
                                 data-option="{{ option.name }}" aria-label="{{ loop.index }}">
                          <span class="key">{{ loop.index }}</span>
                          <span class="body">
                            {% with media = option.media, size = "big" if item.options|length <= 2 else "" %}
                              {% include "media.html" %}
                            {% endwith %}
                          </span>
                          <span class="badge">{{ icon.check() }}{{ icon.cross() }}</span>
                        </div>
                      {% else %}
                        <label class="option">
                          <input type="{{ box }}" name="item-{{ index }}"
                                 data-option="{{ option.name }}">
                          <span class="key">{{ loop.index }}</span>
                          <span class="label" dir="{{ option.text|direction }}">{{ option.text }}</span>
                          <span class="badge">{{ icon.check() }}{{ icon.cross() }}</span>
                        </label>
                      {% endif %}
                    </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">
                        {% if entry.media %}
                          <span class="side sensed">
                            {% with media = entry.media, size = "small" %}
                              {% include "media.html" %}
                            {% endwith %}
                          </span>
                        {% else %}
                          <span class="side" dir="{{ entry.text|direction }}">{{ entry.text }}</span>
                        {% endif %}
                        {# 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>

  {# A note is written to the agent and read when the student says they are
     done. What was already written about the item on screen is shown above
     the field and is not touched again: notes are only ever added. #}
  <aside id="notes" class="notes sheet" hidden>
    <ol class="written">
      {% for note in notes %}
        <li data-item="{{ note.item if note.item is not none else 'end' }}" dir="auto">{{ note.text }}</li>
      {% endfor %}
    </ol>
    <textarea class="note-field" rows="4" spellcheck="false" dir="auto"></textarea>
    <button type="button" class="square note-send" aria-label="➤" disabled>{{ icon.send() }}</button>
  </aside>
{% 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 %}