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

  Two shapes, one mechanism: a question the model asked, and (later) a command
  waiting to be allowed. Everything shown here is model output and is escaped
  accordingly -- the question text, 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.

  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>

  {% for item in ask.items %}
  <div class="interaction__item">
    <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 %}

  <form class="interaction__actions"
        hx-post="/api/chats/{{ chat_id }}/interaction/{{ ask.id }}"
        hx-swap="none">
    {% if ask.kind == "question" %}
      {% for option in ask.options %}
      <button class="btn" type="submit" name="choice" value="{{ option }}">{{ option }}</button>
      {% endfor %}
      {% if ask.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 transcript
         is not a place to put secrets. #}
      <div class="interaction__write">
        <input class="input" type="text" name="text" autocomplete="off"
               placeholder="Or write your own answer…">
        <button class="btn btn--primary" type="submit">
          {{ icon("send", "icon--sm") }} Answer
        </button>
      </div>
      {% endif %}
    {% else %}
      <button class="btn btn--primary" type="submit" name="choice" value="allow">
        {{ icon("check", "icon--sm") }} Allow
      </button>
      <button class="btn" type="submit" name="choice" value="allow_always">
        Always allow this
      </button>
      <button class="btn btn--danger" type="submit" name="choice" value="deny">
        {{ icon("x", "icon--sm") }} Don't
      </button>
    {% endif %}
  </form>
</div>