{% import "components.html" as c with context %}
{% import "agent_form.html" as f with context %}
{# a new agent on this computer, in steps over the page, the way the page
   asks for anything: the agent, its channels, its runtimes, then what it
   will be read back. kept up with what was typed when the computer says
   no, opened on the last step with why; gone once it says yes #}
{% if created is defined and created %}
<div id="agent-new" hidden></div>
{% else %}
{% set channels = values.get("channel", []) %}
{% set runtimes = values.get("runtime", []) %}
<div class="veil" id="agent-new" hx-on:click="if (event.target === this) this.hidden = true">
  <form class="sheet wizard" hx-disable="find [data-done]" hx-post="/computers/{{ ref(selected.computer.id) }}/agents" data-computer="/computers/{{ ref(selected.computer.id) }}" hx-target="#agent-new" hx-swap="outerHTML" data-next="{{ channels|length + runtimes|length }}" data-at="{{ 3 if failed else 0 }}" data-basic="{{ t.text("agents.step.basic") }}" data-filled="{{ t.text("agents.summary.filled") }}" data-empty="{{ t.text("agents.summary.empty") }}" data-on="{{ t.text("agents.summary.on") }}" data-off="{{ t.text("agents.summary.off") }}" data-none="{{ t.text("agents.summary.none") }}">
    <h3>{{ t.text("agents.new_title") }}</h3>
    <ol class="stepper">
      {% for step in ("basic", "channels", "runtimes", "confirm") %}<li><button type="button" data-go="{{ loop.index0 }}"><span class="pin"></span>{{ t.text("agents.step." ~ step) }}</button></li>{% endfor %}
    </ol>
    <div class="steps">
      <section data-step="basic"><p class="hint">{{ t.text("agents.hint.basic") }}</p>{{ f.basic(values) }}{{ f.reply(reply) }}</section>
      <section data-step="channels" hidden><p class="hint">{{ t.text("agents.hint.channels") }}</p>{{ f.deck("channel", channels, 0) }}</section>
      <section data-step="runtimes" hidden><p class="hint">{{ t.text("agents.hint.runtimes") }}</p>{{ f.deck("runtime", runtimes, channels|length) }}</section>
      <section data-step="confirm" data-summary-step hidden>
        <p class="hint">{{ t.text("agents.hint.confirm") }}</p>
        <div data-summary></div>
        {% if failed %}<p class="err">{{ t.text("agents." ~ failed.partition(":")[0], {"code": failed.partition(":")[2] or none}) }}</p>{% endif %}
      </section>
    </div>
    <div class="foot">
      <button class="btn" type="button" data-back>{{ t.text("agents.back") }}</button>
      <span class="grow"></span>
      <button class="btn" type="button" hx-on:click="document.getElementById('agent-new').hidden = true">{{ t.text("computers.cancel") }}</button>
      <button class="btn p" type="button" data-forward>{{ t.text("agents.forward") }}</button>
      <button class="btn p" type="button" data-done hidden>{{ t.text("agents.create") }}</button>
    </div>
    {{ f.script() }}
  </form>
</div>
{% endif %}