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

{% block title %}{{ targets|map(attribute="target")|join(" · ") }}{% endblock %}

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

{% block body_attributes %} data-proposal="{{ identifier }}"{% endblock %}

{% block content %}
  {# The cards one after the other, in the order the agent proposed them.
     Their target is not shown: the plugin never shows it, so a card on the
     page looks as it will in review. Every word on the page is one the agent
     or the student wrote: the rest is symbols. #}
  {% for entry in targets %}
    {% set t = loop.index0 %}
    {% for card in entry.cards %}
      {% set place = [t, loop.index0] %}
      {% include "card.html" %}
    {% endfor %}
  {% endfor %}

  <button type="button" class="add-card" aria-label="＋">{{ icon.plus() }}</button>

  {# What the student adds from scratch. #}
  <template id="blank-card">
    {% set card = blank %}
    {% set place = none %}
    {% include "card.html" %}
  </template>

  {# A picture the student brings, in the strip of the card it was brought to. #}
  <template id="picture">
    <button type="button" class="picture" aria-pressed="false">
      <img alt=""><span class="tick">{{ icon.check() }}</span>
    </button>
  </template>
{% endblock %}

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