{% from "_macros.html" import icon %}
{#
  The reply has stopped and is waiting for you.

  Two shapes, one mechanism: questions the model asked, and (later) a command
  waiting to be allowed. Everything shown here is model output and is escaped
  accordingly -- the questions, the options on the buttons and the command
  itself all came from a model that may have been reading somebody else's file
  a moment ago.

  Deliberately attributed to the model rather than styled as if LLeMbas were
  asking. A question that looks like it came from the application is a question
  people answer with things they would not tell a chatbot.

  Several questions go on ONE card and come back in ONE submit. Asking them one
  at a time would cost a round trip and an interruption each, and answering the
  third would mean having forgotten the first.

  hx-swap="none" because the SSE stream clears this card the moment the answer
  lands; swapping a response in here would fight it.
#}
<div class="interaction interaction--{{ ask.kind }}">
  <p class="interaction__from">
    {{ icon("sparkle", "icon--sm") }}
    <span>The model is asking you</span>
  </p>

  <form class="interaction__form"
        hx-post="/api/chats/{{ chat_id }}/interaction/{{ ask.id }}"
        hx-swap="none">

    {% if ask.kind == "question" %}
      {% for item in ask.items %}
      <fieldset class="interaction__question">
        <legend class="interaction__title">{{ item.title }}</legend>

        {% if item.options %}
        <div class="interaction__options">
          {% for option in item.options %}
          <label class="chip">
            <input type="radio" name="choice.{{ item.key }}" value="{{ option }}">
            <span>{{ option }}</span>
          </label>
          {% endfor %}
        </div>
        {% endif %}

        {% if item.allow_free_text %}
        {# Never type="password". A model talked into asking for a credential
           must not be handed a field that looks built for one, and a chat
           transcript is not a place to keep secrets. #}
        <input class="input" type="text" name="text.{{ item.key }}" autocomplete="off"
               placeholder="{{ 'Or write your own answer…' if item.options else 'Your answer…' }}">
        {% endif %}
      </fieldset>
      {% endfor %}

      <div class="interaction__actions">
        <button class="btn btn--primary" type="submit">
          {{ icon("send", "icon--sm") }}
          {{ "Answer" if ask.items | length == 1 else "Send answers" }}
        </button>
        <span class="interaction__note">
          {%- if ask.items | length > 1 %}All of them at once. {% endif -%}
          Leave any blank to skip it.
        </span>
      </div>

    {% else %}
      {% for item in ask.items %}
      <div class="interaction__question">
        <p class="interaction__title">{{ item.title }}</p>
        {% if item.detail %}
        <pre class="interaction__detail">{{ item.detail }}</pre>
        {% endif %}
        {% if item.reason %}
        <p class="interaction__reason">{{ item.reason }}</p>
        {% endif %}
      </div>
      {% endfor %}

      <div class="interaction__actions">
        <button class="btn btn--primary" type="submit" name="verdict" value="allow">
          {{ icon("check", "icon--sm") }} Allow
        </button>
        <button class="btn" type="submit" name="verdict" value="allow_always">
          Always allow this
        </button>
        <button class="btn btn--danger" type="submit" name="verdict" value="deny">
          {{ icon("x", "icon--sm") }} Don't
        </button>
      </div>
    {% endif %}
  </form>
</div>