{% macro panel(base, hooks, csrf, what) %}
<section class="panel" id="webhooks">
  <h2>Webhooks</h2>
  <p class="small mute">{{ what }}</p>
  {% if hooks.is_empty() %}<p class="mute small">None.</p>{% else %}
  <table class="small"><tr><th>URL</th><th>Events</th><th>Active</th><th></th></tr>
  {% for h in hooks %}<tr><td>{{ h.url }}</td><td>{{ h.events }}</td><td>{% if h.active %}yes{% else %}no{% endif %}</td>
  <td><a class="small" href="{{ base }}/hooks/{{ h.id }}/deliveries">deliveries</a>
  <form class="tiny" method="post" action="{{ base }}/hooks"><input type="hidden" name="_csrf" value="{{ csrf }}"><input type="hidden" name="id" value="{{ h.id }}"><button name="action" value="ping">ping</button> <button name="action" value="toggle">{% if h.active %}disable{% else %}enable{% endif %}</button> <button name="action" value="delete">delete</button></form></td></tr>{% endfor %}
  </table>{% endif %}
  <form class="card" method="post" action="{{ base }}/hooks">
    <input type="hidden" name="_csrf" value="{{ csrf }}">
    <label for="hurl">URL</label><input type="text" id="hurl" name="url" placeholder="https://…" required>
    <label for="hsecret">Secret (signs each delivery)</label><input type="text" id="hsecret" name="secret">
    <label for="hevents">Events (<code>*</code>, or a list such as <code>push,proposal,issue</code>)</label><input type="text" id="hevents" name="events" value="*">
    <button type="submit">ADD WEBHOOK</button>
  </form>
</section>
{% endmacro %}