{% extends "base.html" %}
{% block title %}Triggers · {{ current_project.name }} — Bento{% endblock %}
{% block content %}
<header class="page-header">
  <h1 class="page-title">Triggers <span class="title-count">{{ rows|length }}</span></h1>
</header>

{% if rows %}
<ul class="trigger-rows">
  {% for r in rows %}
  {% set is_active = r.agent_state in ('online', 'working') %}
  {% set av = agent_avatar(r.agent_slug) %}
  <li class="trigger-row with-agent">
    <div class="trigger-icon kind-{{ r.kind }}">
      {% if r.kind == 'cron' %}
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
      {% elif r.kind == 'inbox' %}
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5h13a2 2 0 0 1 1.8 1.1l3.7 7.4V19a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-5.5L3.7 6.1A2 2 0 0 1 5.5 5z" transform="translate(1 0)"/></svg>
      {% else %}
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/></svg>
      {% endif %}
    </div>
    <div class="trigger-body">
      <div class="trigger-title-row">
        <strong class="trigger-kind-label">{{ r.kind|capitalize }}</strong>
      </div>
      <div class="trigger-meta">
        {% if r.kind == 'cron' %}
          <span class="trigger-meta-label">SCHEDULE</span>
          <code class="trigger-meta-value">{{ r.schedule }}</code>
          <span class="trigger-meta-human muted small">{{ humanize_cron(r.schedule) }}</span>
        {% elif r.kind == 'inbox' %}
          <span class="trigger-meta-label">ENDPOINT</span>
          <code class="trigger-meta-value">POST /agents/{{ r.agent_id }}/inbox/{{ r.source[6:] }}</code>
        {% else %}
          <span class="trigger-meta-label">SOURCE</span>
          <code class="trigger-meta-value">{{ r.source }}</code>
        {% endif %}
      </div>
      {% if r.filter %}
      <div class="trigger-meta">
        <span class="trigger-meta-label">FILTER</span>
        <code class="trigger-meta-value">{{ r.filter | tojson }}</code>
      </div>
      {% endif %}
    </div>
    <a class="trigger-agent-cell agent-pill" href="/p/{{ current_project.slug }}/agents/{{ r.agent_slug }}">
      <span class="avatar-mini" style="background: {{ av.color }}">{{ av.abbr }}</span>
      {{ r.agent_name }}
    </a>
    <label class="toggle trigger-toggle" title="{{ 'Disable trigger' if r.enabled else 'Enable trigger' }}">
      <input type="checkbox" data-trigger-toggle data-agent-id="{{ r.agent_id }}" data-source="{{ r.source }}" {% if r.enabled %}checked{% endif %}>
      <span class="toggle-track"><span class="toggle-thumb"></span></span>
    </label>
    <button class="btn-test-trigger"
            data-agent-id="{{ r.agent_id }}"
            data-kind="{{ r.kind }}"
            data-source="{{ r.source }}"
            {% if r.filter %}data-filter='{{ r.filter | tojson | forceescape }}'{% endif %}
            {% if r.example %}data-example='{{ r.example | tojson | forceescape }}'{% endif %}
            {% if r.description %}data-description="{{ r.description }}"{% endif %}
            {% if not is_active %}disabled title="Agent must be online"{% endif %}>
      Test trigger
    </button>
  </li>
  {% endfor %}
</ul>
{% else %}
<p class="empty-state">No triggers registered in <strong>{{ current_project.name }}</strong>. Run <code>bento serve agent.py</code> for an agent that declares <code>@app.webhook</code>, <code>@app.cron</code>, or <code>@app.inbox</code>.</p>
{% endif %}

<dialog class="trigger-modal" id="trigger-modal">
  <header class="trigger-modal-head">
    <h3 id="trigger-modal-title">Test trigger</h3>
    <button class="dialog-close" id="trigger-modal-close" aria-label="Close">×</button>
  </header>
  <div class="trigger-modal-body">
    <p class="trigger-modal-description muted small" id="trigger-modal-description" hidden></p>
    <dl class="kv-list trigger-modal-info">
      <dt>Source</dt><dd><code id="trigger-modal-source"></code></dd>
      <dt id="trigger-modal-filter-label" hidden>Filter</dt>
      <dd id="trigger-modal-filter-wrap" hidden><code id="trigger-modal-filter"></code></dd>
    </dl>
    <label class="trigger-modal-field-label" for="trigger-modal-payload">Payload (JSON)</label>
    <textarea id="trigger-modal-payload" class="trigger-modal-textarea" spellcheck="false" rows="10"></textarea>
    <p class="trigger-modal-error error-text" id="trigger-modal-error" hidden></p>
  </div>
  <footer class="trigger-modal-foot">
    <button class="btn-secondary" id="trigger-modal-cancel">Cancel</button>
    <button class="trigger-modal-submit" id="trigger-modal-submit">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
      Fire trigger
    </button>
  </footer>
</dialog>

<script src="/static/triggers.js"></script>
{% endblock %}