{% extends "base.html" %}
{% block content %}
<div x-data="agentsPage()">
<header class="page-header"><h1>Agents</h1><p class="subtitle page-tip">Marketing agent rules, event log, and Herman task delegation.</p></header>
<section class="panel"><h2>Delegate to Herman</h2>
<form class="form-grid" @submit.prevent="delegate">
  <input class="form-input" x-model="delegateForm.agent" placeholder="Agent key (marketing, bizdev...)" />
  <textarea class="form-input" x-model="delegateForm.task" placeholder="Task"></textarea>
  <button class="btn btn-primary" type="submit">Send</button>
</form>
<pre x-text="delegateResult"></pre></section>
<section class="panel"><h2>Agent rules</h2>
<button class="btn btn-secondary" @click="loadRules()">Reload rules</button>
<pre x-text="rulesJson"></pre></section>
<section class="panel"><h2>Event log</h2>
<input class="form-input" x-model="filter" placeholder="Filter text..." />
<ul class="agent-feed">{% for ev in events %}
<li class="clickable-row" x-show="!filter || '{{ (ev.title or ev.event_type)|e }}'.toLowerCase().includes(filter.toLowerCase())">
  <span class="badge">{{ ev.agent_name }}</span> {{ ev.title or ev.event_type }} <small>{{ ev.created_at }}</small>
</li>{% endfor %}</ul></section>
</div>
{% endblock %}
{% block scripts %}
<script>
function agentsPage() {
  return {
    filter: '', rulesJson: '', delegateResult: '',
    delegateForm: { agent: 'marketing', task: '' },
    async delegate() {
      const r = await Cockpit.api('/delegate', { method: 'POST', body: JSON.stringify(this.delegateForm) });
      this.delegateResult = JSON.stringify(r.result, null, 2);
    },
    async loadRules() {
      const r = await Cockpit.api('/agent-rules');
      this.rulesJson = JSON.stringify(r.items, null, 2);
    }
  };
}
</script>
{% endblock %}