{# One card: a question and an answer, each with what may go on it. `place`
   is where it sits in the proposal, and none for a card made from scratch.

   The picture shows on its side, and the pictures to pick from in a strip
   under both sides, pointing at it. A card with none to pick from has a
   button to bring one instead. A sound plays on its side, with no speed: what
   is on the card is what is kept, and a button leaves it off the card. #}
{% import "icons.html" as icon %}
{% import "player.html" as player %}

<article class="card sheet"
         {% if place is not none %} data-place="{{ place|tojson }}"{% endif %}
         {% if card.published %} data-published="{{ card.published }}"{% endif %}
         data-picture-side="{{ card.picture_side }}"
         {% if card.audio %} data-audio="{{ card.audio }}"
         data-audio-side="{{ card.audio_side }}"{% endif %}>
  <div class="faces">
    {% for side in ["question", "answer"] %}
      <div class="face" data-side="{{ side }}">
        {% if card.picture_side == side %}
          <img class="chosen" alt=""
               {% if card.pictures %}src="/media/{{ card.pictures[0] }}"{% else %}hidden{% endif %}>
          <button type="button" class="bring" aria-label="🖼️"{% if card.pictures %} hidden{% endif %}>{{ icon.picture() }}{{ icon.plus() }}</button>
        {% endif %}
        <textarea class="text" rows="1" spellcheck="false" dir="auto">{{ card[side] }}</textarea>
        {% if card.audio and card.audio_side == side %}
          <div class="sound">
            {{ player.sound(card.audio, size="small", wave=true, slow=false) }}
            <button type="button" class="keep" aria-pressed="true" aria-label="🔊">{{ icon.speaker() }}{{ icon.speaker_off() }}</button>
          </div>
        {% endif %}
      </div>
    {% endfor %}
  </div>

  <div class="pictures" data-side="{{ card.picture_side }}"{% if not card.pictures %} hidden{% endif %}>
    {% for src in card.pictures %}
      <button type="button" class="picture" data-src="{{ src }}"
              aria-pressed="{{ 'true' if loop.first else 'false' }}">
        <img src="/media/{{ src }}" alt=""><span class="tick">{{ icon.check() }}</span>
      </button>
    {% endfor %}
    <button type="button" class="picture none" data-src="" aria-label="∅"
            aria-pressed="{{ 'false' if card.pictures else 'true' }}">{{ icon.no_picture() }}</button>
    <button type="button" class="picture own" aria-label="🖼️">{{ icon.picture() }}{{ icon.plus() }}</button>
  </div>
  {# Where both buttons above take a picture from: a file of the student's. #}
  <input type="file" accept="image/*" hidden>

  <div class="actions">
    {# Reviewed from the question only, or both ways. #}
    <div class="reversible">
      <button type="button" class="direction" data-reversible="false" aria-label="→"
              aria-pressed="{{ 'false' if card.reversible else 'true' }}">{{ icon.one_way() }}</button>
      <button type="button" class="direction" data-reversible="true" aria-label="⇄"
              aria-pressed="{{ 'true' if card.reversible else 'false' }}">{{ icon.both_ways() }}</button>
    </div>
    <p class="state" role="status"></p>
    <button type="button" class="main validate" aria-label="✓">{{ icon.check() }}</button>
  </div>
</article>