{# Self-contained ask fragments for a booth's VERBATIM index.html.

   The page is served untouched and carries its own CSS, so nothing here may
   inherit from base.html. Since U3 these fragments do not reach the page by
   string substitution: they are rendered here, handed over
   `/b/<name>/embed.json`, and MOUNTED INTO THE DOM by `/_booth/embed.js`. The
   scoped `.bk-ask-*` styles live in that file alongside the code that needs
   them, which is why this template no longer emits a `styles()` block.

   These macros stay the ONE renderer of an ask fragment. embed.js places what
   comes back and never builds one.

   Per-question fragments are wired to ONE form with the HTML5 `form=`
   attribute, so a four-voice report can put each radio group under its own
   audio block and still submit all four picks in a single POST -- which is what
   the multi-question ask requires. The <form> element itself is empty and
   lives with the submit block.
#}

{# One question's radio group, bound to the shared form by id. #}
{% macro question(a, q, form_id, name_url, standalone=False) %}
{% set field = 'choice.' ~ q.key if a.multi else 'choice' %}
{% set qa = (a.answer.answers.get(q.key) if a.multi else a.answer) if a.answer else None %}
{% set picked = qa and qa.choice is not none %}
{% set skipped = a.answer and not picked %}
<div class="bk-ask{% if picked %} bk-done{% elif skipped %} bk-skip{% endif %}" id="bk-ask-{{ a.id }}{% if q.key %}-{{ q.key }}{% endif %}">
  <span class="bk-ask-tag">{% if picked %}✓ answered{% elif skipped %}— skipped{% else %}? your pick{% endif %}</span>
  <p class="bk-ask-prompt">{{ q.prompt }}</p>
  {% if picked %}<p class="bk-ask-was">recorded: <b>{{ qa.label }}</b>{% if qa.notes %} — {{ qa.notes }}{% endif %}</p>
  {% elif skipped %}<p class="bk-ask-was">left blank — pick one any time, or leave it{% if qa and qa.notes %}; note: {{ qa.notes }}{% endif %}</p>{% endif %}
  <div class="bk-ask-opts">
  {% for o in q.options %}
    <label class="bk-ask-opt">
      <input type="radio" name="{{ field }}" value="{{ o.id }}"
             {% if not standalone %}form="{{ form_id }}"{% endif %}
             {% if qa and qa.choice == o.id %}checked{% endif %}>
      <span class="bk-ask-lab"><span>{{ o.label }}</span>
        {% if o.detail %}<span class="bk-ask-det">{{ o.detail }}</span>{% endif %}</span>
    </label>
  {% endfor %}
  </div>
  {% if q.notes %}
    <textarea class="bk-ask-notes" name="notes.{{ q.key }}" rows="2"
              {% if not standalone %}form="{{ form_id }}"{% endif %}
              placeholder="notes on this one (optional)">{{ qa.notes if qa else '' }}</textarea>
  {% endif %}
</div>
{% endmacro %}

{# The form element + hidden fields + overall notes + submit. Empty <form> on
   purpose: the question groups above bind to it by id from wherever they sit. #}
{% macro submit(a, form_id, name_url) %}
<div class="bk-ask{% if a.answer %} bk-done{% endif %}" id="bk-ask-{{ a.id }}-submit">
  <form id="{{ form_id }}" method="post" action="/b/{{ name_url }}/answer"></form>
  <input type="hidden" name="ask" value="{{ a.id }}" form="{{ form_id }}">
  <span class="bk-ask-tag">{% if a.answer and a.answer.complete %}✓ answered {{ a.answer.answered_at }}
    {%- elif a.answer %}◐ {{ a.questions|length - (a.answer.unanswered|length) }} of {{ a.questions|length }} answered · {{ a.answer.answered_at }}
    {%- else %}? submit your picks{% endif %}</span>
  {% if not a.answer %}<p class="bk-ask-was">Answer what you can — blanks are fine, and you can come back.</p>{% endif %}
  {% if a.notes_enabled %}
    <textarea class="bk-ask-notes" name="notes" rows="3" form="{{ form_id }}"
              placeholder="{{ a.notes_label }} (optional)">{{ a.answer.notes if a.answer else '' }}</textarea>
  {% endif %}
  <button type="submit" class="bk-ask-go" form="{{ form_id }}">{% if a.answer %}Update answer{% else %}Submit answer{% endif %}</button>
</div>
{% endmacro %}

{# The whole ask as one self-contained block: title, every question, submit. #}
{% macro whole(a, form_id, name_url) %}
{% if a.error %}
  <div class="bk-ask"><span class="bk-ask-tag">⚠ broken ask</span>
    <p class="bk-ask-err">this question could not be read: {{ a.error }}</p></div>
{% else %}
  {% if a.title %}<p class="bk-ask-title" id="bk-ask-{{ a.id }}">{{ a.title }}</p>{% endif %}
  {% for q in a.questions %}{{ question(a, q, form_id, name_url) }}{% endfor %}
  {{ submit(a, form_id, name_url) }}
{% endif %}
{% endmacro %}