{% extends "base.html" %}
{% from "components/ui.html" import ago, card, empty, filter_bar, link_button, webhook_state %}
{% block title %}Webhooks · {{ APP_NAME }}{% endblock %}
{% block heading %}Webhooks{% endblock %}
{% block subheading %}<div class="sub">Where the service posts what changed in your accounts</div>{% endblock %}
{% block actions %}
{% if can_create %}{{ link_button("/ui/webhooks/new", "New webhook", "plus-lg", cls="primary") }}{% endif %}
{% endblock %}
{% block content %}
{% call card("Webhooks", meta=webhooks | length, tight=True) %}
<div class="body list-bar">{{ filter_bar(bar) }}</div>
{% if webhooks %}
<div class="table-scroll">
  <table>
    <thead><tr><th>URL</th><th>Events</th><th>Accounts</th><th>Last delivery</th><th>State</th></tr></thead>
    <tbody>
      {% for hook in webhooks %}
      <tr>
        <td class="name"><a class="mono" href="/ui/webhooks/{{ hook.id }}">{{ hook.url }}</a></td>
        <td>{% for event in hook.events %}<span class="tag">{{ event }}</span> {% endfor %}</td>
        <td>{% if hook.accounts is none %}every account you may read{% else %}{% for account in hook.accounts %}{{ names.get(account, account) }}{% if not loop.last %}, {% endif %}{% endfor %}{% endif %}</td>
        <td>{{ ago(hook.last_delivery_at) }}</td>
        <td>{{ webhook_state(hook.last_error) }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
{{ empty("No webhook matches." if bar.chips else "No webhook yet.") }}
{% endif %}
{% endcall %}
{% endblock %}