{% import "components.html" as c with context %}
{# the configuration of an agent as cards: the agent itself, then one card
   per channel and per runtime, kept as a stack of pages per kind with a
   blank page at the end to start another. field names carry the card's
   number, so the handler reads the cards back in the order they were added;
   the values sent are the configuration's own words, the page shows them in
   the reader's #}

{% macro kind_name(family, kind) -%}
{{ t.text("agents." ~ family ~ "." ~ kind) if t.has("agents." ~ family ~ "." ~ kind) else kind }}
{%- endmacro %}

{% macro logo(family, kind) -%}
{% if family == "channel" %}{{ c.channels((kind,)) }}{% else %}{{ c.runtimes((kind,)) }}{% endif %}
{%- endmacro %}

{% macro basic(values) -%}
<div class="dialog part">
  <div class="field"><label for="agent-name">{{ t.text("agents.name") }}</label><input id="agent-name" name="name" x-model="name" value="{{ values.get("name", "") }}" required autocomplete="off"></div>
  <div class="field"><label for="agent-mode">{{ t.text("agents.mode") }}</label>{{ c.select("agent-mode", "mode", [("session", t.text("agents.mode.session")), ("dangerous_individual", t.text("agents.mode.dangerous_individual"))], values.get("mode", "session"), attrs='x-model="mode"') }}</div>
  <div class="field"><label for="agent-idle">{{ t.text("agents.idle") }}</label><input id="agent-idle" name="idle_timeout" x-model.number="idle_timeout" type="number" min="0" step="1" value="{{ values.get("idle_timeout", 0)|int }}" class="num"><span class="unit">{{ t.text("agents.seconds") }}</span></div>
</div>
{%- endmacro %}

{# what the agent tells a conversation still waiting to be looked at #}
{% macro reply(value) -%}
<div class="dialog part">
  <div class="title">{{ t.text("contacts.reply") }}</div>
  <p class="st">{{ t.text("contacts.reply_hint") }}</p>
  <div class="field"><textarea name="reply" x-model="reply" rows="2" placeholder="{{ t.text("contacts.reply_empty") }}">{{ value }}</textarea></div>
</div>
{%- endmacro %}

{% macro model_options(models) -%}
{% set fallback = models|selectattr("default")|list %}
<option value="" data-efforts="{{ fallback[0].efforts|join(" ") if fallback else "" }}">{{ t.text("agents.model_default") }}</option>{% for item in models if item.id != "default" %}<option value="{{ item.id }}" data-efforts="{{ item.efforts|join(" ") }}">{{ item.name }}</option>{% endfor %}
{%- endmacro %}

{# a field waiting on what the computer lists: turning while it is asked,
   the way to ask again when it did not answer #}
{% macro waiting() -%}
<span class="wait" x-show="card.modelState === 'loading'">{{ c.icon("loader") }}</span><button class="btn icon" type="button" data-again x-show="card.modelState === 'error'" :title="card.modelError" @click="loadModels(card)" aria-label="{{ t.text("agents.retry") }}">{{ c.icon("rotate-cw") }}</button>
{%- endmacro %}

{% macro initial(values, reply, kept=false, origins=none) -%}
{% set labels = {"modelDefault": t.text("agents.model_default"),
  "effortDefault": t.text("agents.effort_default"),
  "basic": t.text("agents.step.basic"),
  "reply": t.text("contacts.reply"),
  "filled": t.text("agents.summary.filled"),
  "empty": t.text("agents.summary.empty"),
  "on": t.text("agents.summary.on"),
  "off": t.text("agents.summary.off"),
  "none": t.text("agents.summary.none"),
  "seconds": t.text("agents.seconds"),
  "secrets": secrets,
  "fields": {"name": t.text("agents.name"), "mode": t.text("agents.mode"), "idle_timeout": t.text("agents.idle"), "model": t.text("agents.model"), "effort": t.text("agents.effort"), "sandbox_mode": t.text("agents.sandbox"), "network_access": t.text("agents.network"), "env": t.text("agents.env"), "app_id": t.text("agents.field.app_id"), "region": t.text("agents.field.region"), "bot_id": t.text("agents.field.bot_id"), "websocket_url": t.text("agents.field.websocket_url"), "token": t.text("agents.field.token"), "app_secret": t.text("agents.field.app_secret"), "secret": t.text("agents.field.secret")},
  "values": {"mode": {"session": t.text("agents.mode.session"), "dangerous_individual": t.text("agents.mode.dangerous_individual")}, "region": {"feishu": t.text("agents.region.feishu"), "lark": t.text("agents.region.lark")}, "sandbox_mode": {"workspace-write": t.text("agents.sandbox.workspace-write"), "danger-full-access": t.text("agents.sandbox.danger-full-access")}},
  "channel": {"telegram": kind_name("channel", "telegram")|trim, "lark": kind_name("channel", "lark")|trim, "wecom": kind_name("channel", "wecom")|trim},
  "runtime": {"codex": kind_name("runtime", "codex")|trim, "claudecode": kind_name("runtime", "claudecode")|trim}} %}
<script type="application/json" data-editor>{{ {"fields": editor(values, reply, kept=kept, origins=origins), "labels": labels}|tojson }}</script>
{%- endmacro %}

{% macro card_head(family) -%}
<div class="title">
  {% for kind in ("telegram", "lark", "wecom") if family == "channel" %}<span class="kind-logo" x-show="card.kind === '{{ kind }}'">{{ logo(family, kind) }}</span>{% endfor %}
  {% for kind in ("codex", "claudecode") if family == "runtime" %}<span class="kind-logo" x-show="card.kind === '{{ kind }}'">{{ logo(family, kind) }}</span>{% endfor %}
  <span x-text="labels.{{ family }}[card.kind] || card.kind"></span><span class="ver" x-show="card.version" x-text="card.version"></span>
  <button class="btn icon" type="button" title="{{ t.text('agents.remove_card') }}" aria-label="{{ t.text('agents.remove_card') }}" data-remove @click="removeCard('{{ family }}', card)">{{ c.icon('trash-2') }}</button>
</div>
{%- endmacro %}

{% macro channel_card() -%}
{{ card_head('channel') }}
<template x-if="card.kind === 'lark'"><div>
  <div class="field"><label>{{ t.text('agents.field.app_id') }}</label><input :name="'channel-' + card.id + '-app_id'" x-model="card.app_id" required autocomplete="off"></div>
  <div class="field"><label>{{ t.text('agents.field.region') }}</label><span class="select"><select :name="'channel-' + card.id + '-region'" x-model="card.region"><option value="feishu">{{ t.text('agents.region.feishu') }}</option><option value="lark">{{ t.text('agents.region.lark') }}</option></select>{{ c.icon('chevron-down') }}</span></div>
</div></template>
<template x-if="card.kind === 'wecom'"><div>
  <div class="field"><label>{{ t.text('agents.field.bot_id') }}</label><input :name="'channel-' + card.id + '-bot_id'" x-model="card.bot_id" required autocomplete="off"></div>
  <div class="field"><label>{{ t.text('agents.field.websocket_url') }}</label><input :name="'channel-' + card.id + '-websocket_url'" x-model="card.websocket_url" placeholder="wss://openws.work.weixin.qq.com" autocomplete="off"></div>
</div></template>
{% for kind, field in secrets.items() %}
<template x-if="card.kind === '{{ kind }}'"><div class="field">
  <label>{{ t.text('agents.field.' ~ field) }}</label>
  <span class="secret" x-show="!card.change"><span class="chip">{{ t.text('agents.secret_set') }}</span><button class="btn sm" type="button" data-change @click="card.change = true; $nextTick(() => $focus.focus($el.closest('.field').querySelector('input')))">{{ t.text('agents.secret_change') }}</button></span>
  <input :name="'channel-' + card.id + '-secret'" x-model="card.secret" type="password" :required="!card.secret_set" x-show="card.change" autocomplete="new-password">
</div></template>
{% endfor %}
{%- endmacro %}

{% macro runtime_card() -%}
{{ card_head('runtime') }}
<div class="field"><label>{{ t.text('agents.model') }}</label><span class="select"><select :name="'runtime-' + card.id + '-model'" x-model="card.model" x-init="$watch('card.model', () => updateEffort(card))" @pointerdown="loadModels(card, $event)" @keydown="loadModels(card, $event)" data-model><template x-for="option in card.models" :key="option.value"><option :value="option.value" x-text="option.label"></option></template></select>{{ c.icon('chevron-down') }}</span>{{ waiting() }}</div>
<div class="field" x-show="card.modelState !== 'ready' || card.efforts.length"><label>{{ t.text('agents.effort') }}</label><span class="select"><select :name="'runtime-' + card.id + '-effort'" x-model="card.effort" @pointerdown="loadModels(card, $event)" @keydown="loadModels(card, $event)" data-effort><option value="">{{ t.text('agents.effort_default') }}</option><template x-for="effort in card.efforts" :key="effort"><option :value="effort" x-text="effort"></option></template></select>{{ c.icon('chevron-down') }}</span>{{ waiting() }}</div>
<div class="field"><label>{{ t.text('agents.sandbox') }}</label><span class="select"><select :name="'runtime-' + card.id + '-sandbox_mode'" x-model="card.sandbox_mode"><option value="workspace-write">{{ t.text('agents.sandbox.workspace-write') }}</option><option value="danger-full-access">{{ t.text('agents.sandbox.danger-full-access') }}</option></select>{{ c.icon('chevron-down') }}</span></div>
<div class="field"><label>{{ t.text('agents.network') }}</label><label class="sw"><input type="checkbox" :name="'runtime-' + card.id + '-network_access'" x-model="card.network_access"><span class="track"><span class="knob"></span></span></label></div>
<div class="field top"><label>{{ t.text('agents.env') }}</label><div class="list">
  <template x-for="row in card.env" :key="row.id"><div class="kv" data-row>
    <input :name="'runtime-' + card.id + '-env-' + row.id + '-name'" x-model="row.name" placeholder="{{ t.text('agents.env_name') }}" autocomplete="off"><span class="arrow">=</span>
    <template x-if="row.was !== null"><input type="hidden" :name="'runtime-' + card.id + '-env-' + row.id + '-was'" :value="row.was"></template>
    <span class="secret" x-show="!row.change"><span class="chip">{{ t.text('agents.secret_set') }}</span><button class="btn sm" type="button" data-change @click="row.change = true; $nextTick(() => $focus.focus($el.closest('.kv').querySelector('[type=password]')))">{{ t.text('agents.secret_change') }}</button></span>
    <input :name="'runtime-' + card.id + '-env-' + row.id + '-value'" x-model="row.value" type="password" x-show="row.change" placeholder="{{ t.text('agents.env_value') }}" autocomplete="new-password">
    <button class="btn icon" type="button" title="{{ t.text('agents.remove_card') }}" aria-label="{{ t.text('agents.remove_card') }}" data-remove @click="card.env.splice(card.env.indexOf(row), 1)">{{ c.icon('x') }}</button>
  </div></template>
  <button class="btn sm ghost" type="button" data-env-add @click="addEnv(card)">{{ c.icon('plus') }} {{ t.text('agents.env_add') }}</button>
</div></div>
{%- endmacro %}

{% macro kinds(family, listed) -%}
{% if listed.answer != 'listed' %}
<p class="err">{{ t.text('agents.' ~ listed.answer, {'code': listed.code}) }}</p><button class="btn sm" type="button" @click="loadKinds('{{ family }}', true)">{{ c.icon('rotate-cw') }} {{ t.text('agents.retry') }}</button>
{% else %}
{% for item in listed.kinds %}<button type="button" data-add="{{ family }}-{{ item.kind }}"{% if family == "runtime" %} data-version="{{ item.version or '' }}"{% endif %} @click='addCard({{ family|tojson }}, {{ item.kind|tojson }}, {{ (item.version if family == "runtime" else "")|tojson }})'{% if family == 'runtime' and not item.available %} disabled title="{{ t.text('agents.not_found') }}"{% endif %}>{{ logo(family, item.kind) }}{{ kind_name(family, item.kind) }}{% if family == 'runtime' %}{% if item.available %}{% if item.version %}<span class="ver">{{ item.version }}</span>{% endif %}{% else %}<span class="miss">{{ c.icon('triangle-alert') }}</span>{% endif %}{% endif %}</button>{% endfor %}
{% endif %}
{%- endmacro %}

{% macro deck(family, owner) -%}
<div class="deck" data-family="{{ family }}" id="{{ owner }}-{{ family }}-deck" hx-morph-skip>
  <div class="side" x-show="cards.{{ family }}.length">
    <button type="button" data-turn="-1" :disabled="selected.{{ family }} === 0" @click="turn('{{ family }}', -1)" title="{{ t.text('agents.previous') }}" aria-label="{{ t.text('agents.previous') }}">{{ c.icon('chevron-up') }}</button>
    <button type="button" data-turn="1" :disabled="selected.{{ family }} === cards.{{ family }}.length" @click="turn('{{ family }}', 1)" title="{{ t.text('agents.next') }}" aria-label="{{ t.text('agents.next') }}">{{ c.icon('chevron-down') }}</button>
  </div>
  <template x-for="(card, index) in cards.{{ family }}" :key="card.id"><div class="dialog part" data-card :data-card-id="card.id" :class="{shown: selected.{{ family }} === index}">
    <input type="hidden" :name="'{{ family }}-' + card.id + '-kind'" :value="card.kind">
    <template x-if="card.was !== null"><input type="hidden" :name="'{{ family }}-' + card.id + '-was'" :value="card.was"></template>
    {{ channel_card() if family == 'channel' else runtime_card() }}
  </div></template>
  <div class="dialog part blank" data-blank="{{ family }}" :class="{shown: selected.{{ family }} === cards.{{ family }}.length}">
    <div class="title">{{ t.text('agents.blank.' ~ family) }}</div>
    <div class="loading" x-show="kinds.{{ family }} === 'loading'">{{ c.icon('loader') }}</div>
    <div class="kinds" x-show="kinds.{{ family }} !== 'loading'"></div>
    <button class="btn sm" type="button" x-show="kinds.{{ family }} === 'error'" @click="loadKinds('{{ family }}', true)">{{ c.icon('rotate-cw') }} {{ t.text('agents.retry') }}</button>
  </div>
</div>
{%- endmacro %}