{% extends "server/base.html" %}
{% import "agents/macros.html" as m with context %}
{% set agent = row.kept.agent %}
{% set short = ref(agent.id) %}
{% block title %}{{ agent.name }}{% endblock %}
{% block back %}/ui/agents/{% endblock %}
{% block head %}<link rel="stylesheet" href="{{ asset('agents.css') }}"><script src="{{ asset('agents.js') }}"></script>{% endblock %}
{% block heading %}<span id="crumbs" class="crumbs"><a href="/ui/agents/">{{ t.text("agents.title") }}</a>{% include "agents/icons/chevron-right.svg" %}<b>{{ agent.name }}</b></span>{% endblock %}
{% block actions %}
{% if share %}<button class="btn ghost" type="button" hx-get="/ui/agents/{{ short }}/share" hx-target="#drawer" hx-swap="innerHTML">{% include "agents/icons/share-2.svg" %}{{ t.text("agents.share.action") }}</button>{% endif %}
{% if row.update %}<a class="btn" href="/ui/agents/{{ short }}?tab=config">{% include "agents/icons/pencil.svg" %}{{ t.text("agents.edit") }}</a>{% endif %}
{% if row.delete %}<button class="icon-btn" type="button" hx-get="/ui/agents/{{ short }}/remove" hx-target="#drawer" hx-swap="innerHTML" aria-label="{{ t.text('agents.remove') }}">{% include "agents/icons/trash-2.svg" %}</button>{% endif %}
{% endblock %}
{% block body %}
<section class="content detail" x-data @agents:removed.window="location.assign('/ui/agents/')">
  {# a change draws the header again, and no more: an open folder or a form being filled stays as it is, and each section of the activity follows what it shows itself #}
  <span hidden data-topic="agents.agent" data-scope='{{ {"agent": short | string} | tojson }}' data-seen='{{ seen | tojson }}' hx-get="/ui/agents/{{ short }}" hx-select=".profile" hx-select-oob="#crumbs" hx-target=".profile" hx-swap="outerHTML" hx-trigger="bazaar:change"></span>
  <div class="profile">
    {{ m.avatar(agent, "lg") }}
    <div>
      <h2>{{ agent.name }} {{ m.status(row) }}</h2>
      <div class="facts">
        {% for provider in agent.channel %}
        {% set link = (row.activity.channels | selectattr("connection", "equalto", provider.connection) | first | default(none)) if row.activity else none %}
        <span class="fact">{{ m.logo(provider.kind) }}<b>{{ (link.identity.name or link.identity.id) if link and link.identity else "—" }}</b></span>
        {% endfor %}
        {% if agent.harness %}
        <span class="fact">{% for provider in agent.harness %}{% if not loop.first %}<span class="then">{% include "agents/icons/chevron-right.svg" %}</span>{% endif %}{{ m.logo(provider.kind) }}<b>{{ provider["values"].get("model") or t.text("agents.model.default") }}</b>{% if provider["values"].get("effort") %} · {{ provider["values"].get("effort") }}{% endif %}{% if not loop.first %} · {{ t.text("agents.standby") }}{% endif %}{% endfor %}</span>
        {% endif %}
        <span class="fact">{% include "agents/icons/monitor.svg" %}{{ t.text("agents.runs_on") }} <b>{{ row.computer.name if row.computer else "—" }}</b></span>
        <span class="fact">{{ t.text("agents.mode." ~ agent.mode) }}</span>
      </div>
    </div>
  </div>
  {# its own tabs, and those other modules put there, in their order; a count is the agent's as the update bus says it #}
  {% set icons = {"activity": "activity", "workspace": "folder", "skills": "book-open", "config": "settings"} %}
  <nav class="tabs">
    {% for one in bar %}
    {% if one is string %}
    <a class="tab{% if one == lit %} on{% endif %}" href="/ui/agents/{{ short }}?tab={{ one }}">{% include "agents/icons/" ~ icons[one] ~ ".svg" %}{{ t.text("agents.tab." ~ one) }}</a>
    {% else %}
    <a class="tab{% if one.key == lit %} on{% endif %}" href="/ui/agents/{{ short }}?tab={{ one.key }}">{{ one.icon | safe }}{{ t.text(one.text) }}{% if one.count %}<span data-topic="{{ one.count }}" data-scope='{{ {"agent": short | string} | tojson }}' data-tally hidden></span>{% endif %}</a>
    {% endif %}
    {% endfor %}
    {% if share %}<button class="tab" type="button" hx-get="/ui/agents/{{ short }}/share" hx-target="#drawer" hx-swap="innerHTML">{% include "agents/icons/share-2.svg" %}{{ t.text("agents.tab.share") }}</button>{% endif %}
  </nav>
  {% if opened %}<iframe class="pane" src="{{ opened.src }}/{{ short }}{{ '?' ~ passed if passed else '' }}" data-fit title="{{ t.text(opened.text) }}"></iframe>
  {% else %}{% include "agents/" ~ tab ~ ".html" %}{% endif %}
</section>
<div id="drawer"></div>
{% endblock %}